Chrome DevTools MCP: automação e depuração do navegador com IA

Para se aprofundar em agentes de IA e entender como ferramentas como o Chrome DevTools MCP se encaixam no panorama geral, explore o curso Introduction to AI Agents da DataCamp ou a trilha de habilidades AI Agent Fundamentals.

O Chrome DevTools MCP é um servidor oficial do Model Context Protocol, criado pelo time do Chrome DevTools, que permite que assistentes de codificação com IA controlem o Chrome usando linguagem natural. Em vez de escrever scripts, você diz ao seu assistente de IA o que quer ("acesse esta página e verifique erros no console" ou "preencha este formulário e faça uma captura de tela"), e ele cuida dos detalhes técnicos.

O servidor dá acesso a ferramentas poderosas de automação e depuração do navegador. Ele é construído sobre o Puppeteer, é confiável e roda inteiramente na sua máquina. Você não precisa escrever uma linha de código em Puppeteer.

Neste tutorial, você vai aprender a usar esse servidor MCP com assistentes de codificação por IA como Claude, Cursor e Cline. Vamos cobrir instalação e configuração e, em seguida, entrar nas capacidades essenciais: automação do navegador, depuração e inspeção. Ao longo do artigo, vamos usar o Conduit (demo.realworld.io), uma plataforma de blog no estilo do Medium, para demonstrar exemplos práticos.

Se você é novo em Model Context Protocol, recomendo conferir este guia completo de MCP, que aprofunda como o MCP conecta modelos de IA a ferramentas externas. Você também pode ver nosso tutorial do Claude para Chrome e nosso guia sobre os melhores navegadores com IA. Para uma abordagem diferente de automações de navegador com IA, leia nosso tutorial ChatGPT Atlas.

Resumo

• O Chrome DevTools MCP é um servidor MCP oficial que permite que assistentes de codificação com IA controlem o Chrome por meio de linguagem natural

• Ele expõe 26 ferramentas em 6 categorias: automação de entrada, navegação, depuração, rede, desempenho e emulação

• Instale com claude mcp add chrome-devtools npx chrome-devtools-mcp@latest para o Claude Code (outros clientes têm configuração semelhante)

• Automatize tarefas no navegador como navegação, preenchimento de formulários e captura de telas sem escrever scripts em Puppeteer

• Depure apps web inspecionando erros de console, requisições de rede e executando JavaScript — tudo via conversa

• Crie front-ends de forma iterativa deixando a IA tirar screenshots para verificar seu próprio trabalho a cada etapa

O que é o Chrome DevTools MCP?

Veja como a arquitetura funciona por baixo dos panos.

O servidor expõe 26 ferramentas organizadas em 6 categorias:

• Automação de entrada (7 ferramentas): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navegação (7 ferramentas): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Depuração (4 ferramentas): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Rede (2 ferramentas): list_network_requests, get_network_request
• Desempenho (3 ferramentas): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Emulação (3 ferramentas): emulate_cpu, emulate_network, resize_page

A automação de navegador vira uma conversa. Em vez de escrever scripts em Puppeteer e depurar seletores CSS, você descreve o que quer em linguagem natural. O assistente de IA resolve os detalhes técnicos.

Chrome DevTools MCP vs. abordagens tradicionais

Com essas ferramentas, seu assistente de IA pode ajudar você a:

• Criar front-ends de forma iterativa, deixando o agente tirar screenshots a cada etapa
• Testar fluxos de usuário ponta a ponta, como cadastro, navegação por recursos e verificação de cada etapa
• Depurar problemas checando erros de console e requisições de rede sem abrir o DevTools manualmente
• Automatizar documentação visual com capturas de tela de diferentes páginas ou estados do app
• Extrair dados de páginas web executando JavaScript diretamente no contexto da página

Tudo isso é acionado por comandos em linguagem natural, em vez de escrever scripts em Puppeteer.

