MCP Chrome DevTools — el MCP de browser más adoptado (2,685 installs)

Qué es#

Chrome DevTools Protocol (CDP) es la API de bajo nivel que Chrome expone para que herramientas externas controlen el browser. DevTools del browser, Lighthouse, Puppeteer, Playwright — todos lo usan por debajo.

Este MCP da acceso directo a CDP desde Claude Code. Capacidades que desbloqueás:

• Browser automation — abrir páginas, click, type, screenshots
• Debugging — pausar JS, inspeccionar variables, network requests
• Performance analysis — traces, métricas Web Vitals
• Network introspection — ver todas las requests, response bodies, timings
• Source-mapped errors — leer stack traces de bundles minificados

2,685 installs lo hacen el MCP de browser más adoptado del catálogo. También está incluido en el marketplace oficial de Anthropic. Es el estándar.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --mcp devtools/chrome-devtools

Pre-requisito: Chrome o Chromium instalado.

Para Claude:

Instalá el MCP devtools/chrome-devtools. Después abrí localhost:3000,
hacé un performance trace de 5 segundos mientras interactúo con la
página, y mostrame los Web Vitals (LCP, FID, CLS).

Qué podés hacer con esto#

Debugging asistido en tiempo real#

"En mi app, cuando hago click en el botón Comprar, salta un error 500. Andá a la página, hacé click, capturá el network request que falló, leé el response y proponé qué falla en el endpoint".

Performance profiling#

"Hacé un Lighthouse run de localhost:3000 y dame los 3 mayores opportunities ordenados por impacto en LCP". CDP tiene acceso directo a la API de tracing.

Inspección de Web Vitals#

"Trackeame LCP, FID y CLS mientras navego por las 5 páginas principales del sitio". Métricas que típicamente requieren setup manual de Lighthouse.

Network request analysis#

"Mostrame todos los requests que la página manda al cargar, agrupados por origen, con tamaño y tiempo. Identificá los 3 que más bloquean el render".

Reads source-mapped de errores en prod#

Si tu bundle minificado falla en prod, CDP puede leer los source maps y devolverte el stack trace en el código original. Muy útil cuando los logs son ilegibles.

Comparado con alternativas#

• vs browser-use MCP: browser-use es más alto nivel y agéntico. Chrome DevTools es más bajo nivel y potente. Para debugging serio → Chrome DevTools. Para automation interactiva → browser-use.
• vs Playwright Skill: Playwright es más para tests. Chrome DevTools es más para introspección y debugging en vivo.

Pre-requisitos#

• Chrome o Chromium instalado
• Node.js + Claude Code funcionando
• Para apps en localhost: que estén corriendo (el MCP no levanta tu app)

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: Chrome DevTools MCP — comando exacto.
• Config JSON: chrome-devtools.json — definición.
• CDP docs: chromedevtools.github.io/devtools-protocol — la referencia oficial del protocolo.

Recursos relacionados#

• Browser-Use MCP — más alto nivel y agéntico. Comparalos según uso.
• Playwright Skill — para tests E2E reproducibles vs introspección en vivo.
• Claude Plugins Official — Chrome DevTools también aparece curado en el marketplace oficial de Anthropic.