Michael Hablich lleva 20 años creando herramientas para desarrolladores en Google. Ahora le da a los agentes de código los mismos superpoderes de depuración que Chrome DevTools les dio a los desarrolladores web hace más de una década. ¡Conoce el MCP Server de Chrome DevTools!

Este artículo está adaptado de MCP MVP una entrevista con Michael Hablich, Product Manager de Chrome DevTools y Puppeteer en Google.

Depurar en desarrollo web cambió con la llegada de los agentes de código. En lugar de revisar con cuidado una lista interminable de errores y advertencias en la consola para rastrear qué salió mal, ahora suele ser más rápido copiar todo el log y pegarlo en Claude Code o Gemini CLI con un escueto “arregla esto”. Pero luego lo haces otra vez. Y otra. En vez de dedicar tu tiempo a pulir un diseño o construir una nueva función, te conviertes en un portapapeles humano para tu agente de código, transportando contexto entre dos sistemas que deberían hablar directamente entre sí.

Michael Hablich, Product Manager de Chrome DevTools y Puppeteer en Google, llama a esto “programar con los ojos vendados”. Tu agente puede escribir código, pero no tiene idea de qué pasa cuando ese código corre en un navegador. No puede ver errores de consola, peticiones de red fallidas, cambios de layout ni cuellos de botella de rendimiento. Chrome DevTools MCP le quita la venda.

“Ahora tiene un ciclo de retroalimentación interesante”, le dijo Michael a RL Nabors en una entrevista reciente para la serie MCP MVP de Arcade. “Dile que corrija un bug, que lo valide. Y si aún no funciona, que siga corrigiéndolo hasta que realmente funcione.”

Cómo el MCP Server de Chrome DevTools ofrece depuración y automatización bajo el capó

Chrome DevTools MCP le da a tu agente dos categorías de capacidades, actuación y introspección:

  • Actuación / automatización del navegador Navegar a páginas, hacer clic en elementos, llenar formularios y tomar capturas de pantalla, todo a través de Puppeteer, la librería Node.js de Google para controlar Chrome. Se encarga de detalles como esperar a que la red esté inactiva y el DOM esté listo.
  • Introspección / depuración Con estas herramientas, tu agente puede leer mensajes de consola (con stack traces mapeados a la fuente), inspeccionar peticiones de red, grabar trazas de rendimiento, tomar snapshots de accesibilidad y, recientemente, capturar heap snapshots para depuración de memoria.

Ambas capas se comunican con Chrome a través del Chrome DevTools Protocol (CDP), el mismo protocolo de bajo nivel que impulsa DevTools, Playwright y todos los demás frameworks de automatización de navegadores. Si alguna vez abriste un puerto de depuración remota para Playwright, la configuración te resultará familiar. La diferencia es que los frameworks de pruebas normalmente usan CDP solo para automatización. Chrome DevTools MCP también usa bibliotecas de código del front-end de DevTools para las capacidades de depuración: análisis de red, perfilado de rendimiento y más.

El servidor expone aproximadamente 25 a 30 herramientas a cualquier agente de código compatible con MCP, como Gemini CLI, Claude Code, Cursor, Copilot o Codex. El razonamiento de Michael detrás de la decisión de crear herramientas más granulares es que “incluso la automatización básica requiere una herramienta para listar páginas, una para seleccionar una página, una para navegar, una para tomar un snapshot y una para hacer clic en un elemento. Son cinco herramientas para el flujo de trabajo más simple posible. Teóricamente puedes minimizarlo, pero entonces los agentes de código empiezan a usarlas mal. Siempre es un equilibrio.”

Iterar sobre el feedback de desarrolladores mejoró el servidor

La historia comienza en el verano de 2024. El equipo de Michael en Google veía un futuro donde los agentes escriben la mayor parte del código, lo que significa que también necesitarían depurar la mayor parte. Tenían Puppeteer para automatización, pero no tenían APIs de alto nivel para depuración: leer mensajes de consola, establecer breakpoints y analizar peticiones de red.

