Chrome DevTools MCP: investigue páginas, CSS, rede e desempenho com evidência

ANÁLISE EDITORIAL

Uma página pode parecer correta e ainda falhar quando recebe dados reais: uma requisição demora, uma regra CSS vence outra ou um botão muda depois do carregamento. A Skill oficial chrome-devtools orienta um agente a examinar o Chrome por meio do servidor Chrome DevTools MCP, escolhendo a aba certa, lendo o estado atual e só então interagindo. Ela não substitui o navegador nem prova que um site foi testado. É um roteiro para investigar com evidência, sem confundir uma descrição textual com uma captura ou uma medição.

O que esta Skill faz de verdade

O SKILL.md do mantenedor reúne padrões de uso do Chrome DevTools MCP. Antes de clicar, ele pede para localizar a página com list_pages, navegar com navigate_page ou new_page, esperar o elemento relevante com wait_for e obter uma estrutura atualizada com take_snapshot. Os identificadores uid dessa estrutura guiam click e fill. Se a página mudou, o identificador pode ter expirado; nesse caso, a resposta correta é tirar outro snapshot.

O roteiro também distingue observação visual de diagnóstico técnico. take_screenshot registra uma imagem quando a aparência importa. get_css_styles ajuda a entender regras e variáveis CSS aplicadas. evaluate_script serve para dados de DOM ou JavaScript que não aparecem nessas saídas. O README oficial do servidor descreve ainda inspeção de rede e análise de desempenho. Isso diferencia a Skill de um guia genérico de cliques: o objetivo principal aqui é depurar uma sessão real do Chrome, inclusive comportamento que a imagem da página sozinha não explica.

O repositório ChromeDevTools/chrome-devtools-mcp registrava 53.522 estrelas na consulta de 14 de outubro de 2026. Esse número é um retrato do repositório, não uma avaliação de segurança ou garantia de que uma automação funcionará no seu site. A cópia documental desta página está fixada no commit 81afe179eba101db60770c2ea3ab9fcfa3c08333.

Para quem serve

É útil para quem desenvolve interfaces web e precisa descobrir por que um componente não aparece, por que a interação usa o elemento errado ou por que a rede e o carregamento não correspondem ao que a tela sugere. Também ajuda equipes de suporte técnico a reproduzir um defeito em uma página de teste e guardar evidências específicas antes de abrir um chamado. O leitor deve ter autorização para examinar a página e compreender que uma ferramenta conectada ao navegador pode ver dados da sessão aberta.

Há uma diferença importante em relação a uma Skill de automação reutilizável com Playwright: aqui o agente recebe instruções para operar o servidor MCP do Chrome DevTools, especialmente para inspeção de CSS, rede e desempenho durante a investigação. Não é um framework de testes com asserções, nem uma promessa de teste de regressão. Uma captura ou snapshot isolado mostra apenas aquele momento; uma conclusão sobre causa exige reproduzir o problema, comparar estados e conferir a requisição ou regra envolvida.

Compatibilidade e pré-requisitos

O guia de instalação oficial pede Node.js em versão LTS, npm e Google Chrome estável ou Chrome for Testing. O projeto declara suporte oficial a essas duas opções de navegador; a compatibilidade com outros navegadores baseados em Chromium não deve ser presumida. Você também precisa de um cliente MCP que aceite configurar o servidor e de permissão para executar npx no computador onde a sessão acontecerá.

A Skill é um documento de instruções para o agente. O ZIP do Bastidores não instala o servidor MCP nem o Chrome. Confira a convenção de Skills do seu cliente para posicionar o arquivo SKILL.md e reinicie a sessão se o cliente só descobre novas Skills na inicialização. O próprio arquivo avisa que não se aplica ao modo --slim do servidor, que expõe um conjunto reduzido de ferramentas. Se o seu cliente não oferece as ferramentas citadas, não adapte a instrução por adivinhação.

Instalação recomendada

Primeiro, configure o servidor oficial no cliente MCP. O exemplo do README usa o comando npx com os argumentos -y e chrome-devtools-mcp@latest. Em uma configuração JSON de cliente que usa a chave mcpServers, o registro fica assim:

{"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest"]}}}

Esse exemplo acompanha a documentação do mantenedor, mas o local do arquivo de configuração depende do cliente. Em ambientes controlados, revise a versão que será instalada antes de executar @latest, pois ela pode mudar após esta curadoria. O release v1.10.1 do servidor, publicado em 23 de setembro de 2026, é uma referência de release, não a versão declarada no frontmatter da Skill. Para reproduzir exatamente esta cópia documental, use o commit informado nesta página.

Depois, extraia o ZIP local e leia ORIGEM.md, LICENSE e SKILL.md. Instale o SKILL.md no diretório de Skills aceito pelo seu agente, sem colocar credenciais ou perfis do navegador no pacote. Mantenha o servidor MCP e a Skill como componentes distintos: um executa ferramentas, o outro orienta quando e como usá-las.

Configuração antes do primeiro uso

