Tutorial de Chrome DevTools MCP: depure um erro real

Chrome DevTools MCP deixa o agente inspecionar página, console, rede e traces de desempenho. Siga um sintoma até a requisição ou o código que o causou. No exercício, o botão falha ao carregar registros. Reproduzimos o erro, mudamos um caminho e verificamos o resultado.

Escolha como conectar o navegador

Use uma instância isolada para um site novo ou de teste. A ferramenta aceita browserUrl ou wsEndpoint para navegador depurável e autoConnect para ambientes Chrome compatíveis. Uma sessão existente pode expor páginas autenticadas e armazenamento. Limite ao perfil e à origem autorizados. Usamos o executável explícito do Tabbit Browser Dev com perfil isolado. O resultado vale para esse ambiente testado.

Chrome for Developers

Registre o MCP e inicie o exercício

Use a configuração stdio local. Testamos chrome-devtools-mcp 1.12.0 com o executável indicado. Ajuste o caminho. Desativamos as estatísticas e as consultas CrUX. Baixe os dois arquivos para uma pasta, inicie Python e abra a URL local que o serviço imprimir.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@1.12.0",
        "--executablePath",
        "/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
        "--isolated",
        "--headless",
        "--viewport=1000x565",
        "--usageStatistics=false",
        "--performanceCrux=false"
      ]
    }
  }
}

fixture.py · fixture.html

python3 fixture.py --port 8765

Reproduza e reúna dois tipos de evidência

Abra a página, capture um snapshot e clique em Load records uma vez. Use pageId e uid atuais. A página exibiu Could not load records. list_console_messages retornou F02 load failed: HTTP 404. list_network_requests filtrado por fetch mostrou GET /api/record [404]. get_network_request confirmou a falha. Havia outro 404 de favicon, independente.

Chrome DevTools MCP · Tool reference

Altere um caminho e repita a ação

O servidor oferece /api/records, mas o script chama /api/record. Altere o caminho fetch em fixture.html e salve. Recarregue, capture outro snapshot e clique no mesmo botão. A requisição correta respondeu 200 e a página mostrou Loaded: F02-FIXED. O erro da aplicação não voltou. Guarde os dois resultados.

- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");

Use o trace para outra pergunta

Depois da verificação funcional, executamos performance_start_trace com reload e autoStop. A amostra local mostrou LCP 386 ms, TTFB 2 ms e CLS 0,00, sem limitação de CPU ou rede nem dados de campo. Uma recarga confirma a captura, mas não prova ganho de velocidade. Para investigar lentidão, repita com a mesma carga e ambiente.

O que acrescentam dois relatos

No r/ClaudeAI, uma pessoa separou um recurso ausente de outra exceção com rede e console. No r/mcp, outra relatou navegador MCP mais lento que o navegador habitual. São ambientes individuais. Guarde a requisição exata e o modo de navegador, e meça desempenho separadamente.

r/ClaudeAI r/mcp

Pode conectar a um navegador em execução?

Sim, se houver um endpoint de depuração autorizado e o ambiente suportar. Comece isolado, salvo se precisar da sessão existente.

• Browser automation tools

• Como testar a configuração de um agente de navegador

• Como conectar um agente de IA ao navegador aberto

• Guia do agent-browser CLI para snapshots, refs e sessões

• O Codex pode ler um painel em que você já entrou?

• Como configurar o navegador do OpenClaw e escolher o perfil

• Tutorial de Playwright MCP: configure, execute e verifique

Secholar.L

Crescimento e conteúdo na Tabbit

Secholar.L escreve guias práticos sobre navegadores com IA e fluxos de trabalho com agentes, comparando ferramentas com pesquisa real e fontes verificáveis.