O Chrome DevTools MCP funciona com Claude Desktop, Cursor, Cline e VSCode Copilot. Como ele é um servidor MCP entre muitos, você pode combiná-lo com outros — como acesso ao sistema de arquivos, ferramentas de banco de dados e APIs — para criar fluxos de trabalho que abrangem múltiplas ferramentas.

Instalação e configuração do Chrome DevTools MCP

Você vai precisar de algumas coisas:

• Node.js e npm instalados na sua máquina
• Um assistente de codificação por IA compatível com MCP (vamos usar o Claude Code neste tutorial)
• Navegador Chrome (o Puppeteer cuida disso automaticamente, então você não precisa configurar nada)

Ter noções básicas de DevTools do navegador ajuda, mas não é obrigatório.

Instalando o Chrome DevTools MCP

O Chrome DevTools MCP roda pela configuração MCP do seu assistente de IA. A configuração varia um pouco conforme o assistente que você usa. Vamos mostrar como instalar no Claude Code, mas outros editores como Cursor, Cline e VSCode Copilot seguem abordagens semelhantes.

No Claude Code, execute este comando no terminal:

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

Esse comando registra o servidor Chrome DevTools MCP no Claude Code. O servidor roda via npx, que baixa e executa o pacote sem exigir instalação permanente. O @latest garante que você obtenha a versão mais recente.

Depois de executar o comando, reinicie o Claude Code para carregar o novo servidor.

Se você usa outro assistente de codificação por IA

Outros clientes MCP têm métodos de instalação semelhantes — alguns usam comandos, outros usam arquivos de configuração, ou botões de instalação com um clique. Consulte a página do Chrome DevTools MCP no GitHub para instruções específicas para Cursor, Cline, Gemini CLI, Windsurf e outros clientes compatíveis.

Testando sua configuração

Vamos verificar se está tudo certo com um comando simples:

Navegue até demo.realworld.io e faça uma captura de tela

Você deve observar:

• O Chrome é aberto (a janela aparece, a menos que você tenha configurado o modo headless)
• A homepage do Conduit é carregada
• Seu assistente de IA captura e exibe uma captura de tela

Se algo der errado, verifique estes pontos comuns:

• Versão do Node.js: o Chrome DevTools MCP requer Node.js v20.19 ou superior
• Permissões do npm: garanta que o npm possa instalar pacotes
• Reinício necessário: seu assistente de IA precisa ser reiniciado após mudanças de configuração
• Local do arquivo de config: confirme que você editou o arquivo de configurações MCP correto para seu assistente

Noções básicas de automação de navegador

O Chrome DevTools MCP oferece seis ferramentas essenciais para interagir com páginas web. Use navigate_page para carregar URLs, click para interagir com elementos, fill e fill_form para inserir texto, hover para disparar efeitos de hover e take_screenshot para capturar o que está na tela. Essas ferramentas cobrem a maior parte das tarefas de automação de navegador que você vai encontrar.

Navegação e capturas de tela

Vamos carregar uma página. Diga ao seu assistente de IA:

Navegue até demo.realworld.io

A IA usa a ferramenta navigate_page, o Chrome abre e a homepage do Conduit carrega. Você verá a janela do navegador a menos que tenha configurado o modo headless.

Para documentar o que está vendo, basta pedir:

Faça uma captura de tela da homepage

A IA captura a página atual com take_screenshot e mostra o resultado. Isso é útil para documentação visual ou para verificar se a página está correta.

Interação com elementos

Você pode interagir com qualquer elemento da página sem escrever seletores CSS ou inspecionar IDs. Apenas descreva o que quer:

Clique no link Sign in

A IA entende qual elemento você mencionou e clica nele usando a ferramenta click. A página de login é carregada.

Você também pode passar o mouse sobre elementos:

Passe o mouse sobre o link Sign up

A IA usa a ferramenta hover. Se houver tooltip ou dropdown, ele aparece.

Preenchimento de formulários

Formulários costumam ser a parte mais trabalhosa da automação quando você escreve scripts. Com o Chrome DevTools MCP, você apenas descreve o que precisa ser preenchido.

