Chrome DevTools MCP: automatización y depuración del navegador con IA

Para profundizar en los agentes de IA y entender cómo herramientas como Chrome DevTools MCP encajan en el panorama general, explora el curso Introduction to AI Agents de DataCamp o el itinerario de habilidades AI Agent Fundamentals.

Chrome DevTools MCP es un servidor oficial de Model Context Protocol del equipo de Chrome DevTools que permite a los asistentes de código con IA controlar Chrome mediante lenguaje natural. En lugar de escribir scripts, le dices a tu asistente de IA lo que quieres (“navega a esta página y comprueba si hay errores en la consola” o “rellena este formulario y haz una captura”) y se encarga de los detalles técnicos.

El servidor te da acceso a potentes herramientas de automatización y depuración del navegador. Está construido sobre Puppeteer, así que es fiable y se ejecuta completamente en tu máquina. No tienes que escribir ni una línea de código de Puppeteer.

En este tutorial aprenderás a usar este servidor MCP con asistentes de código con IA como Claude, Cursor y Cline. Veremos la instalación y la configuración y después pasaremos a las capacidades principales: automatización del navegador, depuración e inspección. A lo largo del artículo usaremos Conduit (demo.realworld.io), una plataforma de blogs al estilo Medium, para demostrar ejemplos reales.

Si es tu primera vez con Model Context Protocol, te recomiendo este completo tutorial de MCP para profundizar en cómo MCP conecta los modelos de IA con herramientas externas. También puedes consultar nuestro tutorial de Claude para Chrome y nuestra guía de los mejores navegadores con IA. Si buscas otro enfoque para las automatizaciones de navegador con IA, lee nuestro tutorial de ChatGPT Atlas.

Resumen rápido

• Chrome DevTools MCP es un servidor MCP oficial que permite a los asistentes de código con IA controlar Chrome con lenguaje natural

• Expone 26 herramientas en 6 categorías: automatización de entrada, navegación, depuración, red, rendimiento y emulación

• Instala con claude mcp add chrome-devtools npx chrome-devtools-mcp@latest para Claude Code (otros clientes tienen una configuración similar)

• Automatiza tareas del navegador como navegar, rellenar formularios y hacer capturas de pantalla sin escribir scripts de Puppeteer

• Depura apps web inspeccionando errores de consola, solicitudes de red y ejecutando JavaScript—todo mediante conversación

• Construye frontends de forma iterativa dejando que la IA haga capturas para verificar su propio trabajo en cada paso

¿Qué es Chrome DevTools MCP?

Así es como funciona la arquitectura por dentro.

El servidor expone 26 herramientas organizadas en 6 categorías:

• Automatización de entrada (7 herramientas): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navegación (7 herramientas): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Depuración (4 herramientas): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Red (2 herramientas): list_network_requests, get_network_request
• Rendimiento (3 herramientas): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Emulación (3 herramientas): emulate_cpu, emulate_network, resize_page

La automatización del navegador se vuelve conversacional. En lugar de escribir scripts de Puppeteer y depurar selectores CSS, describes en lenguaje natural lo que quieres. El asistente de IA resuelve los detalles técnicos.

Chrome DevTools MCP vs. enfoques tradicionales

Con estas herramientas, tu asistente de IA puede ayudarte a:

• Construir frontends de forma iterativa dejando que tu agente haga capturas en cada paso
• Probar flujos de usuario de extremo a extremo, como registrarse, recorrer funciones y verificar que cada paso funciona
• Depurar problemas comprobando errores de consola y solicitudes de red sin abrir DevTools manualmente
• Automatizar la documentación visual tomando capturas de distintas páginas o estados de la app
• Extraer datos de páginas web ejecutando JavaScript directamente en el contexto de la página

Todo esto se desencadena mediante comandos en lenguaje natural en lugar de escribir scripts de Puppeteer.

Chrome DevTools MCP funciona con Claude Desktop, Cursor, Cline y VSCode Copilot. Como es un servidor MCP más entre muchos, puedes combinarlo con otros—como acceso al sistema de archivos, herramientas de bases de datos y APIs—para crear flujos de trabajo que abarquen varias herramientas.