En paralelo, el equipo estaba construyendo Gemini in DevTools, el panel de asistencia de AI que te permite chatear con Gemini sobre problemas de front-end directamente dentro de la interfaz de Chrome DevTools. (Vale aclarar: usa Gemini 2.5 Flash en los servidores de Google, no el modelo on-device que impulsa la Prompt API. Modelo diferente, arquitectura diferente.) Construir ese agente interno les enseñó qué APIs de alto nivel necesitaría realmente un agente para depurar.

Cuando Anthropic lanzó el Model Context Protocol (MCP) a finales de 2024, el problema de integración encajó. En lugar de construir integraciones personalizadas para cada agente de código, podían soportar un solo protocolo, MCP, y funcionar en todos lados.

Su primer intento, una vista previa de acceso anticipado a principios de 2025, modeló el servidor como un sistema multiagente. El servidor MCP de Chrome DevTools corría su propio agente de depuración internamente, añadiendo otra capa de inferencia sobre el agente de código que lo llamaba. Sin embargo, el feedback de los socios y los Google Developer Experts fue que múltiples niveles de no-determinismo empeoraban las cosas, no las mejoraban. La complejidad adicional no valía la pena por los pocos casos de uso que el sistema manejaba bien.

Así que durante el verano de 2025 reagruparon y reconstruyeron. El nuevo servidor se lanzó en septiembre con ~25 herramientas de bajo nivel y sin skills. “La inteligencia debe venir del agente de código”, dijo Michael. Deja que el modelo razone. Dale buenas herramientas y quítate del camino.

Para cualquiera que esté construyendo su propio servidor MCP, esta es quizás la lección más transferible del equipo de Chrome DevTools: resiste la tentación de ser listo del lado del servidor. Ofrece bloques de construcción de bajo nivel con interfaces claras. Deja que el agente maneje el razonamiento.

En producción: el loop de QA autónomo de CyberAgent

Cuando el servidor reconstruido se lanzó, CyberAgent, una de las mayores empresas tecnológicas de Japón, lo adoptó de inmediato. Apuntaron un agente de código equipado con Chrome DevTools MCP a su sistema de diseño Spindle en Storybook, permitiéndole auditar y corregir bugs en tiempo de ejecución de forma autónoma.

El flujo de trabajo es exactamente el ciclo de retroalimentación que describió Michael: el agente abre un componente, inspecciona el estado del navegador, identifica errores, corrige el código, redesplega y valida que el fix realmente funciona sin introducir regresiones. Luego pasa al siguiente componente y sigue.

Este era trabajo que los desarrolladores de CyberAgent “muy seguido no tenían tiempo de hacer. Y motivación, porque a veces también es muy tedioso”. El caso de estudio completo está publicado en el blog de Chrome developers.

El handoff humano-agente que sí funciona

Durante la entrevista, Michael demostró un flujo de trabajo que se sentía genuinamente natural. Tenía una app de browser de películas con bugs corriendo en Chrome Canary, con algunos posters de películas fallando intencionalmente al cargar. Seleccionó una imagen rota en el panel Elements de DevTools, cambió a Gemini CLI y escribió: “Seleccioné una imagen en Chrome DevTools. Descubre por qué la imagen no está cargando.”

El agente se conectó a su sesión de navegador en vivo (Chrome muestra un diálogo de permisos, así el humano mantiene el control), leyó el elemento seleccionado, listó las peticiones de red, tomó un snapshot de accesibilidad, identificó que la mitad de las rutas de imagen estaban siendo alteradas por una función con bugs, corrigió el código y validó el fix. Las imágenes cargaron.

Los desarrolladores ya se sienten como en casa en DevTools: seleccionando elementos, inspeccionando el DOM. Ahora pueden llamar a un agente para trabajar junto a ellos, inspeccionar los mismos logs y elementos del DOM que ya están viendo sin necesidad de copiar y pegar, tomar capturas o escribir descripciones largas. Es una experiencia de desarrollo fluida.

Esto es posible desde que Chrome 144 agregó la --autoConnectcaracterística, que permite al servidor MCP conectarse a tu sesión de navegador en ejecución en lugar de abrir una nueva. Puedes usar DevTools tú mismo, luego pasárselo a tu agente de código y volver a tomar el control. Se acabó elegir entre depuración manual y automatizada.

Skills: reescribir la documentación para agentes

Michael apuesta fuerte por los skills, y Chrome DevTools MCP ya los incluye. Es la misma conclusión que Paul Asjes de ElevenLabs describió en una entrevista anterior: los agentes se entrenan con documentación escrita para humanos que usan interfaces humanas. Pero Chrome DevTools para agentes es una interfaz diferente con patrones de interacción distintos. La documentación también necesita cambiar.

“Cuando piensas en depuración de rendimiento en la documentación, dirías: ve al panel de rendimiento y haz una traza, luego mira ese flame graph en particular”, explicó Michael. “Para DevTools para agentes sería: ve a esta página, inicia una traza, elige ese insight en particular, quizás ejecutaevaluate_script para entender mejor qué está pasando. Es una forma diferente de interactuar con las herramientas.”

Si instalas Chrome DevTools MCP como plugin de Claude Code o extensión de Gemini CLI, los skills se registran automáticamente junto con las herramientas. El equipo está añadiendo más activamente para depuración de rendimiento, auditoría de accesibilidad y depuración de extensiones. Michael está siguiendo de cerca la propuesta de incorporar skills a la especificación de MCP.

“Ahora mismo, esas dos tecnologías son distintas”, dijo. “La percepción es que compiten, pero creo que son complementarias.” Rachel-Lee comparó las herramientas y los skills con las alas y el conocimiento de cómo volar. Los skills le enseñan al agente cómo aletear, planear y lanzarse en picada.

Modo CLI, depuración de memoria y depuración de extensiones en Chrome DevTools MCP

Michael compartió algunos puntos destacados de Chrome DevTools MCP:

CLI wrapper para ejecución de código. El equipo está construyendo una interfaz de línea de comandos que expone las herramientas de Chrome DevTools MCP como comandos CLI. ¿Por qué importa esto? Porque los agentes de código son muy buenos escribiendo scripts de bash y código Python. En lugar de pasar un snapshot de accesibilidad enorme por la ventana de contexto, un agente podría canalizar la salida a través degrep y agregar solo el 10% que le importa. Michael hizo referencia a el post de ingeniería de Anthropic sobre ejecución de código con MCP, que plantea lo mismo: deja que los agentes escriban código que llame herramientas en lugar de enrutar todo a través de inferencia.

Depuración de memoria. Los heap snapshots están llegando ahora, lo que permite a los agentes ayudar a investigar fugas de memoria, una tarea de depuración notoriamente difícil que la mayoría de los desarrolladores no hace con suficiente frecuencia como para construir experiencia profunda. “Creo que con los agentes de AI, tenemos la oportunidad de hacer eso mucho más accesible.”

Depuración de extensiones de Chrome. Actualmente complicado con el servidor MCP, pero el equipo lo está convirtiendo en un ciudadano de primera clase. Si estás construyendo extensiones de Chrome con un agente de código hoy, la parte difícil es validar que funcionen. Eso está por volverse más fácil.

Más skills. Depuración de memoria, auditoría de accesibilidad y más, con el objetivo de guiar a los agentes en flujos de trabajo que son difíciles de descubrir solo con las descripciones de las herramientas.

Empieza con Chrome DevTools MCP

Instala Chrome DevTools MCP para Claude Code, VS Code, Gemini CLI, Cursor, Codex, Cline, JetBrains y más con 1-2 líneas de código en github.com/ChromeDevTools/chrome-devtools-mcp

Para estar al día con las nuevas funciones, sigue la página de notas de versión de Chrome DevTools (tiene un feed RSS) y el repositorio de GitHub para los releases. Si quieres contribuir, el proyecto es open source y recibe activamente solicitudes de funciones, reportes de bugs y pull requests.

Encuentra a Michael en Bluesky, LinkedIn y X. Su sitio personal es hablich.dev.

MCP MVP es una serie de videos de Arcade.dev con RL Nabors que destaca a los creadores que dan forma al ecosistema agéntico. Mira la entrevista completa con Michael Hablich →

¿Quieres darle a tus agentes acceso autenticado a APIs sin gestionar tokens tú mismo? Mira cómo Arcade maneja OAuth para herramientas MCP.