Chrome DevTools MCP

Name: Chrome DevTools MCP
Author: dinesh-nalla-se

by dinesh-nalla-se

Dale a tu agente de IA acceso completo a Chrome DevTools

browser Node.js Principiante Auto-hospedable Sin API key Verificado Destacado

📅 Actualizado: hace 1sem

Ver en GitHub Ver paquete

Descripción

Chrome DevTools MCP conecta tus asistentes de IA con el navegador, exponiendo toda la potencia del protocolo Chrome DevTools a través de una interfaz MCP limpia. En lugar de copiar errores de consola manualmente o describir problemas de layout a tu IA, este server permite que el modelo navegue páginas, inspeccione tráfico de red, capture screenshots y ejecute JavaScript directamente en el contexto del navegador. Su punto fuerte está en las capacidades de debugging y perfilado de rendimiento. Tu asistente de IA puede iniciar y detener trazas de rendimiento, leer logs de consola en tiempo real e inspeccionar peticiones de red, todo sin que salgas de tu editor. Esto convierte lo que antes era un tedioso ir y venir en una sola conversación donde la IA ve exactamente lo mismo que tú en el navegador. Construido y mantenido por Anthropic, Chrome DevTools MCP está diseñado para ser ligero y enfocado. Se conecta a una instancia de Chrome en ejecución a través del protocolo DevTools, lo que significa que funciona con tu sesión real del navegador, incluyendo cookies, extensiones y estado autenticado. Esto lo hace especialmente eficaz para depurar problemas que solo aparecen en contextos específicos de usuario.

✅ Ideal para

Desarrolladores front-end que quieren que su asistente de IA vea e interactúe con el navegador durante sesiones de debugging

⏭️ No recomendado si

Necesitas automatización headless del navegador para testing o scraping — Playwright MCP encaja mejor en esos flujos de trabajo

💡 Casos de uso

Depurar problemas de renderizado front-end dejando que la IA tome screenshots e inspeccione el DOM directamente
Perfilar cuellos de botella de rendimiento con captura y análisis automatizados de trazas
Monitorear peticiones de red y errores de consola durante el desarrollo sin cambiar de ventana

👍 Ventajas

✓ Acceso directo al protocolo real de Chrome DevTools, no un entorno simulado
✓ Funciona con tus sesiones autenticadas del navegador, cookies y extensiones
✓ El soporte de trazas de rendimiento da a la IA una visión profunda del rendering y tiempos de carga

👎 Desventajas

✗ Requiere una instancia de Chrome ejecutándose con debugging remoto habilitado
✗ No es adecuado para pipelines CI/CD headless — usa Playwright MCP para eso

🔧 Herramientas expuestas (14 herramientas)

Tool	Categoría	Descripción
take_screenshot	debugging	Capturar una screenshot del viewport actual del navegador
get_console_logs	debugging	Obtener los mensajes de log de la consola de las herramientas de desarrollo del navegador
evaluate_javascript	debugging	Ejecutar codigo JavaScript arbitrario en el contexto de la pagina del navegador
get_network_requests	debugging	Listar las peticiones de red capturadas incluyendo URLs, metodos y codigos de estado
click	input automation	Hacer clic en un elemento de la pagina identificado por un selector CSS
type_text	input automation	Escribir texto en un campo de entrada enfocado o elemento editable
scroll	input automation	Desplazar la pagina una cantidad especificada o hasta un elemento concreto
hover	input automation	Mover el puntero del raton sobre un elemento para activar estados hover
select_option	input automation	Seleccionar una opcion de un menu desplegable o elemento select
navigate	navigation	Navegar a una URL especificada en el navegador Chrome conectado
get_page_content	navigation	Extraer el contenido HTML o texto completo de la pagina actual
wait_for_selector	navigation	Esperar hasta que un selector CSS especifico aparezca en el DOM antes de continuar
performance_start_trace	performance	Iniciar la grabacion de una traza de rendimiento de Chrome para perfilado
performance_stop_trace	performance	Detener la traza de rendimiento activa y devolver los datos de perfilado recopilados

⚡ Instalación

Requisitos previos:

• Node.js

claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest

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

💡 Consejos y trucos

Lanza Chrome con el flag `--remote-debugging-port=9222` para habilitar la conexión al protocolo DevTools. Si mantienes un perfil de Chrome dedicado para desarrollo, la IA puede acceder a todas tus sesiones iniciadas y estado de local storage, facilitando mucho la reproducción de bugs autenticados. Combínalo con un filesystem MCP para que la IA edite código y verifique los cambios en el navegador de inmediato.

🔄 Alternativas

Playwright MCP

Automatización headless del navegador para tu asistente de IA

Más sencillo para automatización web básica y scraping

Info rápida

Autor: dinesh-nalla-se
Licencia
Runtime: Node.js
Transporte: stdio
Categoría: browser
Dificultad: Principiante
Auto-hospedable: ✅
API key: No necesita API key
Docker: —
Versión: 0.10.2
Actualizado: 10 feb 2026

Compatibilidad con clientes

✅ Claude Code
✅ Cursor
✅ VS Code Copilot
✅ Gemini CLI
✅ Windsurf
✅ Cline
✅ JetBrains AI
✅ Warp

Enlaces

Plataformas

🍎 macOS 🐧 Linux 🪟 Windows