Chrome DevTools MCP: depuración web potenciada con IA

Piensa en tu sitio web como un recurso que necesita atención y mantenimiento de forma periódica. Cuando algo falla, o si notas que va un poco lento, necesitas herramientas de diagnóstico para entender qué se ha roto, por qué se ha roto y cómo arreglarlo. Tradicionalmente, eso ha significado aprender a usar Chrome DevTools, nuestra herramienta de referencia para todo lo que ocurre en el navegador.

---

El servidor Model Context Protocol (MCP) de Chrome DevTools cambia por completo la forma de abordar todo esto. En lugar de interpretar manualmente las gráficas en cascada y los errores de consola, ahora puedes preguntar a Claude: "¿Por qué mi entrada del blog carga tan lento?" y obtener un análisis de nivel experto con recomendaciones específicas y accionables.

Chrome en uso a través del chrome dev tools mcp

Esto no va de sustituir tus habilidades técnicas: va de amplificarlas y hacerte mucho más productivo. Piensa en ello como tener a un ingeniero de rendimiento web sentado a tu lado, dispuesto a explicarte qué significa cada métrica y qué deberías hacer al respecto.

Antes de empezar:

¿Qué es el Model Context Protocol?

El Model Context Protocol es un estándar de código abierto que conecta grandes modelos de lenguaje como Claude con herramientas y fuentes de datos externas. Piénsalo como un puente que permite a los asistentes de IA interactuar con aplicaciones reales en lugar de limitarse a procesar texto.

En Converly llevamos construyendo servidores MCP desde que se lanzó el protocolo. Nuestro kit de herramientas actual incluye:

• converly-lm: enrutamiento y comparación de modelos de lenguaje
• gemini-mcp: integración de la API de Gemini de Google para investigación y análisis
• brevo-mcp: automatización de email marketing y datos de clientes
• Más por llegar: ampliamos constantemente nuestras capacidades MCP

Cada servidor da a Claude acceso a herramientas y datos específicos, pero el MCP de Chrome DevTools resulta especialmente emocionante porque resuelve un problema fundamental: los agentes de IA han estado programando con los ojos vendados. Yo llevo trabajando en este problema usando Puppeteer, que viene incluido con el SDK de MCP, pero este método es mucho más limpio y consume mucha menos ventana de contexto.

Presentamos Chrome DevTools MCP

Vídeo 3

El servidor MCP de Chrome DevTools de Google lleva las herramientas de depuración de Chrome a tu asistente de IA.

En lugar de hacer manualmente:

• Abrir DevTools
• Ejecutar trazas de rendimiento
• Interpretar las cascadas de red
• Analizar los errores de consola
• Cruzar referencias entre distintos paneles

Ahora puedes pedir a Claude que haga todo esto de forma automática y que te explique los resultados en lenguaje claro.

Esto es potente porque marca la diferencia entre saber que tu LCP es de 4,2 segundos y entender que se debe a una imagen hero no optimizada que necesita conversión a WebP y tamaños responsive.

Instalación

Si no sabes cómo instalar un servidor MCP, he escrito una guía muy rápida para ti.

Añade esto a la configuración de tu cliente MCP:

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

Pruébalo pidiendo a Claude: "Comprueba el LCP de web.dev"

Casos de uso para el MCP de Chrome DevTools

Obviamente, la gente de SEO, desarrollo web y contenidos usa Chrome DevTools; estas son algunas de las ideas que Claude y yo tuvimos sobre cómo usar el MCP:

1. Análisis y depuración de Core Web Vitals

• Problemas de LCP: identificar automáticamente imágenes hero de carga lenta y recursos que bloquean el renderizado
• Problemas de CLS: encontrar cambios de layout por anuncios, imágenes sin dimensiones o contenido dinámico
• INP/respuesta: depurar ejecuciones lentas de JavaScript que bloquean las interacciones del usuario
• Monitorización en tiempo real: obtener métricas CWV en vivo sin navegar manualmente por DevTools

