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 de especialistas que ensinam o 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 rastreamentos de desempenho, 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 e 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 no seu agente de programação (como Gemini, Claude, Cursor ou Copilot). Observação: embora o Chrome DevTools para agentes ofereça o conjunto completo de ferramentas, a CLI só oferece suporte a um subconjunto específico para automação baseada em shell.
IDEs e modelos compatíveis
O Chrome DevTools para agentes é compatível com qualquer ferramenta ou ambiente de desenvolvimento integrado (IDE) que tenha 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 pode acessar e interagir com as páginas, ele pode agir em seu nome se você o conectar a um navegador com uma sessão ativa e autenticada. Evite compartilhar informações pessoais ou sensíveis que você não quer compartilhar com os 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 usar imediatamente com o subagente do navegador. Tente usar um comando de barra, como:
/browser Navigate to the Google homepage
Para acessar habilidades especializadas do agente, 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.
Instalar usando a CLI
Para configurar o Chrome DevTools para agentes, use um arquivo de configuração JSON ou um comando da CLI para instalar o servidor diretamente se o agente for compatível. Alguns agentes também oferecem extensões ou plug-ins oficiais que incluem habilidades do agente, instruções de especialistas que ajudam o agente a usar os recursos do DevTools.
Se o seu agente não estiver listado aqui, saiba 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 associadas 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 Claude do Chrome DevTools 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 aceitam a chave de configuração mcpServers, adicione manualmente
essa entrada 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 MCP do Chrome DevTools.
Testar sua configuração
Insira o seguinte comando no seu agente para verificar se está tudo funcionando:
Check the performance of https://developers.chrome.com
O agente precisa abrir uma janela do navegador e gravar um rastreamento de performance.
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ê pode pedir explicitamente ao 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.
Próximas etapas
Para personalizar sua configuração, consulte Configuração.