Instalación y configuración de Chrome DevTools MCP

Necesitarás unas cuantas cosas:

• Node.js y npm instalados en tu máquina
• Un asistente de código con IA compatible con MCP (usaremos Claude Code en este tutorial)
• Navegador Chrome (Puppeteer se encarga de esto automáticamente, así que no necesitas configurar nada)

Tener nociones básicas de las DevTools del navegador ayuda, pero no es obligatorio.

Instalar Chrome DevTools MCP

Chrome DevTools MCP se ejecuta a través de la configuración MCP de tu asistente de IA. La configuración varía ligeramente según el asistente que uses. Te mostraremos cómo instalarlo para Claude Code, pero otros editores como Cursor, Cline y VSCode Copilot tienen enfoques similares.

Para Claude Code, ejecuta este comando en tu terminal:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latestCon la tecnología de

Este comando registra el servidor Chrome DevTools MCP en Claude Code. El servidor se ejecuta mediante npx, que descarga y ejecuta el paquete sin requerir una instalación permanente. @latest garantiza que obtengas la versión más reciente.

Después de ejecutar el comando, reinicia Claude Code para cargar el nuevo servidor.

Si usas otro asistente de código con IA

Otros clientes MCP tienen métodos de instalación similares—algunos usan comandos, otros archivos de configuración o botones de instalación en un clic. Consulta la página de GitHub de Chrome DevTools MCP para instrucciones específicas de Cursor, Cline, Gemini CLI, Windsurf y otros clientes compatibles.

Probar tu configuración

Vamos a verificar que todo funciona con un comando sencillo:

Navega a demo.realworld.io y haz una captura de pantallaCon la tecnología de

Deberías ver:

• Se inicia Chrome (verás la ventana del navegador salvo que hayas configurado el modo sin interfaz)
• Carga la página de inicio de Conduit
• Tu asistente de IA captura y muestra una captura de pantalla

Si algo falla, revisa estos problemas comunes:

• Versión de Node.js: Chrome DevTools MCP requiere Node.js v20.19 o superior
• Permisos de npm: asegúrate de que npm puede instalar paquetes
• Reinicio necesario: tu asistente de IA debe reiniciarse tras cambios de configuración
• Ubicación del archivo de config: verifica que editaste el archivo de ajustes MCP correcto para tu asistente

Fundamentos de la automatización del navegador

Chrome DevTools MCP te ofrece seis herramientas clave para interactuar con páginas web. Usa navigate_page para cargar URLs, click para interactuar con elementos, fill y fill_form para introducir texto, hover para activar efectos hover y take_screenshot para capturar lo que ves. Estas herramientas cubren la mayoría de tareas de automatización del navegador con las que te toparás.

Navegación y capturas

Vamos a cargar una página. Dile a tu asistente de IA:

Navega a demo.realworld.ioCon la tecnología de

La IA usa la herramienta navigate_page, se abre Chrome y carga la página de inicio de Conduit. Verás la ventana del navegador salvo que hayas configurado el modo sin interfaz.

Para documentar lo que ves, simplemente pide:

Haz una captura de pantalla de la página de inicioCon la tecnología de

La IA captura la página actual con take_screenshot y te muestra el resultado. Es útil para documentación visual o para verificar que la página se ve correcta.

Interacción con elementos

Puedes interactuar con cualquier elemento de la página sin escribir selectores CSS ni inspeccionar IDs. Describe lo que quieres:

Haz clic en el enlace Sign inCon la tecnología de

La IA identifica a qué elemento te refieres y hace clic con la herramienta click. Se carga la página de inicio de sesión.

También puedes pasar el ratón por encima de elementos:

Pasa el ratón sobre el enlace Sign upCon la tecnología de

La IA usa la herramienta hover. Si hay un tooltip o un menú desplegable, aparecerá.

Relleno de formularios

Los formularios suelen ser tediosos si escribes scripts. Con Chrome DevTools MCP, basta con describir lo que quieres rellenar.

