O Chrome DevTools para agentes é um conjunto de ferramentas que traz o poder do Chrome DevTools para seus fluxos de trabalho de programação de IA. Ao instalar o Chrome DevTools para agentes, você tem acesso a:
- Servidor MCP: conecta seu agente de IA a uma instância de navegador ativa usando o Protocolo de contexto de modelo de código aberto.
- CLI do Chrome DevTools: uma interface para interagir com o navegador diretamente do terminal.
- Habilidades de agente: instruções especializadas que ensinam seu agente a coordenar várias ferramentas para tarefas complexas, como acessibilidade ou depuração de desempenho.
No contexto do desenvolvimento da Web, o Chrome DevTools para agentes integra recursos de depuração ao seu agente de IA.
Por exemplo, um agente pode usar as ferramentas para gravar e avaliar rastros de desempenho para analisar o desempenho de um site e identificar possíveis melhorias. Além do desenvolvimento da Web, o DevTools para agentes também permite que seu agente navegue na Web em tempo real, em vez de apenas recuperar HTML estático.
Configuração
Este guia mostra como configurar o Chrome DevTools para agentes para ajudar seu agente de programação a controlar e inspecionar um navegador Chrome ativo.
Use o pacote chrome-devtools-mcp para controlar e inspecionar um navegador Chrome ativo do seu agente de programação (como Gemini, Claude, Cursor ou Copilot). Observação: embora o Chrome DevTools para agentes forneça o conjunto completo de ferramentas, a CLI só oferece suporte a um subconjunto direcionado para automação baseada em shell.
IDEs e modelos compatíveis
O Chrome DevTools para agentes oferece suporte a qualquer ferramenta ou IDE que ofereça suporte ao protocolo MCP. Isso inclui Antigravity, CLI do Gemini, Claude Code, Cursor, Copilot e muito mais.
Considerações sobre segurança
Como o agente poderá visualizar e interagir com as páginas acessadas, ele poderá agir em seu nome se você o conectar a um navegador com uma sessão ativa e autenticada. Evite compartilhar informações sensíveis ou pessoais que você não quer compartilhar com agentes.
Pré-requisitos
Antes de instalar o Chrome DevTools para agentes, verifique se o ambiente atende aos seguintes requisitos:
Para configurar o Chrome DevTools para agentes, escolha o método que corresponde ao seu ambiente de programação preferido. Alguns agentes exigem instalação manual, enquanto outros vêm com as ferramentas pré-integradas.
Antigravity
O Chrome DevTools para agentes vem pré-empacotado com o Antigravity 2.0. Você pode começar a usá-lo imediatamente com o subagente do navegador. Tente usar um comando de barra, como:
/browser Navigate to the Google homepage
Para acessar habilidades de agente especializadas, recomendamos instalar o plug-in do DevTools durante a etapa Criar com o Google da configuração inicial ou nas configurações do aplicativo. Para mais informações, consulte a documentação do subagente do navegador Antigravity Browser Subagent.
Instalar usando a CLI
Para configurar o Chrome DevTools para agentes, você pode usar um arquivo de configuração JSON ou um comando da CLI para instalar o servidor diretamente se o agente oferecer suporte a ele. Alguns agentes também oferecem extensões ou plug-ins oficiais que incluem habilidades de agente, instruções especializadas que ajudam o agente a usar os recursos do DevTools.
Se o agente não estiver listado aqui, você poderá encontrar como instalá-lo no repositório do GitHub do Chrome DevTools para agentes.
Para adicionar o Chrome DevTools para agentes a um agente de linha de comando, use os comandos da CLI integrados para seu agente específico:
CLI do Gemini
Instale a extensão da CLI do Gemini que inclui o pacote MCP e as habilidades que o acompanham usando o seguinte comando:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Instale apenas o pacote MCP com o seguinte comando:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Para instalar o Chrome DevTools para agentes como um plug-in do Claude Code, use os seguintes comandos de barra no Claude Code. Adicione o registro do Marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
E instale o plug-in no registro do Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Consulte a página oficial do plug-in do Chrome DevTools Claude para mais informações.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Instalar usando a configuração JSON
Para outros agentes que oferecem suporte à chave de configuração mcpServers, adicione
essa entrada manualmente e instale o DevTools para agentes usando npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Instalar em outros agentes
Para configurar um agente que não está listado, consulte o repositório do GitHub do Chrome DevTools MCP.
Testar sua configuração
Insira o seguinte prompt no agente para verificar se tudo está funcionando:
Check the performance of https://developers.chrome.com
O agente vai abrir uma janela do navegador e gravar um rastro de desempenho.
Resolver problemas de configuração
Se o agente não conseguir executar ferramentas e tiver acesso às habilidades do Chrome DevTools, ele poderá tentar corrigir o problema automaticamente. Se isso não acontecer, você poderá solicitar explicitamente o agente:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Ou você pode ser mais específico:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Configuração avançada
Estas são outras maneiras de o agente acessar o navegador.
Configurar o modo headless
Se você quiser realizar tarefas em segundo plano sem uma janela de navegador visível, execute o Chrome no modo headless (sem interface). Adicione a flag --headless aos argumentos do servidor:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Conectar-se a uma sessão de navegador existente
Por padrão, o DevTools para agentes inicia uma nova instância do Chrome. No entanto, é possível conectar o agente a uma sessão de navegador existente usando a flag --autoConnect. Isso é particularmente útil se o agente precisar investigar um problema que está bloqueado por um login ou uma sessão que você já iniciou.
Há duas maneiras de se conectar a uma sessão existente:
Usar a conexão automática (Chrome 144 ou mais recente)
Quando o servidor MCP do Chrome DevTools é configurado com a opção --autoConnect, o servidor MCP se conecta a uma instância ativa do Chrome e solicita uma sessão de depuração remota.
- No navegador Chrome em execução, acesse
chrome://inspect/#remote-debuggingpara ativar a depuração remota. Atualize a configuração do MCP para incluir a flag
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Emita um prompt para o agente. O Chrome vai mostrar uma caixa de diálogo pedindo permissão do usuário para permitir a sessão de depuração remota. Clique em Permitir.
Conectar manualmente usando a porta de depuração remota
Se você não puder usar --autoConnect (por exemplo, se executar o agente em um ambiente de sandbox), poderá iniciar o Chrome manualmente com uma porta de depuração.
Confira um exemplo (no macOS):
Inicie o navegador Chrome com a porta de depuração remota ativada. Por motivos de segurança, você também precisa especificar um diretório de dados do usuário personalizado.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableConfigure o agente para se conectar usando o parâmetro
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }