Chrome DevTools MCP: permitindo que a inteligência artificial controle e detecte o navegador Chrome

O Chrome DevTools MCP é uma ferramenta de código aberto que atua como um servidor que permite que assistentes de programação de IA (como Gemini, Claude ou Copilot) controlem e inspecionem diretamente um navegador Google Chrome em execução. Essa ferramenta resolve um problema central dos assistentes de programação de IA: eles podem escrever código, mas não conseguem ver como o código é realmente executado no navegador, como se estivessem programando com os olhos vendados. Usando o protocolo MCP (Model-Context-Protocol), a ferramenta conecta os assistentes de IA às poderosas ferramentas de desenvolvedor do Chrome, permitindo que a IA realize operações automatizadas, depuração profunda e análise de desempenho. Isso significa que a IA pode não apenas gerar código, mas também testá-lo, inspecioná-lo e corrigi-lo em ambientes do mundo real, sugerindo alterações com base em dados reais do navegador, e não apenas em suposições. Os desenvolvedores podem fazer isso com um simplesnpxpara executá-lo e configurá-lo em um cliente de IA compatível.

Lista de funções

• Análise de desempenhoUse as Ferramentas do desenvolvedor do Chrome para registrar a trajetória de desempenho das páginas da Web e extrair insights acionáveis para aprimoramento.
• depuração de navegadorCapacidade de analisar solicitações da Web, ler informações do console do navegador, executar scripts JavaScript e fazer capturas de tela de páginas da Web.
• Automação confiávelBaseado na biblioteca Puppeteer para automatizar o controle do navegador Chrome, como a simulação de cliques do usuário, o preenchimento de formulários e a navegação na página, além da espera automática pela conclusão das ações.
• Simulação de equipamentosSuporte à simulação de diferentes condições de rede e desempenho da Unidade Central de Processamento (CPU) para facilitar o teste de desempenho da página da Web em diferentes ambientes.
• Suporte a vários clientesPode ser integrado a uma variedade de clientes assistentes de programação de IA, como Claude, Cursor, Copilot no VS Code e Gemini.

Usando a Ajuda

O Chrome DevTools MCP atua como um servidor MCP (Model-Context-Protocol) que fornece aos assistentes de programação de IA a capacidade de controlar o navegador Chrome. Abaixo está um processo detalhado para instalar e usar a ferramenta.

Requisitos ambientais

Antes de começar, verifique se o sistema atende às seguintes condições:

• Node.js 22 ou posterior.
• Chrome Stable ou mais recente.
• Gerenciador de pacotes npm.

Instalação e inicialização

A maneira mais fácil de instalar e executar é por meio donpxesse comando obtém o pacote mais recente e o executa. Você precisa adicionar a seguinte configuração ao cliente AI habilitado para MCP:

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

fazer uso dechrome-devtools-mcp@latestÉ possível garantir que seu cliente de IA esteja sempre usando a versão mais recente do serviço.

Configuração para diferentes clientes de IA

1. Código Claude
   Adicione o servidor MCP usando a ferramenta de linha de comando do Claude Code:

   claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
   

2. Copiloto / Código VS
   Siga o guia de instalação do MCP para adicionar a configuração padrão acima no VS Code. Você também pode usar a ferramenta de linha de comando do VS Code para instalá-lo:

   code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
   

3. Cursor
   • Instalação rápidaClique no botão "Install in Cursor" no software Cursor para instalá-lo.
   • instalação manual:
     1. Insira o valor do cursor Settings -> MCP.
     2. strike (no teclado) New MCP Server.
     3. Cole a configuração JSON padrão fornecida acima.
4. Gemini CLI ou Gemini Code Assist
   Siga o guia de configuração oficial do MCP e use a configuração JSON padrão fornecida acima.

Operação da função principal

Depois que o servidor estiver configurado, seu assistente de programação de IA poderá invocar uma série de ferramentas para operar o navegador. Essas ferramentas são comandos predefinidos, e a IA as seleciona e executa com base em suas instruções de linguagem natural.

• Navegação e operação da página
  Você pode dizer à IA para "abrir uma nova página e visitar um URL específico" e a IA chamará onew_pageresponder cantandonavigate_pageferramenta. Você também pode fazer com que ela "liste todas as guias abertas" (list_pages) ou "Fechar a página atual" (close_page).
• Entrada analógica do usuário
  Você pode instruir a IA a "clicar em um botão na página" (click) ou "Preencher uma caixa de entrada com texto" (fill). Essas operações dependem da implementação do Puppeteer para simular de forma confiável o comportamento real do usuário.
