Chrome DevTools MCP para agentes: lo probamos y así maneja diálogos y consola ✅ yoDEV Tested

Chrome DevTools MCP 1.12 avisa a tu agente de IA cuando la página abre un alert de JavaScript y conserva la consola al cambiar de ruta. Lo probamos con un Chrome real.

https://developer.chrome.com/blog/new-in-devtools-november-2026

✅ yoDEV Tested · 3 de noviembre de 2026

chrome-devtools-mcp 1.12.0 con Chrome for Testing 153 headless en Linux, y el menú de DevTools en Chrome 156 en macOS. Los resultados que reportamos como nuestros salen de esa prueba.

El post "New in DevTools: November 2026" de Google, publicado el 20 de octubre, abre con una sección llamada DevTools for Agents. A pesar del nombre, casi nada es interfaz nueva de DevTools: son cambios en chrome-devtools-mcp, el servidor MCP de código abierto que permite a Claude Code, Gemini CLI, Copilot, Cursor y otros agentes controlar e inspeccionar un Chrome real. Lo único nuevo dentro de DevTools es una entrada de menú.

¿Qué es Chrome DevTools MCP?

Chrome DevTools MCP es un servidor Model Context Protocol, mantenido por el equipo de Chrome DevTools, que le da a un agente de IA las mismas herramientas que usa un desarrollador front-end a mano: navegar, hacer clic, llenar formularios, leer la consola y el registro de red, tomar snapshots y capturas, grabar trazas de rendimiento y ejecutar Lighthouse. Por dentro usa Puppeteer para controlar el navegador. Tu agente lo lanza en local con npx, y el servidor arranca y controla su propia instancia de Chrome.

En la versión que probamos (1.12.0, publicada en npm el 22 de octubre), el servidor expone 32 herramientas, entre ellas click, fill_form, handle_dialog, list_console_messages, get_css_styles, list_network_requests, performance_start_trace, lighthouse_audit y take_heapsnapshot.

Lo cubrimos por primera vez cuando salió como public preview en 2025: Give your AI eyes: Introducing Chrome DevTools MCP.

¿Qué cambió para los agentes en Chrome 155 y 156?

El blog de Chrome lista seis novedades bajo DevTools for Agents:

• Manejo de diálogos: los diálogos de JavaScript que se abren durante una acción de entrada se manejan automáticamente.
• Consola persistente: el historial de mensajes de consola se conserva en las navegaciones dentro del mismo documento.
• Inspección de CSS: una herramienta nueva, get_css_styles, devuelve los estilos calculados y las reglas que aplican, con paginación.
• Archivo de configuración y control de rutas: un archivo para los flags del servidor y raíces de sistema de archivos personalizadas.
• Trazas por partes: las grabaciones de rendimiento grandes se procesan por bloques, con un buffer de traza de 1,2 GB por defecto.
• Menú de configuración: una entrada Get Chrome DevTools for agents en el menú principal de DevTools.

Chrome 155 y 156 están en el canal estable, no solo en Canary o Beta. El servidor se publica en npm con su propio calendario, así que los cambios del servidor los obtienes actualizando el paquete, no actualizando Chrome.

¿Cómo lo probamos?

Ejecutamos chrome-devtools-mcp@1.12.0 en Linux con Node 22 contra Chrome for Testing 153 en modo headless, usando el SDK oficial de MCP para TypeScript como cliente, el mismo protocolo que habla Claude Code. La página de prueba tenía botones que abren un alert, un confirm y un prompt, y otro que llama a history.pushState. La entrada de menú la revisamos por separado en Chrome 156.0.8078.80 en macOS.

¿Qué pasa cuando la página abre un alert, confirm o prompt de JavaScript?

El servidor detecta el diálogo y le devuelve el control al agente de inmediato, pero no lo acepta ni lo cierra por su cuenta. "Manejado automáticamente" significa eso, y es la decisión correcta.

Cuando nuestro agente hizo clic en el botón del alert, la llamada a click respondió en unos 100 ms con:

The element was clicked and it opened a dialog.
# Open dialog
alert: hola desde la página.
Call handle_dialog to handle it before continuing.

