Esta es una bifurcación de aprendizaje personal de ChromeDevTools/chrome-devtools-mcp. Añade un tutorial en lenguaje sencillo y una demostración del mundo real que te guían a través de la herramienta desde cero; no se requiere conocimiento previo de Chrome, DevTools, MCP o la CLI.

¿Eres nuevo aquí? Empieza con demo-health-check/ ↓

✦ Añadido en esta bifurcación: dos demostraciones de extremo a extremo

Si términos como servidor MCP, Protocolo Chrome DevTools, seguimiento de rendimiento o Lighthouse te resultan desconocidos, no estás solo y estás en el lugar correcto.

Esta bifurcación añade dos demostraciones independientes; juntas cubren 26 de las 29 herramientas de chrome-devtools-mcp.

Demostración 1 — demo-health-check/ — Auditoría de salud de un sitio web (CNN.com)

Demostración 2 — demo-shopping/ — Flujo de trabajo de compras con agentes (saucedemo.com)

Un agente de IA ejecuta un flujo completo de compra de comercio electrónico de forma autónoma: inicio de sesión → navegación → comparación entre pestañas → carrito → emulación móvil → pago → confirmación de pedido. Cubre las 18 herramientas de interacción no utilizadas en la Demostración 1.

¿Qué más puedes construir con esto? → use-cases.md

Más de 50 flujos de trabajo de agentes en QA, rendimiento, SEO, comercio electrónico, investigación, seguridad y productividad personal, con las herramientas específicas que utiliza cada uno y por qué CDP supera a las alternativas.

Qué hace realmente esta herramienta

chrome-devtools-mcp le da a tu asistente de IA (Claude, Gemini, Cursor, Copilot…) la capacidad de controlar e inspeccionar un navegador Chrome real. En lugar de solo leer y escribir archivos de texto, tu IA puede:

• Abrir páginas web y tomar capturas de pantalla

• Leer la estructura de la página como un lector de pantalla

• Recopilar errores de consola en vivo y solicitudes de red

• Ejecutar auditorías de Lighthouse (accesibilidad, SEO, mejores prácticas)

• Registrar seguimientos de rendimiento y medir Core Web Vitals (LCP, CLS, INP)

Interactúas con ella mediante lenguaje sencillo — "Comprueba el rendimiento de esta página" — y la IA determina cuál de las 29 herramientas llamar.

No se necesita experiencia

La demostración fue diseñada para alguien que nunca ha abierto Chrome DevTools, nunca ha usado un servidor MCP y apenas ha comenzado a usar un asistente de codificación de IA. Cada concepto se explica desde los principios básicos antes de ser utilizado.

Chrome DevTools MCP

chrome-devtools-mcp permite que tu agente de codificación (como Gemini, Claude, Cursor o Copilot) controle e inspeccione un navegador Chrome en vivo. Actúa como un servidor de Protocolo de Contexto de Modelo (MCP), dando a tu asistente de codificación de IA acceso a todo el poder de Chrome DevTools para una automatización confiable, depuración profunda y análisis de rendimiento.

Referencia de herramientas | Registro de cambios | Contribución | Solución de problemas | Principios de diseño

Características clave

• Obtén información sobre el rendimiento: Utiliza Chrome DevTools para registrar seguimientos y extraer información de rendimiento procesable.

• Depuración avanzada del navegador: Analiza solicitudes de red, toma capturas de pantalla y comprueba mensajes de la consola del navegador (con seguimientos de pila mapeados por fuente).

• Automatización confiable. Utiliza puppeteer para automatizar acciones en Chrome y esperar automáticamente los resultados de las acciones.

Descargos de responsabilidad

chrome-devtools-mcp expone el contenido de la instancia del navegador a los clientes MCP, permitiéndoles inspeccionar, depurar y modificar cualquier dato en el navegador o DevTools. Evita compartir información sensible o personal que no quieras compartir con los clientes MCP.