2. Auditoría SEO de JavaScript

• Detección de errores de consola: encontrar errores de JavaScript que bloquean el renderizado del contenido
• Contenido del lado cliente frente al del servidor: verificar qué ve realmente Googlebot frente al contenido renderizado por completo
• Comparación de renderizado: comparar el código fuente HTML con el contenido final renderizado por JavaScript
• Análisis de contenido oculto: detectar texto oculto vía CSS (display:none, visibility:hidden)

3. Validación de SEO técnico

• Extracción de metaetiquetas: extraer y verificar automáticamente títulos, descripciones y etiquetas robots en todas las páginas
• Análisis de datos estructurados: inspeccionar la implementación de JSON-LD y microdata a escala
• Validación de etiquetas canónicas: comprobar canonicals autorreferenciados y conflictos
• Verificación de hreflang: validar automáticamente la configuración de segmentación internacional

4. Análisis de la cascada de rendimiento

• Automatización del panel de red: identificar CSS/JS que bloquean el renderizado sin inspección manual
• Análisis de TTFB: detectar tiempos de respuesta lentos del servidor en varias páginas
• Optimización de recursos: encontrar imágenes sobredimensionadas, código sin usar y patrones de carga ineficientes
• Impacto de scripts de terceros: medir automáticamente el rendimiento de widgets externos

5. Pruebas móviles y responsive

• Automatización del modo dispositivo: probar distintos tamaños de viewport sin cambiar manualmente
• Validación de objetivos táctiles: asegurar que botones y enlaces cumplen los estándares de usabilidad móvil
• Limitación de red: simular conexiones 3G/4G lentas de forma programada
• Indexación mobile-first: verificar automáticamente que la experiencia móvil coincide con la de escritorio

Dónde lo cambia todo

En general, opino que las aplicaciones asistidas por IA serán rutinarias en nuestro mundo laboral muy, muy pronto. También creo que es posible que una sola interfaz gobierne a todas. Con los MCP puedes acceder a los servicios SaaS a los que estás suscrito, crear librerías de prompts para procedimientos más complejos y guionizados (más sobre esto muy pronto), hablar con el mundo real con MCP para Gmail, Brevo… es alucinante cuando empiezas a darte cuenta del poder del cambio que estamos presenciando.

En fin, aquí va una idea interesante para empezar con Claude Desktop y el MCP de Chrome DevTools.

Creación de un panel de rendimiento

Prompt:

"Run a comprehensive performance audit on /recursos/blog/how-to-add-an-mcp-server-to-claude-desktop 
with chrome dev tools mcp and create an interactive dashboard as an artifact showing:

1. Core Web Vitals with color-coded status
2. Performance timeline with bottleneck highlights  
3. Priority fix list with estimated impact
4. Before/after comparison capability
5. Export functionality for client reports

Make it professional enough to show to stakeholders."

Estoy bastante seguro de que ese prompt se puede refinar mucho, pero en el primer intento ya arroja mucha información útil. Creo que está bastante claro que tengo mucho que aprender de CSS:

Comparaciones con la competencia

Prompt:

"Use chrome dev tools mcp to inspect and compare the JSON-LD implementation at these competitor product pages:

https://www.scan.co.uk/products/fanatec-csl-dd-qr2-8nm-wheel-base-8nm-torque-fluxbarrier-technology-hall-position-sensor
https://www.overclockers.co.uk/fanatec-csl-dd-bk180-qr2l-bundle-for-racing-sims-gam-crs-05527.html

Ambos informes son mucho más largos y los datos en bruto son perfectamente accesibles. Estas ideas se desarrollan con facilidad: podrías guardar los datos como un artifact y añadirlos al conocimiento del proyecto para que los analice otro MCP, por ejemplo. Ahí entramos ya en el territorio de los flujos de trabajo con IA, del que hablaré muy pronto. ¡Disfrutad!