Chrome Devtools skill

O Claude navega no seu site como um visitante, tira print, lê os erros do console e mostra o que está deixando a página lenta.

por GitHubPublicada pela própria empresa

instalações: 15,3 mil
estrelas no GitHub: 40,4 mil
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

GitHub
chrome-devtools
O Claude navega no seu site como um visitante, tira print, lê os erros do console e mostra o que está deixando a página lenta.Oficial15,3 mil instalações, grátis

O que ela faz

Controla um Chrome de verdade pelo MCP do Chrome DevTools. Abre e fecha abas, navega, clica, preenche formulário, arrasta, aperta tecla, responde alerta e sobe arquivo. Pra achar os botões, lê primeiro a estrutura da página em texto e só depois clica, porque é dela que saem os identificadores que o clique usa.

Pra achar defeito, lê as mensagens do console, roda JavaScript dentro da página e lista as requisições de rede, apontando as que voltaram com erro 4xx ou 5xx. Também tira print da página ou de um elemento só.

Pra lentidão, grava um perfil de desempenho recarregando a página e analisa os problemas de LCP e de layout que pula. Simula internet e processador lentos, outra localização e tamanhos de tela diferentes, como o de um celular.

Nas palavras de quem fez

Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots,…

GitHub, no SKILL.md

Quando usar

Testar o formulário de contato ou o checkout da sua página
Descobrir por que uma página está em branco ou dando erro
Ver como o site fica numa tela de celular
Achar o que deixa a página de vendas lenta pra abrir
Tirar prints de várias páginas pra revisar

Depois de instalar, é só pedir assim

Abre meu site no Chrome, preenche o formulário de contato com dados de teste e me diz se chegou na página de obrigado
Grava o desempenho da página de vendas e me diz o que está atrasando o carregamento
Abre a página do checkout numa tela de celular com internet lenta e tira um print

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykAlerta

Perguntas

Como instalar a Chrome Devtools no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Chrome Devtools, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

O Google Chrome e o Node instalados e o servidor MCP do Chrome DevTools (chrome-devtools-mcp) configurado no Claude Code. A skill ensina o Claude a usar as ferramentas desse MCP; sem ele, não tem o que comandar. Não pede chave nem conta paga.

Roda no Codex e no Antigravity?

Roda onde o MCP do Chrome DevTools estiver configurado. A skill em si é texto, então o que muda de um programa pro outro é só onde se liga o MCP.

Levar essa skill

1x chrome-devtoolsR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/github/awesome-copilot

Aprenda a usar

O que é MCP e pra que serve no Claude Code
MCP é o que liga o Claude a uma ferramenta de fora, como WhatsApp, Google Ads e hospedagem. Veja o que é, como instalar e quando você não precisa dele.