Codex peut examiner les erreurs de console et les requêtes en échec si son client dispose d’un outil qui expose ces signaux. Chrome DevTools MCP donne cet accès à une instance Chrome. Reproduisez le problème, reliez le message à la requête, modifiez le code en cause, puis refaites le contrôle dans le navigateur.
Un utilisateur de Codex sur Reddit expliquait recopier régulièrement les erreurs de console dans le client. Le déroulé ci-dessous recueille ces observations depuis le navigateur.
L’exemple utilise une page locale sans compte. Une faute dans le chemin demandé donne un document HTTP 200 et un appel API HTTP 404. La capture, la console et la réponse réseau répondent à trois questions différentes.
À retenir
L’enregistrement du serveur valide la configuration. Une page ouverte et son instantané valident l’accès en cours d’exécution.
Comparez le chemin réellement demandé avec la route déclarée.
Notez la réponse et le symptôme avant de modifier le code.
Après correction, rejouez le scénario et vérifiez réseau, console et page.
Reproduisez le défaut dans un navigateur isolé et expurgez les données privées.
Quels éléments recueillir
| Signal | Outil ou vue | Élément à conserver |
|---|---|---|
| Page courante | Liste des pages et instantané | URL, page sélectionnée et symptôme |
| Console | list_console_messages, get_console_message | Erreur, identifiant et emplacement si disponible |
| Réseau | list_network_requests, get_network_request | Méthode, chemin, statut, identifiant et extrait partageable |
| Résultat visible | take_screenshot ou instantané | Erreur affichée ou état corrigé |
| Code | Projet dans Codex | Chemin du fetch et route du serveur |
Un agent d’automatisation Web peut utiliser un instantané pour vérifier l’affichage. Ici, il montre « Could not load preferences ». Le réseau indique quelle requête a échoué. Voir le guide de l’automatisation du navigateur.
1. Connecter Chrome DevTools MCP à Codex
Enregistrez le serveur avec la syntaxe officielle de Codex CLI. La commande fixe la version utilisée pour l’essai. Elle lance Chrome dans un profil temporaire sans interface et désactive les statistiques d’usage ainsi que la recherche de données terrain de performance.
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.12.0 \
--headless --isolated --no-usage-statistics --no-performance-crux
codex mcp listOuvrez une nouvelle session Codex et demandez la liste des pages, puis l’ouverture d’une URL locale autorisée. La liste confirme l’enregistrement. Un instantané confirme l’accès à la page. Voir la référence OpenAI et le dépôt officiel.
Le navigateur intégré à ChatGPT a un réglage CDP complet distinct en mode développeur. L’organisation peut le limiter. Voir les paramètres OpenAI. Pour lire ou cliquer, un agent de navigateur peut suffire. Un navigateur virtuel est aussi possible si le serveur de test lui est accessible.
2. Reproduire la requête en échec
Enregistrez le code de l’exercice sous preferences-fixture.cjs puis lancez node preferences-fixture.cjs. Le serveur écoute uniquement en local et affiche son URL. Ouvrez-la avec ?stage=before. La page demande un thème d’exemple puis affiche « Could not load preferences ».
Demandez à Codex l’URL, le symptôme, le message associé et le détail de la requête. Les mesures de ce guide viennent de Chrome DevTools MCP 1.12.0 via un client MCP local. La syntaxe de Codex CLI a fait l’objet d’une vérification séparée.
Ouvre l’URL locale avec ?stage=before et attends le changement d’état.
Indique l’URL sélectionnée, le résultat visible, le message de console,
ainsi que la méthode, le chemin et le statut du GET en échec.
Consulte le détail par identifiant. Reste sur cette origine locale.3. Relier le message à la requête
Le document est chargé en HTTP 200. GET /api/prefences renvoie 404 et la réponse contient unknown route. La console écrit [preferences] GET /api/prefences failed: HTTP 404. Les trois observations pointent vers le chemin mal orthographié. Un message générique de ressource indisponible laisse l’appel ambigu.
Rapprochez méthode et chemin avant de consulter l’identifiant. Il peut changer après une navigation. Face à une erreur CORS, un délai dépassé, une redirection ou un 401, identifiez d’abord la condition réellement observée.
4. Corriger le chemin et rejouer
La variante ?stage=after appelle /api/preferences, avec le même serveur et le même balisage. Dans une application réelle, corrigez le fichier concerné puis rejouez l’action dans le même environnement. Attendez un état observable plutôt qu’une pause fixe.
| Contrôle | Avant | Après |
|---|---|---|
| Document | HTTP 200 | HTTP 200 |
| Requête de données | GET /api/prefences, HTTP 404 | GET /api/preferences, HTTP 200 |
| Console | Échec de la requête | Journal indiquant le chargement de light |
| Affichage | Could not load preferences | Theme: light |
Un statut réseau 200 peut encore laisser la mauvaise interface. Vérifiez les données et leur rendu, puis demandez la preuve que l’élément attendu a changé. La liste de vérification de la première tâche aide à définir ce résultat.
Limiter les données du diagnostic
Un profil connecté peut exposer des pages privées et des détails de requête. Un navigateur isolé peut toujours envoyer des requêtes. Travaillez sur une origine de test autorisée et retirez cookies, identifiants et réponses privées des rapports. Voir le guide de sécurité des navigateurs agentiques.
Un autre développeur voulait inspecter la session déjà utilisée pour ses tests manuels. C’est un besoin distinct d’une reproduction locale dans un profil neuf.
Tabbit Browser convient à la lecture et aux actions Web. Pour le réseau et la console, vérifiez que l’intégration choisie expose ces données. Voir Tabbit et Codex et le fonctionnement de Tabbit.
Un rapport court peut réunir la requête en échec, le changement appliqué et le résultat qui montre que le symptôme a disparu.
Questions fréquentes
Codex peut-il lire la console Chrome ?
Oui, si son client dispose d’un outil qui expose ces messages. Chrome DevTools MCP liste les messages de la page sélectionnée et permet d’en consulter un par identifiant.
Peut-il examiner une requête en échec ?
Chrome DevTools MCP liste les requêtes de la page et permet de consulter leur détail par identifiant. Rapprochez l’URL, la méthode et le statut de l’action qui a provoqué l’erreur.
Pourquoi la page renvoie-t-elle 200 alors que l’API renvoie 404 ?
Le document HTML et les appels ultérieurs sont des transactions HTTP distinctes. Le chargement de la page ne prouve pas que le script a demandé le bon chemin.
Faut-il utiliser mon profil Chrome connecté ?
Une instance isolée suffit généralement à reproduire un défaut local. Si une connexion est indispensable, utilisez un profil de test autorisé et retirez les données sensibles des rapports.
Chrome DevTools MCP équivaut-il à l’accès CDP complet dans ChatGPT ?
Ce sont deux connexions distinctes. Chrome DevTools MCP est un serveur configuré séparément. L’application ChatGPT applique son propre réglage CDP et les politiques de l’organisation.
Qu’est-ce qui prouve la correction ?
Rejouez l’action d’origine et vérifiez la requête, la console et le résultat visible. Dans cet exemple, le bon endpoint renvoie 200 et la page affiche Theme: light.