Neste artigo, você aprenderá:
- O que o Chrome DevTools for Agents (
chrome-devtools-mcp) traz para a automação de navegador controlada por IA. - Quais são suas limitações e como a Browser API da Bright Data as resolve.
- Como conectar seu agente de IA preferido (ex.: Gemini CLI, Claude Code, etc.) ao
chrome-devtools-mcpe controlar um navegador remoto por meio da Browser API.
Vamos começar!
O Que É o Chrome DevTools for Agents?
chrome-devtools-mcp, também conhecido como “Chrome DevTools for agents,” é um servidor MCP de código aberto que dá aos agentes de codificação de IA controle sobre um navegador baseado em Chromium por meio do CDP (Chrome DevTools Protocol).
Em detalhes, ele permite que agentes de IA naveguem por páginas, interajam com elementos web, inspecionem solicitações de rede, executem JavaScript, capturem screenshots, depurem problemas do navegador e analisem desempenho. Por trás disso, ele expõe os recursos do Chrome DevTools como ferramentas MCP que agentes de codificação de IA podem usar para automatizar e inspecionar sessões de navegador.
O projeto está disponível no GitHub sob a licença Apache 2.0 e já conquistou mais de 52 mil estrelas no GitHub.
Limitações Atuais do chrome-devtools-mcp e Como Resolvê-las
chrome-devtools-mcp é uma ferramenta poderosa para controlar sessões de navegador, especialmente para depuração e análise de desempenho. Ao mesmo tempo, ainda está sujeito a alguns dos desafios comuns associados à automação de navegador:
- Bloqueios: Sites podem detectar sessões de navegador automatizadas e responder com CAPTCHAs, erros ou outras restrições, interrompendo seu fluxo de trabalho. Isso ocorre porque a tecnologia inicia uma sessão nova do Chrome em modo headless. Essas sessões têm histórico de navegador e contexto de usuário limitados, o que pode facilitar sua identificação como automatizadas pelos sites. Além disso, usuários comuns usam navegadores com a GUI ativada, não em modo headless.
- Consumo de recursos: Executar múltiplas abas ou instâncias de navegador localmente pode consumir recursos significativos do sistema. Uma única aba do Chrome pode usar centenas de megabytes de RAM, tornando a automação concorrente em grande escala exigente para a infraestrutura local.
Essas restrições afetam tanto a confiabilidade quanto a escalabilidade da automação de navegador, especialmente para cargas de trabalho empresariais. Uma configuração ideal seria permitir que o chrome-devtools-mcp controlasse navegadores em nuvem projetados para automação em grande escala e equipados com recursos anti-bot. É exatamente isso que a Browser API da Bright Data oferece.
Browser API da Bright Data Como Solução
A Browser API da Bright Data resolve as limitações do chrome-devtools-mcp ao mover a execução do navegador da sua máquina local para uma infraestrutura em nuvem totalmente gerenciada e construída para escala.
Em vez de executar e manter navegadores localmente, você pode conectar o Chrome DevTools for agents à Browser API por meio de um endpoint CDP. A Browser API fornece sessões de navegador em nuvem pré-configuradas com recursos como rotação de proxy, resolução de CAPTCHA e capacidades avançadas de fingerprinting.
Importante: A Browser API está disponível no nível gratuito da Bright Data, que inclui 5.000 créditos gratuitos por mês.
Por trás do serviço está a infraestrutura de proxy da Bright Data, com uma rede residencial de mais de 400 milhões de IPs. Isso oferece suporte a segmentação geográfica global e sessões de navegador simultâneas ilimitadas, com 99,99% de tempo de atividade e 99,95% de taxa de sucesso.
Como Integrar o Chrome DevTools for Agents com a Browser API da Bright Data
Neste capítulo, você verá como configurar o chrome-devtools-mcp no seu agente de IA. Você o configurará para se conectar a sessões de navegador em nuvem furtivas e infinitamente escaláveis por meio da Browser API da Bright Data.
Nota: Esta seção foca no Gemini CLI. Você pode adaptar os mesmos passos para outros frameworks de agentes de IA, como Claude Code, OpenAI Codex, OpenCode e outros.
Siga as instruções abaixo!
Pré-requisitos
Antes de começar, certifique-se de ter:
Algum conhecimento básico de como o MCP funciona e das ferramentas expostas pelo Chrome DevTools for agents será útil.
Passo #1: Configure uma Browser API da Bright Data
Primeiro, obtenha a URL de conexão remota baseada em CDP para a Browser API da Bright Data.
Se ainda não tiver, crie uma conta Bright Data. Se já tiver uma conta, faça login para acessar o painel de controle.
Em seguida, selecione a opção “Web Access > Web Access API” no menu à esquerda:
Se você já tiver uma entrada de Browser API na tabela My APIs (a entrada “browser_api”, como mostrado abaixo), acesse a página da API:
Caso contrário, clique no menu suspenso do botão “Create API” e selecione “Browser API”:
Isso abre o assistente de configuração da Browser API. Dê um nome à sua Browser API e configure-a de acordo com suas necessidades:
Quando terminar, clique em “Add API” para criar uma Browser API. Em seguida, abra sua página de detalhes:
Nesta página, você encontrará os detalhes de conexão para integrações baseadas em CDP em “Puppeteer / Playwright”. A URL CDP WebSocket da Browser API segue este formato:
wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222Para revelar a senha da Browser API, clique em “Show” ao lado da senha. Digite o código de autenticação multifator recebido por e-mail.
Agora você tem a URL de conexão CDP necessária para configurar o chrome-devtools-mcp para controle remoto de navegador. Excelente!
Passo #2: Configure a Browser API no Gemini CLI via chrome-devtools-mcp
Integre o chrome-devtools-mcp ao seu agente de IA, instruindo-o a controlar sessões de navegador anti-detecção remotas por meio da Browser API da Bright Data. No Gemini CLI, faça isso com o seguinte comando:
gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'Nota: Certifique-se de substituir os placeholders pela sua URL de conexão CDP real da Browser API no argumento wsEndpoint.
No terminal, você verá uma mensagem mencionando que o servidor MCP chrome-devtools foi adicionado:
Observe o seguinte:
--scope projectconfigura o servidor MCP localmente, dentro do seu projeto. Remova essa opção se quiser configurar o servidor MCP globalmente.--wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'instrui ochrome-devtools-mcpa se conectar ao endpoint da Browser API da Bright Data.
Nota: Usar o argumento wsEndpoint é importante aqui. A documentação do chrome-devtools-mcp menciona que wsEndpoint é uma alternativa ao browserUrl. No entanto, se você fornecer a URL CDP da Browser API através de browserUrl, a integração falhará com o seguinte erro: “Request cannot be constructed from a URL that includes credentials”.
O comando gera um arquivo .gemini/settings.json na pasta do seu projeto contendo esta configuração:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--wsEndpoint=wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222"
]
}
}
}Alternativamente, você pode criar esse arquivo manualmente.
Extra: Você também pode configurar o chrome-devtools-mcp no seu agente de IA preferido. Por exemplo, no Claude Code, execute:
claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'Incrível! Seu agente de IA agora deve ter acesso às ferramentas do Chrome DevTools for agents por meio do MCP, configurado para se conectar a sessões de navegador remotas fornecidas pela Browser API.
Passo #3: Verifique Se a Integração Funciona
Inicie o Gemini CLI (ou seu agente de IA favorito) na pasta do seu projeto:
geminiEm seguida, execute o comando /mcp para visualizar os servidores MCP disponíveis:
Você deve ver o servidor MCP chrome-devtools com suas 29 ferramentas disponíveis, incluindo:
| Ferramenta | Descrição |
|---|---|
navigate_page |
Navega para URLs, recarrega páginas ou avança e retrocede pelo histórico do navegador. |
click |
Clica em um elemento identificado por meio do snapshot da página, com suporte opcional para clique duplo. |
fill |
Insere texto em campos de entrada, áreas de texto ou seleciona opções em menus suspensos. |
fill_form |
Preenche múltiplos campos de formulário, checkboxes, radios e seleciona em uma única operação. |
press_key |
Pressiona teclas ou combinações do teclado para atalhos, navegação e interações indisponíveis por outras ferramentas de entrada. |
type_text |
Digita texto em um campo de entrada previamente focado usando simulação de teclado. |
hover |
Move o cursor sobre um elemento da página, útil para acionar menus ou interações baseadas em hover. |
wait_for |
Aguarda até que um texto especificado apareça na página antes de continuar com as ações subsequentes. |
list_pages |
Lista todas as páginas do navegador abertas no momento e seus identificadores para interações subsequentes. |
new_page |
Abre uma nova aba do navegador e navega para uma URL especificada. |
take_snapshot |
Captura a árvore de acessibilidade da página, expondo elementos e identificadores únicos para interações subsequentes. |
evaluate_script |
Executa JavaScript dentro da página e retorna resultados serializáveis em JSON a partir do contexto do navegador. |
list_network_requests |
Lista as solicitações de rede recentes feitas pela página, opcionalmente filtradas por tipo de recurso. |
get_network_request |
Inspeciona uma solicitação de rede específica, incluindo seus cabeçalhos, corpo da solicitação e dados de resposta. |
take_screenshot |
Captura uma screenshot da página atual, viewport, página inteira ou elemento específico. |
Fantástico! Isso confirma que o chrome-devtools-mcp está corretamente configurado e que suas ferramentas de automação de navegador estão disponíveis para o seu agente de IA.
O passo final é verificar se ele pode usar essas ferramentas para interagir com uma sessão de navegador remota por meio da Browser API da Bright Data.
Passo #4: Teste o Chrome DevTools for Agents + Browser API
Para verificar se o Chrome DevTools for agents consegue controlar a sessão configurada da Browser API, teste-o em um site complexo protegido por medidas anti-bot, como o Booking.com.
Experimente a integração com uma tarefa do mundo real como esta:
Abra a página do Booking.com em um navegador e pesquise hotéis em Barcelona para duas pessoas de 23 a 24 de setembro. Aplique o filtro de "4 estrelas" e ordene os resultados pelo menor preço. Extraia os primeiros 10 resultados com o nome do hotel, preço por noite, avaliação e número de avaliações.Execute o prompt, e aqui está o que você deve ver:
Em particular, o agente Gemini CLI tratou a tarefa da seguinte forma:
- Chamou
navigate_pagepara acessar o Booking.com. - Usou a ferramenta
list_pagespara identificar a página do navegador disponível. - Usou uma combinação das ferramentas
clicketake_snapshotpara encontrar os elementos relevantes e selecionar as datas solicitadas. - Utilizou
evaluate_scriptpara realizar interações adicionais necessárias e chegar à página de resultados desejada. - Empregou
take_snapshotnovamente para inspecionar a estrutura da página de resultados. - Usou
evaluate_scriptpara extrair os dados necessários com um script JavaScript personalizado. - Retornou os dados extraídos em uma tabela.
Abaixo está a saída produzida pelo agente:
Observe como os dados obtidos correspondem de perto aos resultados exibidos diretamente no Booking.com:
Este exemplo simples demonstrou que o Chrome DevTools for agents, conectado por meio do MCP ao Gemini CLI, pode interagir com o Booking.com através de uma sessão remota da Browser API.
O Booking.com é um caso de teste útil porque suas proteções anti-bot tornam a automação de navegador desafiadora. Nesta configuração, a Browser API gerencia a sessão do navegador e a infraestrutura necessária para acessar o site, enquanto o chrome-devtools-mcp fornece ao agente de IA as ferramentas necessárias para interagir com o navegador.
O resultado é um agente de IA capaz de realizar interações complexas de navegador sem exigir que você execute e gerencie o navegador localmente. Missão cumprida!
Outros Exemplos Possíveis
A combinação chrome-devtools-mcp + Browser API da Bright Data pode suportar muitos outros casos de uso de automação de navegador, depuração e extração de dados.
Aqui estão alguns prompts que você pode experimentar para diferentes cenários:
- Extrair dados de solicitações de rede após interação:
Abra um site, pesquise por "web scraping", inspecione as solicitações de rede geradas quando os resultados carregam, identifique a solicitação que retorna os resultados da pesquisa e extraia os primeiros 20 resultados de sua resposta. - Inspecionar respostas de API:
Abra uma página de produto, identifique a solicitação de rede que retorna seus dados de produto, inspecione a solicitação e a resposta, e extraia o nome do produto, preço, disponibilidade e avaliação. - Analisar desempenho da página:
Abra um site e analise seu desempenho. Relate o tempo de carregamento da página, o largest contentful paint, o cumulative layout shift e outras métricas de desempenho relevantes, e identifique possíveis gargalos. - Depurar erros de JavaScript:
Abra um site, inspecione o console em busca de erros e avisos de JavaScript, identifique os scripts ou páginas afetados e explique as causas mais prováveis com base nas informações de depuração disponíveis.
Por meio do chrome-devtools-mcp, seu agente não se limita a clicar em links e ler o conteúdo da página. Em vez disso, ele pode realizar inspeção de console, análise de desempenho, monitoramento de rede e muito mais. Comparado a soluções como o Playwright MCP, isso o torna mais adequado para casos de uso que exigem inspeção e depuração mais profundas do navegador.
Conclusão
Neste artigo, você aprendeu o que é o Chrome DevTools for agents e como ele oferece suporte à automação de navegador por meio do CDP. Especificamente, você viu como combiná-lo com a Browser API da Bright Data para permitir que seu agente de IA execute sessões de navegador em nuvem escaláveis com recursos anti-bot integrados.
O resultado é uma configuração de automação de navegador controlada por IA capaz de escalar para cargas de trabalho de nível empresarial. Com a mesma integração, você também pode construir fluxos de trabalho de navegador baseados em agentes, apoiados por infraestrutura de navegador em nuvem.
Cadastre-se para uma conta Bright Data e explore nossas soluções de scraping de dados web e automação de navegador prontas para IA!