chrome-devtools-mcp admite oficialmente solo Google Chrome y Chrome for Testing. Otros navegadores basados en Chromium pueden funcionar, pero esto no está garantizado y podrías encontrar un comportamiento inesperado. Úsalo bajo tu propia discreción. Nos comprometemos a proporcionar correcciones y soporte para la última versión de Extended Stable Chrome.

Las herramientas de rendimiento pueden enviar URL de seguimiento a la API de Google CrUX para obtener datos de experiencia de usuario real. Esto ayuda a proporcionar una imagen de rendimiento holística al presentar datos de campo junto con datos de laboratorio. Estos datos son recopilados por el Chrome User Experience Report (CrUX). Para desactivar esto, ejecuta con la bandera --no-performance-crux.

Estadísticas de uso

Google recopila estadísticas de uso (como tasas de éxito de invocación de herramientas, latencia e información del entorno) para mejorar la confiabilidad y el rendimiento de Chrome DevTools MCP.

La recopilación de datos está habilitada de forma predeterminada. Puedes optar por no participar pasando la bandera --no-usage-statistics al iniciar el servidor:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google maneja estos datos de acuerdo con la Política de Privacidad de Google.

La recopilación de estadísticas de uso de Google para Chrome DevTools MCP es independiente de las estadísticas de uso del navegador Chrome. Optar por no participar en las métricas de Chrome no te excluye automáticamente de esta herramienta, y viceversa.

La recopilación se deshabilita si se establecen las variables de entorno CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS o CI.

Requisitos

• Node.js v20.19 o una versión LTS de mantenimiento más reciente.

• Chrome versión estable actual o más reciente.

• npm

Primeros pasos

Agrega la siguiente configuración a tu cliente MCP:

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

Si estás interesado en realizar solo tareas básicas del navegador, usa el modo --slim:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Consulta la Referencia de herramientas Slim.

Configuración del cliente MCP

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Para usar el servidor Chrome DevTools MCP, sigue las instrucciones de la documentación de Antigravity para instalar un servidor MCP personalizado. Agrega la siguiente configuración a la configuración de servidores MCP:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

Esto hará que el servidor Chrome DevTools MCP se conecte automáticamente al navegador que está usando Antigravity. Si no estás usando el puerto 9222, asegúrate de ajustarlo en consecuencia.

Chrome DevTools MCP no iniciará la instancia del navegador automáticamente usando este enfoque porque el servidor Chrome DevTools MCP se conecta al navegador integrado de Antigravity. Si el navegador aún no se está ejecutando, debes iniciarlo primero haciendo clic en el icono de Chrome en la esquina superior derecha.

Instalar vía CLI (solo MCP)

Usa la CLI de Claude Code para agregar el servidor Chrome DevTools MCP (guía):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Instalar como complemento (MCP + Skills)

Para instalar Chrome DevTools MCP con habilidades, agrega el registro del mercado en Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Luego, instala el complemento:

/plugin install chrome-devtools-mcp

Reinicia Claude Code para que se carguen el servidor MCP y las habilidades (verifica con /skills).

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

En Windows 11

Configura la ubicación de instalación de Chrome y aumenta el tiempo de espera de inicio actualizando .codex/config.toml y agregando los siguientes parámetros env y startup_timeout_ms:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Inicia Copilot CLI:

copilot

Inicia el diálogo para agregar un nuevo servidor MCP ejecutando:

/mcp add

Configura los siguientes campos y presiona CTRL+S para guardar la configuración:

• Nombre del servidor: chrome-devtools

• Tipo de servidor: [1] Local

• Comando: npx -y chrome-devtools-mcp@latest

Haz clic en el botón para instalar:

O instala manualmente:

Sigue la guía de instalación de MCP, con la configuración estándar anterior. También puedes instalar el servidor Chrome DevTools MCP usando la CLI de VS Code:

Para macOS y Linux:

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

Para Windows (PowerShell):

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

Haz clic en el botón para instalar:

[](https://cursor.com/en/install-mcp?name=chrome-devtools\\\\&config=eyJjb21tYW5kIjoibnB4IC15IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0