chromedevtools/chrome-devtools

Utiliza Chrome DevTools a través de MCP para depuración eficiente, solución de problemas y automatización del navegador. Úsalo al depurar páginas web, automatizar interacciones del navegador, analizar el rendimiento o inspeccionar solicitudes de red. Esta habilidad no aplica en modo `--slim` (configuración MCP).

¿Qué es chrome-devtools?

Esta habilidad habilita el uso de Chrome DevTools directamente desde agentes de IA o herramientas de línea de comandos a través del protocolo Model Context Protocol (MCP). Está diseñada para desarrolladores que necesitan depurar aplicaciones web, automatizar acciones del navegador (como hacer clic en botones o rellenar formularios), analizar el rendimiento de páginas y monitorear solicitudes de red en tiempo real. Es compatible con plataformas que implementen MCP, como Claude Code, Cursor y otros asistentes de IA similares. La habilidad se comunica con una instancia de Chrome remota, exponiendo funciones como inspección de elementos, manipulación del DOM, captura de métricas de rendimiento y registro de tráfico de red, todo sin necesidad de abrir la interfaz gráfica de DevTools. Es especialmente útil para debugging automatizado, pruebas de integración y análisis de aplicaciones web complejas.

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

Installed? Explore more Productividad y colaboración skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace chrome-devtools?

Utiliza Chrome DevTools a través de MCP para depuración eficiente, solución de problemas y automatización del navegador. Úsalo al depurar páginas web, automatizar interacciones del navegador, analizar el rendimiento o inspeccionar solicitudes de red. Esta habilidad no aplica en modo --slim (configuración 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.

Skills relacionados