Chrome DevTools MCP: como depurar páginas web com um agente de IA

Neste guia, você verá o que o servidor oferece, como conectá-lo ao VS Code e como limitar o teste a páginas sem dados sensíveis.

O que é o Chrome DevTools MCP

Chrome DevTools for agents é a iniciativa do Google para permitir que agentes interajam com o navegador e usem recursos do Chrome DevTools. O repositório oficial distribui o servidor MCP e também uma CLI.

A referência de ferramentas inclui ações de navegação e preenchimento de formulários, leitura do console e das requisições de rede, capturas de tela, auditorias Lighthouse e rastreamento de desempenho. Entre os nomes documentados estão list_console_messages, list_network_requests, lighthouse_audit e performance_start_trace.

Isso não transforma o servidor em um agente autônomo: o modelo continua sendo o responsável por decidir quais ferramentas chamar e interpretar o que elas devolvem. O DevTools fornece acesso estruturado ao navegador e aos dados de inspeção.

Pré-requisitos

A documentação do projeto recomenda Node.js LTS e uma instalação atual do Google Chrome. O metadado do pacote especifica suporte a Node.js ^20.19.0, ^22.12.0 ou >=23. O projeto dá suporte oficial ao Chrome estável e ao Chrome for Testing; outros navegadores baseados em Chromium podem funcionar, mas não são garantidos.

Para o VS Code com Copilot, o caminho recomendado pelo mantenedor é instalar o plugin do repositório. Abra a Paleta de Comandos, escolha Chat: Install Plugin From Source e informe:

ChromeDevTools/chrome-devtools-mcp

Esse plugin reúne o servidor MCP e as skills que orientam o agente. Depois da instalação, confira a lista de ferramentas do chat. O guia oficial de configurações por cliente também documenta alternativas para outros editores e agentes. No Codex CLI, por exemplo, o repositório recomenda:

$ codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Para entender primeiro a configuração geral de servidores no VS Code, consulte nosso guia de MCP no VS Code.

Faça uma inspeção sem alterar o projeto

Comece com uma página pública ou um ambiente de teste. A documentação oficial sugere pedir uma análise de desempenho em https://developers.chrome.com. Por exemplo:

Abra https://developers.chrome.com e faça uma auditoria Lighthouse de acessibilidade. Liste os achados e indique a evidência observada. Não faça login, não navegue para outros domínios e não altere arquivos.

Em uma aplicação própria, substitua o endereço pelo ambiente de staging. Você também pode pedir que o agente liste mensagens do console, examine requisições de rede ou grave um trace de desempenho. O trace pode incluir medidas como LCP, INP e CLS; ele é evidência daquela navegação, não uma garantia de que todos os cenários da aplicação foram cobertos.

A documentação do servidor define performance_start_trace para iniciar a gravação e performance_stop_trace para encerrá-la quando o modo automático não estiver habilitado. Leia as opções do comando antes de adaptar o fluxo: por padrão, a ferramenta pode recarregar a página durante a coleta.

Chrome DevTools MCP ou Playwright CLI?

Eles podem se complementar. O Playwright CLI permite ao agente conduzir o navegador por comandos de terminal e percorrer fluxos de usuário. O Chrome DevTools MCP expõe ferramentas estruturadas de inspeção e depuração, como console, rede, Lighthouse e traces de desempenho.

Para configurar servidores MCP em outros contextos, veja também o artigo sobre como configurar o MCP no VS Code. Depois de encontrar o problema, um fluxo de code review com IA no VS Code ajuda a revisar as mudanças antes de integrá-las.

Privacidade e segurança

O servidor pode interagir com páginas, preencher campos e inspecionar o conteúdo do navegador. O mantenedor alerta que o cliente MCP pode acessar os dados da instância do navegador; evite contas pessoais, abas privadas e informações confidenciais.

Por padrão, o projeto reutiliza um perfil próprio do Chrome entre execuções. Para sessões isoladas, consulte a opção --isolated. Se conectar o servidor a uma instância já aberta por meio de depuração remota, use um perfil separado: a documentação alerta que qualquer aplicativo local com acesso à porta de depuração pode controlar o navegador.

O envio de estatísticas de uso está ativado por padrão. Para desativá-lo, use --no-usage-statistics ou a variável CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS. Consulte também os avisos de segurança do repositório antes de conectar sessões autenticadas.