Rellena un campo cada vez:
Rellena el campo de email con [email protected]
Rellena el campo de contraseña con testpass123
O rellena varios campos a la vez:
Rellena el formulario de inicio de sesión con el email [email protected] y la contraseña testpass123Con la tecnología de

La IA usa fill_form para gestionar todos los campos de una sola vez. Así queda el formulario rellenado:

La IA identifica los campos correctos según tu descripción. No tocas el HTML.

Depuración e inspección

Chrome DevTools MCP te da tres herramientas clave para depurar: list_console_messages para ver la salida de consola, list_network_requests para ver la actividad de red y evaluate_script para ejecutar JavaScript y extraer datos de las páginas.

Cuando usas estas herramientas a través de tu asistente de IA, mantienes una conversación. Haces preguntas en lenguaje natural y la IA las traduce en llamadas a herramientas MCP por debajo.

Así es como se ve:

El asistente de IA entiende tu intención y ejecuta las herramientas de Chrome DevTools adecuadas, luego presenta los resultados de forma legible. Veamos cómo funciona en la práctica.

Inspección de la consola

Los errores de consola suelen ser el primer sitio donde mirar cuando algo falla. En lugar de abrir DevTools manualmente, pídele a tu asistente de IA:

Navega a demo.realworld.io y comprueba si hay errores en la consolaCon la tecnología de

La IA carga la página y consulta la consola con list_console_messages. Esto es lo que encuentra:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policyCon la tecnología de

Estos errores de CORS (Cross-Origin Resource Sharing)—son una característica de seguridad del navegador que limita que las páginas web hagan solicitudes a dominios distintos—y explican por qué la página muestra “Loading articles…” y “Loading tags…” en lugar de contenido real:

Puedes profundizar pidiéndole a la IA que filtre e interprete estos mensajes:

¿Hay algún error o advertencia en esta página?Con la tecnología de

La IA analiza la salida de la consola y te dice: “Sí, hay dos errores CORS que bloquean las solicitudes de API de artículos y etiquetas.”

Esto te da visibilidad inmediata de lo que está fallando sin abrir manualmente la consola de DevTools.

Resumen de solicitudes de red

Los errores de consola suelen apuntar a problemas de red. Para entender qué está pasando realmente con tus solicitudes, revisa la actividad de red:

Muéstrame qué solicitudes de red se hacen en la página de inicioCon la tecnología de

La IA usa list_network_requests y devuelve una lista de todas las solicitudes. Verás solicitudes correctas (CSS, fuentes, archivos JavaScript) y las que han fallado:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]Con la tecnología de

Haz preguntas de seguimiento para profundizar:

¿Hay solicitudes fallidas?Con la tecnología de

La IA filtra la lista e identifica el problema: “Sí, cuatro solicitudes de API han fallado. Dos devolvieron redirecciones 307 y dos fallaron por completo con errores ERR_FAILED.”

Esto te ayuda a detectar problemas rápidamente sin revisar manualmente la pestaña Network.

Ejecución de JavaScript y extracción de datos

Más allá de ver la consola y los datos de red, puedes ejecutar código directamente en la página para comprobar su estado o extraer información. Usa evaluate_script para ello:

Comprueba si hay artículos mostrados en la página de inicioCon la tecnología de

La IA ejecuta JavaScript para contar elementos de artículo:

const articles = document.querySelectorAll('.article-preview');
return articles.length;Con la tecnología de

Resultado: “No hay artículos mostrados. La página muestra ‘Loading articles…’, lo que sugiere que los errores de la API impiden que se cargue el contenido.”

También puedes extraer datos más complejos:

Obtén el título de la página y el texto del encabezado principalCon la tecnología de

La IA evalúa:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};Con la tecnología de

Resultado: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Esto te permite verificar contenido, extraer datos estructurados o comprobar que los elementos dinámicos se cargan bien. Las herramientas take_screenshot y take_snapshot complementan esto capturando documentación visual y estructural cuando lo necesites.

