Chrome DevTools MCP

oficial

Servidor MCP oficial do Chrome DevTools para controlar e inspecionar um navegador Chrome ativo a partir de agentes de codificação como Gemini, Claude, Cursor e Copilot.

O que você pode fazer com Chrome DevTools MCP?

  • Rastreamento de desempenho — Peça ao seu assistente para gravar um rastreamento de desempenho de uma URL e apresentar insights acionáveis, por exemplo, "Verifique o desempenho de https://developers.chrome.com".
  • Análise de rede — Peça ao seu assistente para inspecionar solicitações de rede para depurar problemas de carregamento, recursos com falha ou problemas de chamadas de API.
  • Monitoramento de console — Solicite uma verificação das mensagens do console do navegador, incluindo stack traces com mapeamento de origem, para diagnosticar erros de JavaScript.
  • Captura de screenshot — Instrua seu assistente a tirar screenshots da página atual para verificação visual ou documentação.
  • Ações automatizadas do navegador — Direcione seu assistente para automatizar interações como cliques, navegação ou preenchimento de formulários usando Puppeteer, com espera automática pelos resultados.

Documentação

Chrome DevTools para agentes

npm chrome-devtools-mcp package

O Chrome DevTools para agentes (chrome-devtools-mcp) permite que seu agente de codificação (como Antigravity, Claude, Cursor ou Copilot) controle e inspecione um navegador Chrome ativo. Ele atua como um servidor Model-Context-Protocol (MCP), dando ao seu assistente de codificação com IA acesso a todo o poder do Chrome DevTools para automação confiável, depuração aprofundada e análise de desempenho. Uma CLI também é fornecida para uso sem MCP.

Referência de ferramentas | Changelog | Contribuindo | Solução de problemas | Princípios de design

Principais recursos

  • Obtenha insights de desempenho: Usa o Chrome DevTools para gravar rastreamentos e extrair insights de desempenho acionáveis.
  • Depuração avançada do navegador: Analise solicitações de rede, tire capturas de tela e verifique mensagens do console do navegador (com stack traces com mapeamento de origem).
  • Automação confiável. Usa puppeteer para automatizar ações no Chrome e aguardar automaticamente pelos resultados das ações.

Avisos

chrome-devtools-mcp expõe o conteúdo da instância do navegador aos clientes MCP, permitindo que eles inspecionem, depurem e modifiquem quaisquer dados no navegador ou no DevTools. Evite compartilhar informações sensíveis ou pessoais que você não queira compartilhar com clientes MCP.

chrome-devtools-mcp suporta oficialmente apenas o Google Chrome e o Chrome for Testing. Outros navegadores baseados em Chromium podem funcionar, mas isso não é garantido, e você pode encontrar comportamentos inesperados. Use por sua conta e risco. Estamos comprometidos em fornecer correções e suporte para a versão mais recente do Chrome Extended Stable.

As ferramentas de desempenho podem enviar URLs de rastreamento para a API do Google CrUX para buscar dados de experiência de usuários reais. Isso ajuda a fornecer uma visão holística do desempenho ao apresentar dados de campo juntamente com dados de laboratório. Esses dados são coletados pelo Chrome User Experience Report (CrUX). Para desativar isso, execute com a flag --no-performance-crux.

Estatísticas de uso

O Google coleta estatísticas de uso (como taxas de sucesso de invocação de ferramentas, latência e informações do ambiente) para melhorar a confiabilidade e o desempenho do Chrome DevTools MCP.

A coleta de dados está ativada por padrão. Você pode optar por não participar passando a flag --no-usage-statistics ao iniciar o servidor:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

O Google trata esses dados de acordo com a Política de Privacidade do Google.

A coleta de estatísticas de uso do Google para o Chrome DevTools MCP é independente das estatísticas de uso do navegador Chrome. Optar por não participar das métricas do Chrome não desativa automaticamente esta ferramenta, e vice-versa.

A coleta é desativada se as variáveis de ambiente CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS ou CI estiverem definidas.

Verificações de atualização

Por padrão, o servidor verifica periodicamente o registro npm em busca de atualizações e registra uma notificação quando uma versão mais recente está disponível. Você pode desativar essas verificações de atualização definindo a variável de ambiente CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS.

Requisitos

Primeiros passos

Adicione a seguinte configuração ao seu cliente MCP:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] Usar chrome-devtools-mcp@latest garante que seu cliente MCP sempre use a versão mais recente do servidor Chrome DevTools MCP.

Se você estiver interessado em fazer apenas tarefas básicas de navegador, use o modo --slim:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Consulte a Referência de ferramentas slim.

Configuração do cliente MCP

Para instruções de configuração específicas do seu editor ou agente (por exemplo, Antigravity, Claude Code, Cursor, VS Code), consulte nosso Guia de Configurações de Cliente.

Seu primeiro prompt

Digite o seguinte prompt no seu Cliente MCP para verificar se tudo está funcionando:

Check the performance of https://developers.chrome.com

Seu cliente MCP deve abrir o navegador e gravar um rastreamento de desempenho.

[!NOTE] O servidor MCP iniciará o navegador automaticamente assim que o cliente MCP usar uma ferramenta que exija uma instância de navegador em execução. Conectar-se ao servidor Chrome DevTools MCP por conta própria não iniciará o navegador automaticamente.

Ferramentas

Se você encontrar algum problema, consulte nosso guia de solução de problemas. Consulte a Referência de Ferramentas completa para obter uma lista completa de todos os recursos MCP suportados.

Configuração

Encontre a lista completa de parâmetros do servidor (por exemplo, --headless, --isolated, --slim) e como configurar conexões WebSocket no Guia de Configuração.

Uso Avançado

Para recursos avançados, como lidar com sessões simultâneas, diretórios de dados de usuário persistentes, conectar-se a uma instância do Chrome em execução em vez de iniciar uma nova, ou depurar no Android, consulte nosso Guia de Uso Avançado.

Integração como subagente de navegador

Se você está desenvolvendo ferramentas de agente e deseja fornecer um subagente de navegador integrado como parte do seu produto, recomendamos construir sobre o Chrome DevTools para agentes.

Para uma implementação de referência, consulte a documentação do agente de navegador do Gemini CLI.