Preencha um campo por vez:
Preencha o campo de e-mail com test@example.com
Preencha o campo de senha com testpass123
Ou preencha vários campos de uma vez:
Preencha o formulário de login com e-mail test@example.com e senha testpass123

A IA usa fill_form para lidar com todos os campos de uma vez. Veja como o formulário preenchido fica:

A IA identifica os campos corretos com base na sua descrição. Você não toca no HTML.

Depuração e inspeção

O Chrome DevTools MCP oferece três ferramentas essenciais para depuração: list_console_messages para ver a saída do console, list_network_requests para visualizar a atividade de rede e evaluate_script para executar JavaScript e extrair dados das páginas.

Ao usar essas ferramentas por meio do seu assistente de IA, você tem uma conversa. Você faz perguntas em linguagem natural e a IA as traduz em chamadas de ferramentas MCP nos bastidores.

Veja como isso funciona na prática:

O assistente de IA entende sua intenção, executa as ferramentas apropriadas do Chrome DevTools e apresenta os resultados em um formato legível. Vamos ver isso na prática.

Inspeção do console

Erros de console costumam ser o primeiro lugar a verificar quando algo quebra. Em vez de abrir o DevTools manualmente, apenas peça ao seu assistente de IA:

Navegue até demo.realworld.io e verifique se há erros no console

A IA carrega a página e checa o console usando list_console_messages. Eis o que ela encontra:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policy

Esses erros de CORS (Cross-Origin Resource Sharing — um recurso de segurança do navegador que restringe páginas de fazer requisições para domínios diferentes) explicam por que a página mostra "Loading articles…" e "Loading tags…" em vez de conteúdo real:

Você pode ir mais fundo pedindo para a IA filtrar e interpretar essas mensagens:

Há erros ou avisos nesta página?

A IA analisa a saída do console e informa: "Sim, há dois erros de CORS bloqueando as requisições de API para artigos e tags."

Isso dá visibilidade imediata do que está quebrando sem abrir manualmente o console do DevTools.

Visão geral das requisições de rede

Erros de console geralmente apontam para problemas de rede. Para entender o que está acontecendo com suas requisições, verifique a atividade de rede:

Mostre quais requisições de rede são feitas na homepage

A IA usa list_network_requests e retorna uma lista de todas as requisições. Você verá requisições bem-sucedidas (CSS, fontes, arquivos JavaScript) e as que falharam:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]

Faça perguntas de acompanhamento para ir mais a fundo:

Houve requisições com falha?

A IA filtra a lista e identifica o problema: "Sim, quatro requisições de API falharam. Duas retornaram redirecionamento 307 e duas falharam completamente com erros ERR_FAILED."

Isso ajuda a identificar problemas rapidamente sem inspecionar manualmente a aba Network.

Avaliação de JavaScript e extração de dados

Além de visualizar dados de console e rede, você pode executar código diretamente na página para checar seu estado ou extrair informações. Use evaluate_script para isso:

Verifique se há artigos exibidos na homepage

A IA executa JavaScript para contar os elementos de artigo:

const articles = document.querySelectorAll('.article-preview');
return articles.length;

Resultado: "Não há artigos exibidos. A página mostra 'Loading articles…', o que sugere que os erros de API estão impedindo o carregamento do conteúdo."

Também é possível extrair dados mais complexos:

Obtenha o título da página e o texto do cabeçalho principal

A IA avalia:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};

Resultado: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Isso permite validar conteúdo da página, extrair dados estruturados ou checar se elementos dinâmicos foram carregados corretamente. As ferramentas take_screenshot e take_snapshot complementam isso capturando documentação visual e estrutural quando necessário.

Essas três capacidades de depuração funcionam de forma natural em conjunto. Comece pelas mensagens do console para identificar erros, verifique as requisições de rede para entender o que falhou e, depois, use a avaliação de JavaScript para confirmar como essas falhas afetam a página — tudo conversando com seu assistente de IA, sem alternar entre ferramentas nem escrever scripts de inspeção.

Construindo front-ends de sites com o Chrome DevTools MCP

