chrome-devtools

Usa o Chrome DevTools via MCP para depuração eficiente, solução de problemas e automação de navegador. Use ao depurar páginas da web, automatizar interações com o navegador, analisar desempenho ou inspecionar requisições de rede. Esta skill não se aplica ao modo `--slim` (configuração MCP).

O que é chrome-devtools?

Esta skill permite que um agente de IA, como o Claude Code, Cursor ou Codex, se conecte ao Chrome DevTools através do protocolo MCP (Model Context Protocol). Com ela, é possível depurar aplicações web em tempo real, inspecionar elementos, analisar o desempenho de páginas e automatizar interações no navegador, como cliques e preenchimento de formulários. Ela é útil para desenvolvedores que precisam de depuração avançada sem sair do terminal ou do ambiente de desenvolvimento. A skill é compatível com ferramentas que suportam MCP e não deve ser usada no modo `--slim`, pois depende de configurações completas de MCP. Ela expõe recursos como captura de screenshots, avaliação de JavaScript no contexto da página e monitoramento de requisições de rede, acelerando a identificação de bugs e a otimização de desempenho.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp/tree/main/skills/chrome-devtools

Installed? Explore more Produtividade e Colaboração skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que chrome-devtools faz?

Usa o Chrome DevTools via MCP para depuração eficiente, solução de problemas e automação de navegador. Use ao depurar páginas da web, automatizar interações com o navegador, analisar desempenho ou inspecionar requisições de rede. Esta skill não se aplica ao modo --slim (configuração MCP).

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

chromedevtools/a11y-debugging

Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

chromedevtools/chrome-devtools-cli

Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.

chromedevtools/cookie-debugging

Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings.

chromedevtools/debug-optimize-lcp

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.

chromedevtools/memory-leak-debugging

Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools.

chromedevtools/troubleshooting

Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

Habilidades Relacionadas