Codex puede leer errores de consola y solicitudes fallidas cuando el cliente tiene conectada una herramienta con acceso a esas señales. Chrome DevTools MCP ofrece esa conexión a una instancia de Chrome. Reproduce el fallo, relaciona el mensaje con la solicitud, modifica el código responsable y repite la comprobación en el navegador.
Un usuario de Codex en Reddit contó que copiaba los errores de consola al cliente una y otra vez. Este procedimiento recoge esas observaciones desde el navegador.
El ejemplo usa una página local sin cuentas. Una ruta mal escrita hace que el documento responda con HTTP 200 y que la API devuelva HTTP 404. La captura, la consola y la respuesta de red explican partes distintas del fallo.
Puntos clave
Registrar el servidor comprueba la configuración. Abrir una página y obtener una instantánea comprueba la conexión en ejecución.
Compara la ruta que solicitó el navegador con la declarada en el código.
Registra respuesta y síntoma antes de editar.
Repite el flujo después de corregir y confirma red, consola y página.
Usa un navegador aislado para la prueba local y retira datos privados.
Qué evidencia recoger
| Señal | Herramienta o vista | Qué guardar |
|---|---|---|
| Página actual | Lista de páginas e instantánea | URL, página seleccionada y síntoma |
| Consola | list_console_messages, get_console_message | Error relevante, ID y ubicación si aparece |
| Red | list_network_requests, get_network_request | Método, ruta, estado, ID y extracto seguro |
| Resultado visible | take_screenshot o instantánea | Error o estado corregido |
| Código | Proyecto de Codex | Ruta de fetch y ruta del servidor |
Un agente de automatización web puede usar la instantánea para comprobar el texto. En este caso muestra “Could not load preferences”, y la pestaña de red permite identificar qué solicitud falló. La guía de automatización del navegador explica las acciones sobre la página.
1. Conecta Chrome DevTools MCP a Codex
Registra el servidor MCP con el formato oficial de Codex CLI. El ejemplo fija la versión utilizada en la prueba, abre Chrome aislado y sin interfaz gráfica y desactiva las estadísticas de uso y la consulta de datos de rendimiento de usuarios reales.
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.12.0 \
--headless --isolated --no-usage-statistics --no-performance-crux
codex mcp listAbre una sesión nueva de Codex y pide listar páginas y abrir una URL local autorizada. La lista confirma el registro. Una instantánea de la página comprueba el acceso real. Consulta la referencia de OpenAI y el repositorio oficial.
El navegador integrado de ChatGPT tiene un ajuste separado de acceso completo a CDP en el modo de desarrollador. La organización puede restringirlo. Consulta los ajustes de OpenAI. Para leer y pulsar quizá baste un agente de navegador. Un navegador virtual también sirve si la herramienta puede alcanzar el servidor de prueba.
2. Reproduce la solicitud fallida
Guarda el código del ejercicio como preferences-fixture.cjs y ejecuta node preferences-fixture.cjs. El servidor escucha solo en la dirección local e imprime su URL. Ábrela con ?stage=before. La página pide un tema de ejemplo y muestra “Could not load preferences”.
Pide a Codex la URL, el texto visible, el mensaje de consola y los detalles de la solicitud. La evidencia de esta guía procede de Chrome DevTools MCP 1.12.0 mediante un cliente MCP local. La sintaxis de configuración de Codex CLI se comprobó aparte.
Abre la URL local con ?stage=before. Espera a que cambie el estado.
Indica la URL seleccionada, el texto visible, el mensaje de consola y
el método, ruta y estado del GET fallido. Consulta su ID. Permanece
dentro del origen local.3. Relaciona consola y red
El documento respondió con 200. GET /api/prefences devolvió 404 y el cuerpo indicó unknown route. La consola registró [preferences] GET /api/prefences failed: HTTP 404. Los tres datos apuntan a una errata en la ruta solicitada. Un aviso genérico de recurso fallido no indica cuál fue.
Asocia método y ruta antes de consultar el ID. Los identificadores pueden cambiar después de navegar. Si observas CORS, tiempo de espera, redirección o 401, identifica primero el fallo real.
4. Corrige la ruta y repite
La variante ?stage=after cambia el endpoint a /api/preferences en el mismo servidor y con la misma estructura de página. En un proyecto real, corrige el archivo correspondiente y repite la acción original en el entorno de prueba. Espera una condición visible en lugar de una pausa fija.
| Comprobación | Antes | Después |
|---|---|---|
| Documento | HTTP 200 | HTTP 200 |
| Petición de datos | GET /api/prefences, HTTP 404 | GET /api/preferences, HTTP 200 |
| Consola | La petición de preferencias falló | El registro indica que se cargó light |
| Pantalla | Could not load preferences | Theme: light |
Si la red muestra 200 y la interfaz sigue mal, revisa los campos y su renderizado. Pide una comprobación del elemento que debe cambiar. La lista para la primera tarea de un agente ayuda a definir esa condición.
Limita los datos de diagnóstico
Un perfil de Chrome conectado puede mostrar sesiones autenticadas y detalles de las solicitudes. Incluso un navegador aislado puede enviar peticiones. Usa un origen local o de prueba autorizado y excluye cookies, credenciales y respuestas privadas de cualquier informe. Consulta la guía de seguridad de navegadores agénticos.
Otro desarrollador quería inspeccionar la misma sesión de sus pruebas manuales. Eso requiere un entorno distinto al de una reproducción local limpia.
Para leer y actuar en páginas puedes usar Tabbit Browser. Si necesitas Network y Console, confirma que la integración elegida expone esos datos. Lee Tabbit frente a Codex y cómo funciona Tabbit.
Un informe breve puede registrar la petición fallida, el cambio aplicado y la evidencia de que el síntoma desapareció.
Preguntas frecuentes
¿Codex puede leer la consola de Chrome?
Sí, si el cliente está conectado a una herramienta que expone esos mensajes. Chrome DevTools MCP enumera los mensajes de la página seleccionada y permite consultar cada uno por su ID.
¿Puede inspeccionar una solicitud fallida?
Chrome DevTools MCP puede listar las solicitudes de la página e inspeccionar una por ID. Relaciona la URL, el método y el estado con la acción que causó el fallo.
¿Por qué la página devuelve 200 y la API devuelve 404?
El documento HTML y las peticiones posteriores son transacciones HTTP distintas. La respuesta del documento no demuestra que el código haya solicitado la ruta correcta.
¿Necesito usar mi perfil habitual de Chrome?
Para un fallo local suele bastar una instancia aislada. Si hay que iniciar sesión, usa un perfil de prueba autorizado y retira los datos sensibles de los informes.
¿Chrome DevTools MCP equivale al acceso completo a CDP en la aplicación ChatGPT?
Son conexiones distintas. Chrome DevTools MCP se configura como servidor separado. La aplicación ChatGPT tiene su propio ajuste de acceso completo a CDP y sus propias políticas.
¿Cómo demuestro que se corrigió el fallo?
Repite la acción original, revisa la solicitud y la consola, y comprueba el resultado visible. En este ejemplo, la ruta corregida devuelve 200 y se muestra Theme: light.