Hasta que el agente responde, cualquier otra acción falla con Error: A dialog is open. El agente llama entonces a handle_dialog con action: "accept" o "dismiss", y puede pasar promptText para responder a un prompt(). En nuestra prueba, aceptar un prompt con el texto "Greg" y rechazar un confirm dejó prompt=Greg y confirm=false en la consola, tal como se esperaba.

Por qué importa: el changelog de la versión 1.7.0 corrigió un bloqueo de 180 segundos cuando se abría un diálogo durante una acción. Antes, un alert() inesperado podía congelar al agente tres minutos. Ahora lo ve en la misma respuesta y decide qué hacer, que es justo lo que quieres cuando el diálogo es un "¿Eliminar esto?".

¿El agente conserva la consola de Chrome al navegar?

Sí en las navegaciones dentro de la página, y sí bajo pedido en las cargas completas.

• Navegación en el mismo documento (un cambio de #hash o history.pushState, que es como la mayoría de los routers de SPA cambian de página): list_console_messages siguió devolviendo todos los mensajes anteriores. No se perdió nada.
• Navegación completa a otra URL: la lista por defecto empieza de cero con la página nueva. Con includePreservedMessages: true devuelve los mensajes de las últimas tres navegaciones, con los IDs de mensaje en secuencia. El flag --maxNavigationSaved cambia esa ventana, de 1 a 25.

Para depurar una app en React o Vue, esto significa que un error registrado en la ruta anterior sigue ahí cuando el agente lo va a buscar.

¿Qué devuelve get_css_styles?

Devuelve las reglas CSS que aplican a un elemento, en orden de cascada y con la ubicación en la hoja de estilos. Le pasas el uid del elemento que obtienes con take_snapshot. En nuestra prueba, para un botón con una regla de clase y otra dentro de un media query, devolvió primero el bloque @media (min-width: 100px), luego la regla .btn con index:1 como ubicación, y después la hoja de estilos del navegador con las propiedades sobrescritas marcadas como [overloaded]. Los resultados vienen en páginas de 10 reglas por defecto (pageSize, pageIdx), lo que evita que una hoja de estilos grande llene el contexto del agente.

¿Cómo funciona el nuevo archivo de configuración?

Ahora puedes poner las opciones del servidor en un archivo JSON en lugar de una lista larga de argumentos. El servidor busca, en este orden: un archivo indicado con --config, luego cd4a.config.json en $PLUGIN_DATA cuando corre como plugin de un agente, y luego un archivo global:

macOS y Linux: ~/.config/cd4a/config.json
Windows:       %LOCALAPPDATA%/Google/cd4a/config.json

Usa solo el primero que encuentra (no combina archivos) y los flags de la línea de comandos tienen prioridad sobre el archivo. Los nombres de las opciones van en camelCase.

Probamos el archivo global con:

{
  "headless": true,
  "isolated": true,
  "viewport": "800x600",
  "usageStatistics": false
}

Sin ninguna de esas opciones en la línea de comandos, la página reportó una ventana de 800×600 y un navegador headless, así que el archivo se aplicó. La documentación advierte que ni el archivo ni su carpeta deberían ser editables por el agente; si no, el agente podría reescribir sus propios permisos.

¿Qué errores vas a encontrar al usarlo?

Hay dos cambios de comportamiento que conviene conocer antes de conectarlo a tus scripts.

Todas las herramientas ahora piden un pageId. El enrutamiento por ID de página viene activado por defecto (--pageIdRouting). Nuestra primera ejecución falló en cada llamada con pageId: Invalid input: expected number. Agentes como Claude Code leen el esquema de las herramientas y lo resuelven solos, pero si usas el servidor directamente desde un script, llama primero a list_pages y pasa el ID.

El acceso a archivos se limita a la carpeta temporal si tu cliente no soporta MCP roots. Al arrancar, el servidor avisó que el cliente "did not negotiate the MCP roots capability" y que las herramientas que leen o escriben archivos locales quedan restringidas a la carpeta temporal del sistema. Esto afecta, por ejemplo, a guardar capturas, trazas y heap snapshots en tu proyecto. La solución es permitir carpetas concretas con --filesystemRoot (se puede repetir) o, solo con un cliente local de confianza, --allowUnrestrictedPaths. El blog de Google dice que la CLI separada chrome-devtools activa las rutas sin restricción por defecto; la documentación del servidor MCP indica false como valor por defecto, que es lo que vimos.

¿Puede el agente medir el LCP de tu página?

Sí, con una sola llamada. performance_start_trace con reload: true y autoStop: true recargó nuestra página, se detuvo sola después de unos seis segundos y devolvió el LCP (Largest Contentful Paint: 440 ms, divididos en 7 ms de TTFB y 433 ms de retraso de renderizado), el CLS y una lista de insights que el agente puede explorar en detalle. El procesamiento por bloques ocurre por dentro y no se ve desde fuera: con una página de prueba pequeña no podemos verificar el buffer de 1,2 GB ni el troceado, así que eso es la descripción de Google.

Por defecto, las URLs de las trazas se envían a la API de CrUX de Google para traer datos de usuarios reales. Desactívalo con --no-performance-crux si pruebas URLs internas.

¿Qué hace "Get Chrome DevTools for agents"?

En Chrome 156, la entrada está en el menú de tres puntos de DevTools. Al hacer clic abre el repositorio del proyecto en GitHub. Es un atajo a las instrucciones de instalación, no un instalador dentro de DevTools.

¿Cómo instalar Chrome DevTools MCP en Claude Code, Gemini CLI y VS Code?

Necesitas Node.js en versión LTS actual, npm y Chrome estable o más reciente.

Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Gemini CLI:

gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Copilot en VS Code: ejecuta "Chat: Install Plugin From Source" e ingresa ChromeDevTools/chrome-devtools-mcp.

Cualquier otro cliente MCP (Cursor, Codex y otros), con el bloque de configuración estándar:

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

Flags útiles para añadir: --isolated para un perfil temporal que se borra al cerrar el navegador, --headless para no abrir ventana, --slim para un conjunto reducido de tres herramientas (navegación, ejecución de scripts y capturas) y --no-usage-statistics para no enviar datos de uso.

Una advertencia del propio proyecto: el servidor expone el contenido de su navegador al cliente MCP. No lo apuntes a sesiones con datos que no compartirías con tu agente, y prefiere --isolated antes que tu perfil de todos los días.

¿Chrome DevTools MCP o Playwright MCP?

Si tu trabajo es depurar y medir una app en Chrome, Chrome DevTools MCP; si necesitas Firefox o WebKit, Playwright MCP. Según su README, Playwright MCP (de Microsoft) soporta Chromium, Firefox y WebKit, trabaja sobre el árbol de accesibilidad y también tiene herramientas para diálogos (browser_handle_dialog) y consola (browser_console_messages); las trazas son opcionales con --caps=devtools y no menciona Lighthouse ni análisis de rendimiento. Chrome DevTools MCP solo soporta oficialmente Google Chrome y Chrome for Testing, pero trae lo que viene de DevTools: insights de rendimiento con LCP, lighthouse_audit, heap snapshots y ahora get_css_styles. Playwright MCP no lo probamos para esta nota.

¿Vale la pena actualizarlo?

Sí. Los cambios en diálogos y consola resuelven dos situaciones reales en las que un agente se quedaba trabado o ciego al probar una app web, y ambos se comportaron como describe Google en nuestra prueba. El archivo de configuración hace que el setup sea reproducible en todo el equipo. Solo ten en cuenta el pageId obligatorio y la restricción a la carpeta temporal antes de integrarlo en tus scripts.

Al momento de publicar esta nota, el número de herramientas (32), los valores por defecto y el comportamiento del menú corresponden a la versión 1.12.0 y a Chrome 156; el proyecto publica versiones con frecuencia, así que revisa el changelog antes de depender de un valor por defecto concreto.

---

¿Y tú? ¿Qué es lo primero que le pedirías revisar a tu agente en el navegador: un error de consola, una petición de red o el rendimiento?

Relacionado: BrowserSkill: cómo darle a Claude Code tu navegador real con la sesión ya iniciada