Estas tres capacidades de depuración trabajan de forma natural juntas. Empieza con los mensajes de consola para detectar errores, revisa las solicitudes de red para entender qué falló y luego usa la evaluación de JavaScript para verificar cómo afectan esos fallos a la página, todo mediante una conversación con tu asistente de IA—sin cambiar de herramientas ni escribir scripts de inspección.

Creación de frontends web con Chrome DevTools MCP

Los asistentes de IA pueden construir interfaces web, pero no pueden ver lo que crean. Al final terminas haciendo capturas manualmente y pidiendo ajustes.

Chrome DevTools MCP cambia esto. La IA hace sus propias capturas, verifica maquetaciones y itera hasta que todo quede bien.

Vamos a construir un clon de ChatGPT con Streamlit. Necesitarás una clave de la API de OpenAI. Proporciónasela a tu asistente de IA al ejecutar el prompt para que pueda verificar que la app funciona correctamente. Aquí tienes el prompt:

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.Con la tecnología de

La IA crea la app con una barra lateral y hace una captura para verificar el diseño inicial:

La barra lateral incluye la introducción de la clave de API, los botones Clear Chat y New Chat, y un contador de mensajes en 0. Con la interfaz lista, veamos si el chat funciona.

Prueba con una pregunta sencilla:

El chat responde correctamente y el contador muestra dos mensajes (en la siguiente captura). ¿Puede manejar conversaciones de varios turnos?

Probando el contexto de conversación:

La IA recuerda el intercambio anterior. Ahora toca verificar la función Clear Chat.

Al hacer clic en el botón Clear Chat:

El chat se borra correctamente y el contador vuelve a 0.

Iniciando un chat nuevo:

Perfecto. La IA construyó un clon funcional de ChatGPT, verificó el aspecto en cada paso y probó todas las funciones sin intervención humana.

Esto funciona con cualquier framework: React, Vue, Svelte o HTML puro. La IA verifica maquetaciones, prueba interacciones y detecta errores antes de que veas el código.

Conclusión y próximos pasos

Chrome DevTools MCP te ofrece automatización del navegador mediante conversación. Describes lo que quieres y tu asistente de IA se encarga de los detalles técnicos. Sin scripts, sin depurar selectores.

En este artículo hemos visto lo básico: instalar el servidor, navegar por páginas, rellenar formularios, hacer clic en elementos y tomar capturas. Luego pasamos a la depuración con inspección de consola, monitorización de red y ejecución de JavaScript. Por último, vimos cómo estas herramientas se combinan para construir frontends donde la IA puede ver lo que crea.

¿Qué probar a continuación?

Empieza navegando a un sitio en el que estés trabajando y pide a tu IA que compruebe errores de consola o inspeccione solicitudes de red. Si usas Claude Code, nuestra guía de buenas prácticas de Claude Code cubre patrones de prompting eficaces para el uso de herramientas. Toma capturas de diferentes estados. Prueba el envío de formularios.

Luego combina varias herramientas: navega a una página, rellena un formulario, envíalo y captura el resultado. Revisa los mensajes de consola, lista las solicitudes de red fallidas y ejecuta JavaScript para verificar el estado de la página.

Cuando te sientas cómodo con lo básico, crea un pequeño componente de interfaz con tu IA y deja que verifique el diseño en cada paso. Verás cómo detecta problemas visuales antes de que los revises manualmente.

Para rendimiento, usa las herramientas de performance (performance_start_trace, performance_stop_trace, performance_analyze_insight) para perfilar tiempos de carga e identificar cuellos de botella. Usa las herramientas de emulación (emulate_cpu, emulate_network, resize_page) para probar en distintas condiciones.

Chrome DevTools MCP es un servidor más entre muchos. Combínalo con servidores de sistema de archivos, herramientas de bases de datos o integraciones de API para crear flujos de trabajo que abarquen varios sistemas. Para más ejemplos de MCP, consulta nuestro tutorial de Codex CLI MCP y el tutorial de Google ADK MCP.

Si quieres crear tus propios servidores MCP, echa un vistazo a Building an MCP Server and Client with FastMCP 2.0.