--- title: "Deixe o chrome-devtools-mcp Controlar Navegadores Anti-Detecção na Nuvem" slug: chrome-devtools-mcp-with-bright-data date: 2026-10-05T07:33:05+00:00 modified: 2026-10-05T07:33:07+00:00 permalink: https://brightdata.com.br/blog/ai/chrome-devtools-mcp-with-bright-data type: blog --- [ Blog ](https://brightdata.com.br/blog "Blog") / [AI](https://brightdata.com.br/blog/ai) [AI](https://brightdata.com.br/blog/ai) # Deixe o chrome-devtools-mcp Controlar Navegadores Anti-Detecção na Nuvem Combine o chrome-devtools-mcp com a Browser API da Bright Data para permitir que agentes de IA controlem navegadores anti-detecção na nuvem perfeitamente. 13 min de leitura [ ![Antonello Zanini](https://media.brightdata.com.br/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Chrome Dev tools with Bright Data](https://media.brightdata.com.br/2026/09/Chrome-Dev-tools-with-Bright-Data.png) 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-mcp` e 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](https://developer.chrome.com/docs/devtools/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)](https://chromedevtools.github.io/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](https://github.com/ChromeDevTools/chrome-devtools-mcp). ## 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](/blog/proxy-101/what-is-a-headless-browser). 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](/products/scraping-browser) oferece. ### Browser API da Bright Data Como Solução A [Browser API da Bright Data](https://docs.brightdata.com/products/scraping-browser/introduction) 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](https://docs.brightdata.com/general/account/billing-and-pricing/free-tier), 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](/proxy-types/residential-proxies). 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](/blog/ai/what-is-an-ai-harness), como Claude Code, OpenAI Codex, OpenCode e outros. Siga as instruções abaixo! ### Pré-requisitos Antes de começar, certifique-se de ter: - [Gemini CLI instalado localmente](https://geminicli.com/docs/get-started/installation/). - Uma [conta Bright Data](/?hs_signup=1). Algum conhecimento básico de [como o MCP funciona](https://modelcontextprotocol.io/docs/2026-07-28/learn/architecture) e das ferramentas expostas pelo [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md) 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](/cp/start) para acessar o painel de controle. Em seguida, selecione a opção “Web Access > Web Access API” no menu à esquerda: ![Navegando até a página ](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479303225_image.png)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: ![Observe a API ](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789560488496_image.png)Caso contrário, clique no menu suspenso do botão “Create API” e selecione “Browser API”: ![Clicando na opção ](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789561904290_image.png)Isso abre o assistente de configuração da Browser API. Dê um nome à sua Browser API e [configure-a de acordo com suas necessidades](https://docs.brightdata.com/scraping-automation/scraping-browser/quickstart): ![Configurando uma Browser API](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479532077_image.png)Quando terminar, clique em “Add API” para criar uma Browser API. Em seguida, abra sua página de detalhes: ![Obtendo a URL CDP da Browser API](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789561700347_image.png)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: ```none wss://:@brd.superproxy.io:9222 ``` Para 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: ```none gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://:@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: ![A saída produzida pelo comando](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789562135737_image.png)Observe o seguinte: - `--scope project` configura o servidor MCP localmente, dentro do seu projeto. Remova essa opção se quiser configurar o servidor MCP globalmente. - `--wsEndpoint='wss://:@brd.superproxy.io:9222'` instrui o `chrome-devtools-mcp` a 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`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/e2e965aa2653c9e210193236031989c21a249b67/docs/configuration.md). 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`](https://geminicli.com/docs/reference/configuration/) na pasta do seu projeto contendo esta configuração: ```none { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest", "--wsEndpoint=wss://:@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](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md). Por exemplo, no Claude Code, execute: ```none claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://:@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: ```none gemini ``` Em seguida, execute o comando `/mcp` para visualizar os servidores MCP disponíveis: ![Observe as 29 ferramentas MCP chrome-devtools](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789550937784_image.png)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: ```none 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: ![Execução do prompt](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789552581424_11.gif)Em particular, o agente Gemini CLI tratou a tarefa da seguinte forma: 1. Chamou `navigate_page` para acessar o Booking.com. 2. Usou a ferramenta `list_pages` para identificar a página do navegador disponível. 3. Usou uma combinação das ferramentas `click` e `take_snapshot` para encontrar os elementos relevantes e selecionar as datas solicitadas. 4. Utilizou `evaluate_script` para realizar interações adicionais necessárias e chegar à página de resultados desejada. 5. Empregou `take_snapshot` novamente para inspecionar a estrutura da página de resultados. 6. Usou `evaluate_script` para extrair os dados necessários com um script JavaScript personalizado. 7. Retornou os dados extraídos em uma tabela. Abaixo está a saída produzida pelo agente: ![O resultado produzido pelo agente](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551511817_image.png)Observe como os dados obtidos correspondem de perto aos resultados exibidos diretamente no Booking.com: ![Os resultados produzidos pelo agente correspondem aos disponíveis no Booking.com](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551914832_image.png)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](/blog/ai/playwright-mcp-server), 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! Contate-nosTeste grátis![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) Índice [ ](https://news.ycombinator.com/submitlink?t=Deixe+o+chrome-devtools-mcp+Controlar+Navegadores+Anti-Detec%C3%A7%C3%A3o+na+Nuvem&u=https://brightdata.com.br/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Deixe+o+chrome-devtools-mcp+Controlar+Navegadores+Anti-Detec%C3%A7%C3%A3o+na+Nuvem&url=https://brightdata.com.br/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](http://www.reddit.com/submit?title=Deixe+o+chrome-devtools-mcp+Controlar+Navegadores+Anti-Detec%C3%A7%C3%A3o+na+Nuvem&url=https://brightdata.com.br/blog/ai/chrome-devtools-mcp-with-bright-data) ## Você também pode estar interessado em [ ![Auto parts and tire data](https://media.brightdata.com.br/2026/10/Auto-parts-and-tire-data.png) ](https://brightdata.com.br/blog/dados-do-site/auto-parts-and-tire-data "Dados de autopeças e pneus: preços, compatibilidade, correspondência de produtos e cobertura de mercado") [Dados do site ![Satyam Tripathi](https://media.brightdata.com.br/2024/09/Satyam-Tripathi-50x50.png) Satyam Tripathi Technical Writer ### Dados de autopeças e pneus: preços, compatibilidade, correspondência de produtos e cobertura de mercado Por que uma peça mostra preços diferentes entre varejistas, como corresponder listagens por número de peça, e como a Bright Data entrega dados de autopeças e pneus. 05-Oct-2026 21 min de leitura ](https://brightdata.com.br/blog/dados-do-site/auto-parts-and-tire-data) [ ![Audio Web Scraping for AI Processing](https://media.brightdata.com.br/2026/09/Audio-Web-Scraping-for-AI-Processing.png) ](https://brightdata.com.br/blog/dados-do-site/audio-web-scraping "Web Scraping de Áudio para Processamento com IA: Um Tutorial Completo") [Dados do site ![Antonello Zanini](https://media.brightdata.com.br/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Web Scraping de Áudio para Processamento com IA: Um Tutorial Completo Faça scraping de áudio em escala para processamento com IA com a Bright Data. Aprenda conversão de formato e transcrição com IA para resultados empresariais. 05-Oct-2026 18 min de leitura ](https://brightdata.com.br/blog/dados-do-site/audio-web-scraping) [ ![TrueFoundry Agent Harness with Bright Data MCP](https://media.brightdata.com.br/2026/08/TrueFoundry-Agent-Harness-with-Web-MCP.png) ](https://brightdata.com.br/blog/ai/trueforge-with-bright-data "Construindo Agentes de IA em Produção com TrueForge + Bright Data MCP") [AI ![Satyam Tripathi](https://media.brightdata.com.br/2024/09/Satyam-Tripathi-50x50.png) Satyam Tripathi Technical Writer ### Construindo Agentes de IA em Produção com TrueForge + Bright Data MCP O Bright Data MCP dá aos agentes do TrueForge a camada de retrieval que o harness não fornece, permitindo que subagentes leiam sites que bloqueiam acesso automatizado. 04-Oct-2026 82 min de leitura ](https://brightdata.com.br/blog/ai/trueforge-with-bright-data)