Assistentes de IA conseguem construir interfaces web, mas não conseguem ver o que criam. Você acaba tirando screenshots manualmente e pedindo ajustes.

O Chrome DevTools MCP muda isso. A IA tira suas próprias capturas de tela, confere os layouts e itera até ficar tudo certo.

Vamos criar um clone do ChatGPT usando Streamlit. Você vai precisar de uma chave da API da OpenAI. Forneça-a ao seu assistente de IA ao executar o prompt para que ele possa verificar se o app está funcionando corretamente. Aqui está o prompt:

Construa um clone do ChatGPT usando Streamlit. Crie uma interface de chat
limpa com histórico de mensagens, entrada de texto e integração com a API da OpenAI. Inclua
uma barra lateral para gestão da chave de API e recursos de gestão do chat (Clear
Chat, New Chat, contador de mensagens). Use o Chrome DevTools MCP para verificar
a interface a cada etapa.

A IA cria o app com uma barra lateral e tira uma captura de tela para conferir o layout inicial:

A barra lateral inclui o campo da chave de API, os botões Clear Chat e New Chat e um contador de mensagens em 0. Com a interface pronta, vamos ver se o chat funciona.

Testando com uma pergunta simples:

O chat responde corretamente, e o contador mostra duas mensagens (na próxima captura). Mas será que ele lida com conversas de múltiplas interações?

Testando o contexto da conversa:

A IA lembra a troca anterior. Em seguida, precisamos verificar o recurso Clear Chat.

Clicando no botão Clear Chat:

O chat é limpo com sucesso e o contador volta para 0.

Iniciando um novo chat:

Perfeito. A IA construiu um clone funcional do ChatGPT, validou a aparência em cada etapa e testou todos os recursos sem intervenção humana.

Isso funciona com qualquer framework: React, Vue, Svelte, HTML puro. A IA verifica layouts, testa interações e encontra bugs antes mesmo de você ver o código.

Conclusão e próximos passos

O Chrome DevTools MCP oferece automação de navegador por meio de conversa. Você descreve o que quer e seu assistente de IA cuida dos detalhes técnicos. Sem scripts para escrever, sem seletores para depurar.

Ao longo deste artigo, cobrimos o básico: instalar o servidor, navegar por páginas, preencher formulários, clicar em elementos e tirar capturas de tela. Depois entramos na depuração com inspeção do console, monitoramento de rede e avaliação de JavaScript. Por fim, vimos como essas ferramentas trabalham juntas para criar front-ends em que a IA consegue ver o que ela mesma cria.

O que tentar a seguir

Comece navegando até um site em que você está trabalhando e peça para a IA verificar erros no console ou inspecionar as requisições de rede. Se você usa Claude Code, nosso guia de boas práticas do Claude Code cobre padrões eficazes de prompting para uso de ferramentas. Tire screenshots de diferentes estados. Teste envios de formulários.

Depois combine várias ferramentas: navegue até uma página, preencha um formulário, envie e capture o resultado. Verifique mensagens do console, liste requisições de rede com falha e execute JavaScript para validar o estado da página.

Quando estiver confortável com o básico, crie um pequeno componente de UI com sua IA e deixe que ela valide o layout em cada etapa. Veja como ela identifica problemas visuais antes mesmo de você checar manualmente.

Para desempenho, use as ferramentas de performance (performance_start_trace, performance_stop_trace, performance_analyze_insight) para analisar tempos de carregamento e identificar gargalos. Use as ferramentas de emulação (emulate_cpu, emulate_network, resize_page) para testar em diferentes condições.

O Chrome DevTools MCP é um servidor entre vários. Combine-o com servidores de sistema de arquivos, ferramentas de banco de dados ou integrações com APIs para criar fluxos de trabalho que abrangem múltiplos sistemas. Para mais exemplos de MCP, veja nosso tutorial do Codex CLI MCP e o tutorial do Google ADK MCP.

Se quiser criar seus próprios servidores MCP, confira Building an MCP Server and Client with FastMCP 2.0.