• Análise de desempenho
  Essa é uma função essencial. Você pode solicitar à IA que "analise o desempenho de carregamento da página atual" e a IA fará o seguinte, por sua vez:
  1. invocações performance_start_trace A ferramenta começa a registrar as trajetórias de desempenho.
  2. Atualiza a página ou executa a ação especificada.
  3. invocações performance_stop_trace Feche o registro.
  4. invocações performance_analyze_insight Analise os dados coletados e informe-o em linguagem natural sobre gargalos de desempenho e recomendações de otimização.
• ajustar os componentes durante o teste
  Se encontrar um erro de programa, você pode pedir à IA para "verificar se há mensagens de erro no console do navegador", e a IA usará o comandolist_console_messagespara obter registros. Você também pode fazer com que ele "execute um script para obter alguns dados" (evaluate_script) ou "Capture image of current page" (Capturar imagem da página atual) (take_screenshot) para análise.

Configuração avançada

Você pode encontrar mais informações sobre oargsAdicione argumentos de linha de comando à matriz para personalizar ainda mais o comportamento do servidor. Por exemplo, execute no modo headless (nenhuma interface de navegador é exibida) e em uma configuração temporária autônoma:

{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--headless=true",
"--isolated=true"
]
}
}
}

A seguir, alguns parâmetros de configuração comuns:

• --headlessExecute o Chrome no modo sem interface do usuário.
• --isolatedDados do usuário: cria um diretório temporário de dados do usuário sempre que é executado, que é automaticamente limpo quando o navegador é fechado.
• --channelEspecifique o canal da versão do Chrome a ser usado, comocanaryebetatalvezdev.
• --browserUrlConecte-se a uma instância do Chrome que já esteja em execução por meio de encaminhamento de porta.

Para ver todas as opções de configuração disponíveis, você pode executar em um terminal npx chrome-devtools-mcp@latest --help.

cenário do aplicativo

1. Análise automatizada do desempenho do front-end
   As inteligências de IA podem abrir automaticamente uma página da Web especificada, iniciar um rastreamento de desempenho, executar uma série de ações do usuário, interromper o rastreamento e analisar os resultados e, por fim, gerar relatórios de desempenho e recomendações de otimização em linguagem legível por humanos.
2. Depuração automatizada de aplicativos da Web
   Quando são detectadas anomalias na funcionalidade do site, os desenvolvedores podem instruir as inteligências de IA a reproduzir a operação e verificar o log de erros do console, visualizar falhas de solicitação de rede ou executar um código JavaScript específico para diagnosticar a causa raiz do problema.
3. Teste de regressão e validação da interface do usuário
   As inteligências de IA podem automatizar os testes de regressão da interface do usuário acessando automaticamente páginas da Web, preenchendo formulários e clicando em botões de acordo com um processo predefinido e verificando se a interface é consistente com as expectativas por meio da comparação de capturas de tela.
4. Captura e processamento de dados na Web
   Controlando programaticamente o navegador, as inteligências de IA podem navegar até a página de destino, extrair informações do DOM, processar os dados e retornar os resultados ao usuário para tarefas simples de rastreamento de dados.

QA

1. O que é MCP?
   MCP é a sigla de Model Context Protocol (Protocolo de contexto de modelo). Trata-se de um padrão aberto para conectar grandes modelos de linguagem (LLMs), como o Gemini ou o Claude, a ferramentas e serviços externos. O Chrome DevTools MCP é um servidor que implementa esse protocolo e atua como um "adaptador" entre a IA e as ferramentas de desenvolvimento do Chrome.
2. Essa ferramenta é segura? Do que eu preciso estar ciente?
   A ferramenta expõe o conteúdo da instância do navegador para o cliente de IA, permitindo que a IA inspecione, depure ou até mesmo modifique quaisquer dados no navegador. Portanto, você deve evitar abrir ou manipular páginas da Web que contenham informações confidenciais ou pessoais para evitar o vazamento de informações para o cliente de IA.
3. Por que a inicialização falha em alguns clientes?
   Alguns clientes de IA (como os que oferecem suporte ao Seatbelt do macOS ou aos contêineres do Linux) executarão o servidor MCP em um ambiente de área restrita. Como o Chrome precisa criar sua própria sandbox ao ser iniciado, isso pode levar a conflitos de permissão e falhas na inicialização. A solução alternativa é desativar as restrições de sandbox no Chrome DevTools MCP no cliente AI ou iniciar manualmente uma instância do Chrome externamente e usar o comando--browserUrlpara que o servidor se conecte a ele.