Use um perfil do Chrome dedicado à investigação, sem contas pessoais ou sessões de produção abertas, porque o MCP expõe ao cliente o conteúdo do navegador controlado. O aviso de segurança do mantenedor é explícito sobre esse acesso. A Skill informa que o Chrome inicia automaticamente na primeira chamada de ferramenta que precisa dele e que o perfil pode persistir entre usos. Fechar uma aba não apaga necessariamente o estado desse perfil.

O servidor informa coleta de estatísticas de uso. Se sua política exigir desativá-la, acrescente --no-usage-statistics aos argumentos, conforme o README. O recurso de análise de desempenho pode consultar dados de campo do CrUX; --no-performance-crux desativa essa consulta. Essas escolhas devem ser feitas antes de abrir páginas sensíveis. Para extensões, a Skill menciona --categoryExtensions; para ferramentas de memória, --memoryDebugging. Não habilite categorias extras só porque aparecem no documento, pois ampliam as capacidades expostas ao agente.

Primeiro uso seguro e resultado esperado

Comece por uma página de teste que você controla. Peça ao agente para listar as páginas, selecionar o pageId correto, navegar até a URL de teste, esperar um texto conhecido e obter um snapshot. Antes de qualquer clique, confira se o título, endereço e elemento visível correspondem ao alvo. Se o snapshot mostrar outro estado, atualize-o. Para uma alteração visual, use uma captura como evidência de aparência e get_css_styles para inspecionar a regra aplicada, sem afirmar que a causa foi encontrada apenas pela imagem.

Em seguida, reproduza um problema concreto, como um botão que só aparece após uma resposta de rede. Registre o estado antes e depois, observe a requisição relevante e anote o que a ferramenta efetivamente retornou. O resultado esperado é uma hipótese verificável: qual página, elemento, regra ou requisição foi observado, com os dados que sustentam a análise e os limites do teste. Esta curadoria não executou uma sessão do seu projeto e não publica benchmarks de latência, qualidade ou confiabilidade.

Permissões e riscos

O maior risco não está no texto do SKILL.md, mas nas permissões dadas ao cliente MCP. Um agente com acesso ao navegador pode ler conteúdo de abas, clicar, preencher formulários e executar JavaScript no contexto da página. Não conecte essa configuração a contas financeiras, áreas administrativas de produção ou dados pessoais sem autorização e controles adequados. Prefira ambiente de teste, acesso mínimo, revisão humana antes de ações de escrita e registro das evidências necessárias, sem armazenar tokens em capturas ou logs compartilhados.

Também não confunda uma instrução escrita na página visitada com orientação confiável para o agente. O conteúdo de sites é dado de entrada, não uma nova autorização. Se a automação pedir login, upload, exclusão, pagamento ou publicação, interrompa e confirme escopo, alvo e consequência. Um snapshot desatualizado pode apontar para o elemento errado após uma atualização dinâmica. A regra prática da Skill original é obter outro snapshot quando o elemento não for encontrado ou a página tiver mudado.

Erros comuns e como investigar

O Chrome não inicia. Confira se Node.js LTS, npm e uma instalação compatível do Chrome estão disponíveis no mesmo ambiente do cliente MCP. Verifique o comando de configuração e consulte o guia oficial de solução de problemas. Não conclua que a Skill está quebrada sem separar erro do servidor, navegador e cliente.

A ferramenta atua na aba errada. Rode list_pages e passe o pageId da página desejada. O clique falha após a navegação. Espere o conteúdo, tire novo snapshot e use o uid atual. Faltam ferramentas de extensão. Elas exigem --categoryExtensions e reinício do servidor; não estão disponíveis automaticamente. A Skill não funciona em modo compacto. Revise se --slim foi ativado, porque o próprio SKILL.md exclui esse modo.

A conclusão de desempenho parece ampla demais. Separe o que foi medido naquela sessão do que veio de dados de campo do CrUX. Um problema reproduzido no seu dispositivo não representa todos os usuários. Se for necessário investigar pelo navegador convencional, o mantenedor recomenda a interface do Chrome DevTools como alternativa às ferramentas MCP.

Versão, licença e download local

O pacote próprio do Bastidores contém exatamente SKILL.md, LICENSE e ORIGEM.md, sem servidor, executáveis, scripts, dependências, extensões, dados ou credenciais. O commit da Skill é 81afe179eba101db60770c2ea3ab9fcfa3c08333. O repositório publica a licença Apache-2.0, cujo texto acompanha a cópia. A redistribuição documental preserva esse aviso.

Antes de extrair, compare o SHA-256 do ZIP local: fe283e990d2e05fc1c7654af066ee8b8ba46b218d933ddd96364e7844f1b928f. O SHA-256 do SKILL.md é 69a65d0276dd2b6a2fff9889d45be154754b7eb589ca019346cdc9319e6439bb. O card de download desta página aponta para a cópia hospedada pelo Bastidores; o botão de repositório oficial é uma ação separada, para conferir atualizações e documentação diretamente com o mantenedor. Não substitua uma verificação de origem por um número de estrelas.

Fontes primárias

A curadoria consultou o SKILL.md fixado no commit, o README oficial, a documentação de troubleshooting, o arquivo de licença e a API do repositório em 14 de outubro de 2026. Nenhuma captura de produto foi apresentada como prova de teste nesta página.