O Codex pode ler erros de console e requisições que falharam quando seu cliente usa uma ferramenta que expõe esses sinais. Chrome DevTools MCP conecta a ferramenta a uma instância do Chrome. Reproduza o erro, associe a mensagem à requisição, altere o código responsável e verifique de novo no navegador.
Um usuário de Codex no Reddit contou que copiava repetidamente os erros do console para o cliente. O fluxo abaixo coleta essas observações diretamente.
O exemplo usa uma página local sem conta. Uma rota escrita incorretamente faz o documento retornar HTTP 200 e a API retornar HTTP 404. A captura, o console e a resposta de rede mostram partes diferentes do problema.
Pontos principais
O registro do servidor confirma a configuração. Uma página aberta e seu snapshot confirmam o acesso em execução.
Compare o caminho solicitado pelo navegador com a rota do código.
Registre a resposta e o sintoma antes de editar.
Depois da correção, repita o fluxo e confira rede, console e tela.
Use um navegador isolado e exclua dados privados dos relatórios.
O que registrar
| Sinal | Ferramenta ou tela | Evidência |
|---|---|---|
| Página atual | Lista de páginas e snapshot | URL, página selecionada e sintoma |
| Console | list_console_messages, get_console_message | Mensagem, ID e localização quando disponível |
| Rede | list_network_requests, get_network_request | Método, caminho, status, ID e trecho seguro |
| Resultado visível | take_screenshot ou snapshot | Erro na tela ou estado corrigido |
| Código | Projeto no Codex | Caminho do fetch e rota do servidor |
Um agente de automação web pode usar o snapshot para confirmar o texto da tela. Neste caso, ele mostra “Could not load preferences”, enquanto a rede revela a requisição que falhou. Veja o guia de automação de navegador.
1. Conecte Chrome DevTools MCP ao Codex
Registre o servidor pelo formato oficial do Codex CLI. O comando fixa a versão usada no experimento, inicia o Chrome isolado e sem interface, desativa estatísticas de uso e desliga a consulta de dados reais de desempenho.
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.12.0 \
--headless --isolated --no-usage-statistics --no-performance-crux
codex mcp listAbra uma nova sessão do Codex e peça a lista de páginas e a abertura de uma URL local autorizada. A lista de servidores confirma o registro. O snapshot de uma página comprova a conexão em execução. Veja a referência da OpenAI e o repositório oficial.
O navegador integrado do ChatGPT tem uma opção separada de CDP completo no modo de desenvolvedor. A organização pode restringi-la. Consulte as configurações da OpenAI. Para ler e clicar, um agente de navegador pode bastar. Um navegador virtual também serve quando consegue alcançar o servidor de teste.
2. Reproduza a requisição que falha
Salve o código do exercício como preferences-fixture.cjs e execute node preferences-fixture.cjs. O servidor só escuta no endereço local e imprime a URL. Abra-a com ?stage=before. A página tenta carregar um tema de exemplo e mostra “Could not load preferences”.
Peça ao Codex a URL, o sintoma, a mensagem de console e os detalhes da requisição. A evidência deste guia vem do Chrome DevTools MCP 1.12.0, chamado diretamente por um cliente MCP local. A sintaxe de configuração do Codex CLI foi verificada à parte.
Abra a URL local com ?stage=before e espere a mudança do estado.
Informe a URL selecionada, o resultado visível e a mensagem de console.
Liste método, caminho e status do GET que falhou e consulte seu ID.
Fique nesta origem local.3. Relacione o console à rede
O documento retornou HTTP 200. GET /api/prefences retornou 404, com unknown route no corpo. O console registrou [preferences] GET /api/prefences failed: HTTP 404. Os dados apontam para a grafia errada na chamada. Um erro genérico de recurso não indica qual requisição falhou.
Associe método e caminho antes de consultar o ID, que pode mudar após outra navegação. Se aparecer CORS, timeout, redirecionamento ou 401, identifique primeiro o problema observado.
4. Corrija o caminho e repita
A versão ?stage=after troca a rota por /api/preferences, no mesmo servidor e com a mesma estrutura. Num aplicativo real, altere o arquivo correspondente e repita a ação no mesmo ambiente de teste. Espere a condição visível em vez de uma pausa fixa.
| Verificação | Antes | Depois |
|---|---|---|
| Documento | HTTP 200 | HTTP 200 |
| Dados | GET /api/prefences, HTTP 404 | GET /api/preferences, HTTP 200 |
| Console | Falha na requisição de preferências | Registro confirma que light foi carregado |
| Tela | Could not load preferences | Theme: light |
Se a rede retorna 200 e a tela continua errada, examine os dados e a renderização. Peça a confirmação do elemento que deveria mudar. A lista para a primeira tarefa do agente ajuda a definir esse resultado.
Restrinja o diagnóstico ao ambiente de teste
Um perfil conectado pode expor páginas autenticadas e detalhes das requisições. Mesmo um navegador isolado faz chamadas de rede. Use uma origem de teste autorizada e deixe cookies, credenciais e respostas privadas fora do relatório. Veja o guia de segurança.
Outro desenvolvedor queria inspecionar a mesma sessão do teste manual. Esse é um caso diferente de reproduzir um erro local em um perfil limpo.
Para ler páginas e executar ações web, use Tabbit Browser. Se você precisa do console e da rede, confirme que a integração fornece esses dados. Consulte Tabbit e Codex e como funciona o Tabbit.
Um relatório curto deve registrar a requisição que falhou, a mudança aplicada e a evidência de que o sintoma desapareceu.
Perguntas frequentes
O Codex consegue ler o console do Chrome?
Sim, se o cliente tiver acesso a uma ferramenta que exponha essas mensagens. Chrome DevTools MCP lista os registros da página selecionada e consulta um deles pelo ID.
Ele pode inspecionar uma requisição que falhou?
Chrome DevTools MCP pode listar as requisições da página e mostrar os detalhes por ID. Relacione URL, método e status à ação que provocou o erro.
Por que a página retorna 200 e a API retorna 404?
O documento HTML e as requisições feitas depois dele são transações HTTP diferentes. O carregamento da página não comprova que o script pediu o caminho certo.
Preciso usar meu perfil autenticado do Chrome?
Um Chrome isolado costuma bastar para um erro local reproduzível. Se for necessário autenticar, use um perfil de teste autorizado e exclua dados sensíveis do relatório.
Chrome DevTools MCP é o acesso CDP completo do aplicativo ChatGPT?
São conexões distintas. O MCP é um servidor configurado à parte. O navegador integrado do ChatGPT tem sua própria configuração de CDP e políticas da organização.
Como comprovo a correção?
Repita a ação original e confira a requisição, o console e o resultado visível. Neste exemplo, a rota corrigida retorna 200 e a página mostra Theme: light.