Aprende cómo configurar y usar el MCP de Chrome DevTools con Claude Code para tener un workflow de trabajo más cómodo al hacer bug fixing y auditorías de nuestras aplicaciones web.
Recientemente Google lanzó un MCP para usar las Chrome DevTools con nuestros agentes o asistentes de IA.
Vamos a hacer unos ejercicios para explorar las tools disponibles de este MCP.
¿Qué necesitamos?
Configuración del cliente MCP en Claude Code
Lo primero que vamos a hacer es clonar este repositorio y abrirlo en nuestra terminal o editor.
Para este post puedes usar cualquier asistente o editor que permita agregar MCPs. En mi caso voy a usar Claude Code y simplemente debo usar el siguiente comando:
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code por defecto agrega el MCP de Chrome DevTools en un scope local (settings personales), si este MCP será parte de tu workflow debería ser agregado con un scope a nivel proyecto, para compartirlo con tu equipo. Detalles adicionales sobre los scopes de Claude Code.
También puedes agregar la configuración de manera manual en tu cliente:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Te sugiero revisar la sección de instalación del MCP de Chrome DevTools.
Probando el MCP de Chrome DevTools
Piensa en tu web favorita (yo usaré web.dev) y vamos a hacerle una auditoría de performance usando el siguiente prompt: “Analiza el performance de la página web.dev”. También puedes hacerlo en inglés.
Dependiendo de la herramienta que uses será lo que visualices, pero al final se abrirá un navegador y se te entregará un resumen de tu petición.
También podemos configurar nuestro MCP en modo headless e isolated, de forma que la ventana que se abre no sea visible. Si usas Claude Code, este archivo estará en el .claude.json en tu carpeta de usuario.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--headless=true",
"--isolated=true"
]
}
}
}
Herramientas del MCP
Hay una serie de herramientas que nos provee el MCP de Chrome DevTools agrupadas en diferentes categorías:
- Input automation
- Navigation automation
- Emulation
- Performance
- Network
- Debugging
Para más detalles puedes revisar la documentación.
Demo
Vamos a hacer algo más interesante, en el repositorio que clonamos previamente hay una aplicación que simplemente muestra una lista de Pokémon. La preparé especialmente para tener dos tipos de problemas:
- Accesibilidad
- Performance
Vamos a ejecutar un npm install para empezar y posteriormente un npm run dev.
Auditando accesibilidad de nuestro proyecto de ejemplo
Vamos a escribir el prompt
Audit and Fix all accessibility issues in localhost:3000. Ensure proper server/client component architecture. If you need interactivity or client-side logic, extract into a separate client component
Directamente el MCP de Chrome DevTools no incluye una herramienta para auditar accesibilidad, pero nuestro cliente hace uso de las tools para cumplir su objetivo.
En este caso hace uso de las siguientes:
- navigate_page.
- take_snapshot: Para obtener el HTML actual de la página
- evaluate_script: Para ejecutar el script que nuestro cliente creó para hacer la auditoría.
- list_console_messages: Para obtener los mensajes de la consola resultado de la auditoría.
Auditando performance de nuestro proyecto de ejemplo
Esta va a ser un poco diferente ya que necesitamos primero hacer un build de la aplicación y correr el servidor (esto depende de la herramienta que usemos; en algunos casos puede ser ejecutado en un solo prompt).
Ejecutamos los siguientes comandos
npm run build
npm run start
En nuestro cliente mandamos el siguiente prompt
Run performance audit of localhost:3000 and fix problems. Don’t run audit a second time
El texto adicional lo agregamos porque va a correr otra auditoría, pero no puede o no debe hacer eso porque necesitamos construir y optimizar primero.
Después de volver a construir, podemos ejecutar el siguiente prompt
Make a performance audit of localhost:3000 and compare with the results of the previous audit
En mi caso, estos fueron los resultados
Conclusiones
El MCP de Chrome es interesante, aunque algunas de las tareas que hace ya podíamos hacerlas con el MCP de Playwright, creo que la parte de performance y hacer auditorías es bastante valiosa, no es que este MCP lo vaya a reemplazar, ya que tienen objetivos distintos.
Eventualmente espero que se agreguen nuevas herramientas para hacer auditorías de accesibilidad y que faciliten el proceso de cómo definir nuestras propias reglas. Esto se puede hacer ya directamente con Lighthouse, pero requiere de conocimiento técnico más especializado.
Si quieres saber más sobre algunos de los conceptos/herramientas vistos en este post, te recomiendo algunos cursos como:
Si llegaste hasta aquí, gracias, espero que hayas aprendido algo nuevo, que experimentes con este MCP y que compartas conmigo en los comentarios tus resultados.
Curso de MCP con Microsoft Azure
