/ Directorio / Playground / Chrome DevTools
← Todos los servidores ↗ GitHub
● Oficial ChromeDevTools ⚡ Instantáneo

Chrome DevTools

por ChromeDevTools · ChromeDevTools/chrome-devtools-mcp

Dale a Claude la misma vista que DevTools te da — trazas de rendimiento, red, consola, DOM en vivo. Oficial, mantenido por el equipo de Chrome.

El MCP oficial de Chrome DevTools. Controla un Chromium real bajo el capó, exponiendo navegación, inspección de DOM, grabación de red, lectura de consola, trazas de rendimiento y evaluación de JS. Permite que un agente depure páginas web y verifique lo que acaba de construir.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

chrome-devtools.replay ▶ listo
0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json
{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Chrome DevTools

Diagnostica por qué una página es lenta con una traza al estilo de Lighthouse

👤 Ingenieros de frontend y rendimiento ⏱ ~20 min intermediate

Cuándo usarlo: Una página se siente lenta y quieres que Claude ejecute una traza e identifique el cuello de botella real en lugar de adivinar.

Requisitos previos
  • La URL de destino se carga sin iniciar sesión (o manejas la auth primero) — Usa navigate_page con una URL; para páginas protegidas por auth, primero inicia sesión mediante las herramientas click/type de chrome-devtools
Flujo
  1. Ejecuta una traza de rendimiento
    Abre https://example.com/product/123. Ejecuta una traza de rendimiento con throttling de CPU 4x y un perfil de red slow-3G. Dime el LCP, CLS y TBT.✓ Copiado
    → Tres números de métricas más un resumen de la traza
  2. Encuentra el principal culpable
    ¿Qué recurso o script único contribuye más al retraso de LCP? Muestra la temporización de la solicitud.✓ Copiado
    → URL específica identificada, con desglose de temporización (DNS/connect/TTFB/download)
  3. Propón una solución concreta
    ¿Cuál es la solución más barata que movería el LCP a menos de 2.5s? Propón un cambio (preconnect, preload, defer, lazy o bundle-split) con líneas específicas a agregar.✓ Copiado
    → Diff de HTML/JS accionable, no una lista genérica

Resultado: Una regresión de rendimiento con una causa identificada y una solución específica, verificable al volver a ejecutar la traza después de aplicarla.

Errores comunes
  • La traza varía de una ejecución a otra — los números únicos engañan — Ejecuta la traza 3 veces y toma la mediana antes de sacar conclusiones
  • Las compilaciones locales/dev difieren de la producción — Ejecuta la traza contra una URL de producción o una vista previa servida por CDN, no localhost sin compresión
Combinar con: filesystem · github

Verifica que la función que Claude acaba de codificar realmente funciona en un navegador

👤 Desarrolladores asistidos por IA cerrando el ciclo en su agente ⏱ ~10 min beginner

Cuándo usarlo: Claude acaba de editar código frontend. Antes de decir 'listo', quieres que abra la página, haga clic en el botón y confirme que funciona.

Requisitos previos
  • Servidor de desarrollo en ejecución — npm run dev en otra terminal; anota la URL
Flujo
  1. Abre la función y toma una captura de pantalla
    Abre http://localhost:3000/new-feature. Toma una captura de pantalla. Describe lo que ves — ¿coincide con la intención?✓ Copiado
    → Captura de pantalla más descripción honesta (podría señalar 'el botón se renderiza fuera de pantalla')
  2. Ejerce la interacción
    Haz clic en el botón 'Submit' con datos de prueba: {email: '[email protected]'}. Captura la solicitud de red que sale y la respuesta.✓ Copiado
    → Entrada de red con respuesta 200 y carga coincidente
  3. Verifica la consola por errores
    ¿Algún error o advertencia de consola durante ese flujo? Incluye advertencias de hidratación de React o advertencias de clave faltante.✓ Copiado
    → Consola limpia, o una solución específica para cualquier advertencia encontrada

Resultado: Una función probada por sí sola con captura de pantalla + traza de red como evidencia. Cierra la brecha 'IA escribió código que en realidad no funciona'.

Errores comunes
  • La captura de pantalla se ve bien pero la interacción está rota — Siempre ejerce el flujo del usuario (click/type), no solo inspecciona visualmente
  • HMR tiene una carrera con la captura de pantalla de Claude — Después de navegar, espera a networkidle antes de afirmar nada
Combinar con: filesystem · github

Depura por qué una llamada de API desde tu frontend está fallando

👤 Desarrolladores full-stack persiguiendo un 4xx/5xx que 'no sucede localmente' ⏱ ~15 min intermediate

Cuándo usarlo: La consola del navegador muestra un fetch fallido, y no confías en tu propia memoria sobre qué headers/body se están enviando.

Flujo
  1. Dispara la llamada fallida
    Abre la página, realiza la acción que falla. Captura la URL completa de la solicitud fallida, método, headers y cuerpo.✓ Copiado
    → Carga de solicitud exacta visible — sin adivinanzas
  2. Compara con lo esperado
    El backend espera el header X-Client-Id y un cuerpo JSON con el campo user_id. ¿Qué se está enviando realmente? Compáralo.✓ Copiado
    → Campo específico faltante o incorrecto identificado
  3. Corrige y verifica de nuevo
    Corrige el código fuente para que la solicitud coincida. Luego recarga la página y confirma que la llamada ahora devuelve 200.✓ Copiado
    → La entrada de red final muestra 200, no el error original

Resultado: Una llamada de API corregida con prueba de pestaña de red de que ahora funciona — sin más 'funciona en mi máquina'.

Errores comunes
  • Las cookies de sesión o el preflight de CORS enmascarado la solicitud real — No solo mires la solicitud fallida — verifica el preflight OPTIONS y el historial de Set-Cookie
Combinar con: filesystem · postgres

Detecta regresiones visuales después de una refactorización de CSS

👤 Desarrolladores de frontend haciendo migraciones de sistema de diseño ⏱ ~20 min intermediate

Cuándo usarlo: Refactorizaste CSS/tokens. Quieres atrapar 'ay no el botón ahora es rosa' antes de fusionar.

Flujo
  1. Snapshot de páginas clave en main
    En http://localhost:3000 (rama main), toma capturas de pantalla de /, /pricing, /dashboard. Guarda en /tmp/visual/main/.✓ Copiado
    → 3 capturas de pantalla guardadas
  2. Snapshot de las mismas páginas en tu rama
    Cambia a la rama 'css-refactor' y reinicia el servidor de desarrollo. Toma capturas de pantalla de las mismas 3 páginas en /tmp/visual/branch/.✓ Copiado
    → 3 capturas de pantalla de ruta coincidente guardadas
  3. Compara y describe
    Para cada par, compáralos visualmente y describe cualquier cambio. Ignora el anti-aliasing a nivel de píxel; marca cualquier cosa que un diseñador notaría.✓ Copiado
    → Resumen de diff por página, no 'se ve igual'

Resultado: Un diff listo para revisión que atrapa cambios visuales no intencionados.

Errores comunes
  • El contenido dinámico (fechas, saludos aleatorizados) cambia entre capturas — Stub tiempo y congela RNG, o recorta esas regiones
Combinar con: filesystem · github

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

chrome-devtools + filesystem

Edita fuente → recarga página → verifica, en un bucle cerrado

Abre localhost:3000/checkout. El botón de envío del formulario tiene el color incorrecto. Encuentra el CSS relevante en src/ y corrígelo, luego recarga y toma una captura de pantalla para confirmar.✓ Copiado
chrome-devtools + github

Reproduce un bug de un issue, verifica la solución, abre PR con captura de pantalla

El Issue #482 reporta un bug de layout en /pricing a 375px de ancho. Reprodúcelo con chrome-devtools (captura de pantalla a 375px), corrige el CSS, abre un PR incluyendo las capturas de pantalla antes/después.✓ Copiado
chrome-devtools + sentry

Reproduce un error de usuario real encontrado en Sentry, en tu navegador local

Para el issue de Sentry WEB-3a91, los breadcrumbs muestran que el usuario navegó a /cart y luego hizo clic en 'Checkout'. Reprodúcelo en chrome-devtools y captura qué se rompe realmente.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
navigate_page url: str, wait_for?: 'load'|'networkidle' Comienza cualquier interacción de página gratis
take_screenshot fullPage?: bool, selector?: str Confirmación visual después de navegar o interactuar gratis
take_snapshot ninguno Contenido de página estructurado como texto — mejor que capturas de pantalla para que Claude razone gratis
click selector: str | uid: str Haz clic en un elemento por selector CSS o UID de snapshot gratis
fill selector: str, value: str Escribe en un campo de entrada gratis
evaluate_script script: str Ejecuta JS arbitrario en el contexto de la página para inspección gratis
list_console_messages ninguno Lee logs de consola y errores de la página gratis
list_network_requests filter?: str Inspecciona todo XHR/fetch que sucedió gratis
get_network_request requestId: str Obtén headers y body completos de una solicitud gratis
performance_start_trace reload?: bool, cpu_throttle?: number, network?: 'slow3g'|'fast3g' Comienza una grabación de rendimiento gratis
performance_stop_trace ninguno Detén y analiza una traza de rendimiento en ejecución gratis
emulate_cpu rate: number Simula dispositivos lentos (4x = móvil de rango medio) gratis
emulate_network profile: 'slow3g'|'fast3g'|'offline' Prueba bajo redes limitadas gratis
new_page / close_page / select_page varios Administra múltiples pestañas gratis

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Ninguno — ejecuta un navegador local
Tokens por llamada
Los snapshots y volcados de red pueden ser grandes (5-30k tokens); take_snapshot suele ser más eficiente en tokens que capturas de pantalla completas más volcado de DOM
Monetario
Gratis
Consejo
Prefiere take_snapshot sobre take_screenshot para que Claude razone sobre la estructura — los snapshots son compactos y basados en texto. Guarda capturas de pantalla para revisión humana.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno en la capa MCP; si inicia sesión en un sitio durante una sesión, las cookies viven en el perfil de Chromium hasta que lo cierres
Salida de datos: El Chromium navega la web abierta en tu nombre — los destinos reciben tu IP. Sin telemetría a Google más allá de lo que envían los valores predeterminados de Chromium.
No conceder nunca: nunca apuntes a tu perfil de navegador real que contiene inicios de sesión/contraseñas guardadas

Resolución de problemas

Errores comunes y soluciones

Chromium no se inicia — dependencias faltantes en Linux

Instala las librerías del sistema faltantes: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. El MCP agrupa Chromium pero no todas sus dependencias de tiempo de ejecución.

Verificar: Ejecuta `npx chrome-devtools-mcp --version` — los errores nombran la librería faltante
navigate_page agota el tiempo en una página lenta

Pasa wait_for: 'load' en lugar del networkidle por defecto; o aumenta el timeout en la configuración MCP del cliente.

click falla: elemento no encontrado

El selector es obsoleto u oculto. Vuelve a llamar take_snapshot primero y usa el UID fresco del snapshot.

La traza de rendimiento está vacía

Necesitas recargar la página durante la traza (reload: true) o interactuar con ella — una pestaña inactiva no produce línea de tiempo.

Alternativas

Chrome DevTools vs otros

AlternativaCuándo usarlaContrapartida
Playwright MCPNecesitas pruebas en múltiples navegadores (Firefox, WebKit) o prefieres la superficie de API de PlaywrightPotencia similar; chrome-devtools tiene rastreo de rendimiento más profundo, playwright tiene automatización más amplia
Puppeteer MCPQuieres la API de Puppeteer de nivel inferiorSolo Chrome, se superpone mucho con chrome-devtools MCP
browser-tools MCPQuieres conectar tu Chrome existente a través de la extensión DevTools ProtocolSin sandbox fresco — usa tu sesión de navegador real, con tu estado de inicio de sesión

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills