Chrome DevTools para agentes de AI (MCP)

• Con el lanzamiento de la vista previa pública del servidor Chrome DevTools MCP, los agentes de codificación con AI ahora pueden usar las funciones de depuración y rendimiento de Chrome DevTools
• Antes, los agentes no podían verificar los resultados de ejecución del código, pero ahora pueden aprovechar datos reales de tiempo de ejecución como red, consola, DOM y trazas de rendimiento
• Con el servidor DevTools MCP es posible habilitar varias automatizaciones, como validación de código en tiempo real, análisis de errores de red y consola, simulación de acciones del usuario, depuración de estilos y layout y auditorías automáticas de rendimiento
• Los desarrolladores pueden empezar a usarlo de inmediato agregando el servidor a la configuración de su cliente MCP, y ejecutar ejemplos de prompts como verificar el LCP o diagnosticar errores al enviar formularios
• Google planea ampliar las capacidades de MCP con base en la retroalimentación de la comunidad

---

Resumen general

• Google lanzó la vista previa pública de un nuevo servidor Chrome DevTools Model Context Protocol (MCP)
• Esto permite crear un entorno en el que los asistentes de codificación con AI pueden usar directamente en el navegador las funciones de depuración y medición de rendimiento de Chrome DevTools
• En otras palabras, ayuda a resolver la dificultad que tenían los agentes de codificación al no poder comprobar el comportamiento real del código que se ejecuta en el navegador

Introducción al Model Context Protocol (MCP)

• El Model Context Protocol (MCP) es un estándar open source para conectar modelos de lenguaje grandes (LLM) con herramientas externas y fuentes de datos
• El servidor Chrome DevTools MCP aprovecha este estándar para integrarse con agentes de AI y permitir el uso de diversas herramientas, como depuración web y trazado de rendimiento
• Por ejemplo, con la herramienta performance_start_trace, un LLM puede abrir el navegador, recopilar y analizar información de rendimiento, y sugerir mejoras
• A través del protocolo MCP, los agentes de codificación obtienen un soporte más potente para el desarrollo y la resolución de problemas en sitios web
• Puedes consultar cómo funciona MCP en detalle en la documentación oficial de MCP

Casos de uso principales

• Validación de cambios de código en tiempo real

  • Después de modificar el código, un agente de AI puede verificar de inmediato el comportamiento en el navegador mediante Chrome DevTools MCP
  • Prompt de ejemplo:

    Verify in the browser that your change works as expected.  
    

• Diagnóstico de errores de red y consola

  • Ofrece diagnóstico automático mediante análisis de solicitudes de red, detección de problemas de CORS y revisión de logs de consola
  • Prompt de ejemplo:

    A few images on localhost:8080 are not loading. What's happening?  
    

• Simulación del comportamiento del usuario

  • Ayuda con pruebas automáticas de flujos reales de uso dentro del navegador, como navegar, llenar formularios y hacer clic en botones, además de reproducir bugs
  • Prompt de ejemplo:

    Why does submitting the form fail after entering an email address?  
    

• Depuración en tiempo real de problemas de estilos y layout

  • Proporciona automáticamente sugerencias detalladas sobre inspección de DOM y CSS y problemas de layout como overflow
  • Prompt de ejemplo:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• Automatización de auditorías de rendimiento

  • Automatiza y analiza el trazado de rendimiento del navegador
  • Prompt de ejemplo:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• La lista de herramientas MCP disponibles puede consultarse en la documentación oficial de referencia de herramientas

Cómo empezar

• Puedes integrar el servidor Chrome DevTools MCP agregando la siguiente configuración al cliente MCP

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

• Puedes comprobar su funcionamiento con un prompt de ejemplo

  Please check the LCP of web.dev.  
  

• Más información y documentación están disponibles en la documentación de Chrome DevTools MCP en GitHub

Participación y plan de expansión

• Google planea seguir desarrollando gradualmente Chrome DevTools MCP a partir de este lanzamiento en vista previa pública
• Tiene previsto decidir futuras funciones adicionales a partir de la recopilación de opiniones de la comunidad
• Da una cálida bienvenida a las opiniones y la participación tanto de usuarios de herramientas de apoyo a la codificación con AI como de proveedores de herramientas de desarrollo de AI de nueva generación
• Las solicitudes de mejora o problemas detectados pueden reportarse a través de GitHub Issues

[shakespeares]

Me pregunto si hay casos de uso en los que sea mejor que Playwright.
A simple vista, parece que deja un poco que desear.