Publicado el 23 de septiembre de 2025
Hoy lanzamos una versión preliminar pública del nuevo servidor del Protocolo de contexto del modelo (MCP) de las Herramientas para desarrolladores de Chrome, que lleva la potencia de las Herramientas para desarrolladores de Chrome a los asistentes de programación basados en IA.
Los agentes de codificación se enfrentan a un problema fundamental: no pueden ver lo que el código que generan realmente hace cuando se ejecuta en el navegador. Es como programar con los ojos vendados.
El servidor de MCP de las Herramientas para desarrolladores de Chrome cambia esto. Los asistentes de programación con IA pueden depurar páginas web directamente en Chrome y aprovechar las capacidades de depuración y las estadísticas de rendimiento de las Herramientas para desarrolladores. Esto mejora su precisión a la hora de identificar y corregir problemas.
Comprueba por tu cuenta cómo funciona:
¿Qué es el Protocolo de contexto del modelo (MCP)?
El Protocolo de contexto del modelo (MCP) es un estándar de código abierto para conectar modelos de lenguaje grandes (LLM) a herramientas externas y fuentes de datos. El servidor de MCP de Herramientas para desarrolladores de Chrome agrega capacidades de depuración a tu agente de IA.
Por ejemplo, el servidor de MCP de las Herramientas para desarrolladores de Chrome proporciona una herramienta llamada performance_start_trace. Cuando se le pide que investigue el rendimiento de tu sitio web, un LLM puede usar esta herramienta para iniciar Chrome, abrir tu sitio web y usar las Herramientas para desarrolladores de Chrome para registrar un seguimiento del rendimiento. Luego, el LLM puede analizar el registro de rendimiento para sugerir posibles mejoras. Con el protocolo de MCP, el servidor de MCP de las Herramientas para desarrolladores de Chrome puede brindar nuevas capacidades de depuración a tu agente de programación para que sea mejor en la creación de sitios web.
Si quieres obtener más información sobre cómo funciona el MCP, consulta la documentación del MCP.
¿Para qué puedes usarla?
A continuación, se incluyen algunos ejemplos de instrucciones que puedes probar en el asistente de IA que elijas, como la CLI de Gemini.
Verifica los cambios de código en tiempo real
Genera una corrección con tu agente de IA y, luego, verifica automáticamente que la solución funcione según lo previsto con el MCP de las Herramientas para desarrolladores de Chrome.
Instrucción para probar:
Verify in the browser that your change works as expected.
Diagnostica errores de red y de la consola
Permite que tu agente analice las solicitudes de red para descubrir problemas de CORS o inspeccionar los registros de la consola para comprender por qué una función no funciona según lo esperado.
Instrucción para probar:
A few images on localhost:8080 are not loading. What's happening?
Simula el comportamiento del usuario
Navega, completa formularios y haz clic en botones para reproducir errores y probar flujos de usuarios complejos, todo mientras inspeccionas el entorno de ejecución.
Instrucción para probar:
Why does submitting the form fail after entering an email address?
Depura problemas de diseño y estilo en vivo
Pídele a tu agente de IA que se conecte a una página activa, inspeccione el DOM y el CSS, y obtenga sugerencias concretas para solucionar problemas de diseño complejos, como elementos desbordados, en función de los datos activos del navegador.
Instrucción para probar:
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatiza las auditorías de rendimiento
Indícale a tu agente de IA que ejecute un registro de rendimiento, analice los resultados y que investigue problemas de rendimiento específicos, como números altos de LCP.
Instrucción para probar:
Localhost:8080 is loading slowly. Make it load faster.
Consulta nuestra documentación de referencia de herramientas para ver una lista de todas las herramientas disponibles.
Comenzar
Para probarlo, agrega la siguiente entrada de configuración a tu cliente de MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Para verificar si funciona, ejecuta la siguiente instrucción en tu agente de programación:
Please check the LCP of web.dev.
Para obtener más detalles, consulta la documentación del MCP de Chrome DevTools en GitHub.
Participa
Estamos creando el MCP de las Herramientas para desarrolladores de Chrome de forma incremental, comenzando con la versión de vista previa pública que lanzaremos hoy. Estamos buscando activamente comentarios tuyos y de la comunidad sobre qué capacidades deberíamos agregar a continuación. Ya sea que seas desarrollador y uses asistentes de programación basados en IA o proveedor y crees la próxima generación de herramientas de desarrollo basadas en IA, tus estadísticas serán muy valiosas. Si falta algo o no funciona, presenta un problema en GitHub.