Chrome DevTools MCP - Herramienta de control del navegador para asistentes de programación de IA

Resumen del Proyecto

Chrome DevTools MCP es un servidor oficial del Protocolo de Contexto del Modelo (MCP) que permite a los asistentes de programación de IA (como Gemini, Claude, Cursor o Copilot) controlar e inspeccionar un navegador Chrome en tiempo real. Esta herramienta proporciona a los asistentes de codificación de IA la funcionalidad completa de Chrome DevTools para una automatización fiable, depuración profunda y análisis de rendimiento.

Dirección de GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

Características Principales

1. Información sobre el Rendimiento

• Registra seguimientos de rendimiento usando Chrome DevTools
• Extrae recomendaciones accionables para la optimización del rendimiento
• Ayuda a los asistentes de IA a identificar cuellos de botella en el rendimiento

2. Depuración Avanzada del Navegador

• Analiza solicitudes de red
• Captura capturas de pantalla
• Inspecciona la salida de la consola del navegador
• Detecta problemas de CORS y errores de consola

3. Automatización Fiable

• Implementa la automatización del navegador basada en Puppeteer
• Espera automáticamente los resultados de las operaciones
• Soporta el llenado de formularios, navegación de páginas, interacción con elementos

Categorías Principales de Funciones

El servidor Chrome DevTools MCP ofrece 26 herramientas, divididas en las siguientes categorías:

Automatización de Entrada (7 herramientas)

• Clics, llenado de formularios, entrada de texto
• Funciones interactivas como pasar el ratón por encima, operaciones de teclado

Automatización de Navegación (7 herramientas)

• Navegación de páginas, avanzar y retroceder
• Actualizar, esperar a que la carga se complete

Funciones de Simulación (3 herramientas)

• Simulación de dispositivos
• Simulación de geolocalización
• Simulación de condiciones de red

Análisis de Rendimiento (3 herramientas)

• Registro de seguimiento de rendimiento
• Análisis de métricas de rendimiento
• Generación de recomendaciones de optimización

Monitoreo de Red (2 herramientas)

• Lista de solicitudes de red
• Visualización de detalles de solicitudes

Herramientas de Depuración (4 herramientas)

• Visualización de mensajes de consola
• Ejecución de JavaScript
• Función de captura de pantalla
• Inspección del DOM

Requisitos del Sistema

• Node.js: Versión 20 o LTS más reciente
• Chrome: Versión estable actual o más reciente
• npm: Gestor de paquetes

Instalación y Configuración

Configuración General

Añade lo siguiente a tu archivo de configuración del cliente MCP:

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

Asistentes de Programación de IA Compatibles

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

A través de la interfaz de configuración de Cursor: Settings -> MCP -> New MCP Server, usa la configuración anterior.

Gemini CLI

# Nivel de proyecto
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Instalación global
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

Sigue la guía de configuración de MCP de Cline para usar la configuración estándar.

Opciones de Configuración

Chrome DevTools MCP soporta los siguientes parámetros de configuración:

Parámetro	Tipo	Valor por defecto	Descripción
--headless	boolean	false	Si se ejecuta en modo sin cabeza (sin interfaz de usuario)
--isolated	boolean	false	Crea un directorio de datos de usuario temporal, se limpia automáticamente al cerrar
--channel	string	stable	Canal de la versión de Chrome (stable/canary/beta/dev)
--viewport	string	-	Tamaño inicial del viewport, ej. 1280x720
--executablePath / -e	string	-	Ruta personalizada del ejecutable de Chrome
--browserUrl / -u	string	-	Conecta a una instancia de Chrome en ejecución
--proxyServer	string	-	Configuración del servidor proxy
--acceptInsecureCerts	boolean	false	Ignora errores de certificados autofirmados y caducados (usar con precaución)
--logFile	string	-	Ruta del archivo de registro de depuración

Ejemplo de Configuración

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Ejemplos de Uso

Prueba Básica

Una vez instalado, introduce la siguiente instrucción en tu asistente de IA para probarlo:

Check the performance of https://developers.chrome.com

El asistente de IA automáticamente:

1. Abrirá el navegador Chrome
2. Navegará al sitio web especificado
3. Registrará un seguimiento de rendimiento
4. Analizará y proporcionará recomendaciones de optimización del rendimiento

Escenarios de Uso Comunes

1. Análisis de Rendimiento

Analiza el rendimiento de carga de example.com y proporciona recomendaciones de optimización

2. Depuración de Problemas de Red

Comprueba si my-website.com tiene errores de CORS

3. Pruebas de Automatización

Navega a demo.realworld.io, rellena el formulario de inicio de sesión y toma una captura de pantalla

4. Relleno de Formularios

En la página de inicio de sesión, introduce el correo electrónico test@example.com y la contraseña testpass123

5. Inspección de Consola

Ver los mensajes de error de la consola de la página actual

Cómo Funciona

Chrome DevTools MCP funciona basándose en el estándar Model Context Protocol (MCP):

1. Protocolo MCP: Un estándar de código abierto para conectar grandes modelos de lenguaje con herramientas y fuentes de datos externas.
2. Exposición de Herramientas: Expone las funcionalidades de Chrome DevTools como herramientas a través del protocolo MCP.
3. Invocación por IA: El asistente de IA invoca la herramienta correspondiente según la necesidad del usuario.
4. Ejecución Automatizada: Utiliza Puppeteer para ejecutar operaciones en Chrome.
5. Retorno de Resultados: Devuelve los resultados de la ejecución al asistente de IA.

Flujo de Ejemplo

Cuando le pides al asistente de IA "comprobar el rendimiento del sitio web":

Usuario: Comprueba el rendimiento de mi sitio web
  ↓
Asistente de IA: Usa la herramienta performance_start_trace
  ↓
Servidor MCP: Inicia Chrome, abre el sitio web, registra el seguimiento de rendimiento
  ↓
Asistente de IA: Analiza los datos de rendimiento
  ↓
Usuario: Recibe el informe de análisis de rendimiento y las recomendaciones de optimización

Directorio de Datos

Chrome DevTools MCP utiliza los siguientes directorios de datos de usuario:

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

El directorio de datos no se borra entre ejecuciones, a menos que se use la opción --isolated.

Consideraciones de Seguridad

⚠️ AVISO IMPORTANTE:

Chrome DevTools MCP expone el contenido de la instancia del navegador a los clientes MCP, permitiéndoles inspeccionar, depurar y modificar cualquier dato en el navegador o en DevTools.

Por favor, evita compartir información sensible o personal que no desees compartir con los clientes MCP.

Solución de Problemas

Si encuentras algún problema, consulta la guía oficial de solución de problemas.

Problemas Comunes

1. El navegador no se inicia automáticamente: El servidor MCP solo iniciará el navegador cuando el cliente utilice una herramienta que lo requiera.
2. Problemas de permisos de sandbox: Si el cliente MCP tiene el sandbox habilitado, puede que necesites deshabilitarlo o usar --connect-url para conectarte a una instancia de Chrome iniciada manualmente.
3. Tiempo de espera de inicio agotado: En Windows, puede ser necesario aumentar la configuración startup_timeout_ms.

Pila Tecnológica

• Núcleo: Node.js
• Automatización del navegador: Puppeteer
• Protocolo: Chrome DevTools Protocol (CDP)
• Estándar: Model Context Protocol (MCP)

Características del Proyecto

1. Soporte Oficial: Desarrollado y mantenido oficialmente por el equipo de Chrome DevTools.
2. Amplia Compatibilidad: Soporta múltiples asistentes de programación de IA principales.
3. Funcionalidad Completa: Ofrece 26 herramientas que cubren automatización, depuración y análisis de rendimiento.
4. Fácil Integración: No requiere instalación local con npx, configuración sencilla.
5. Desarrollo Activo: Actualizaciones y mejoras continuas de las funciones.

Escenarios de Uso

• Depuración de Desarrollo Web: El asistente de IA ayuda a identificar y corregir errores.
• Optimización del Rendimiento: Análisis de rendimiento automatizado y recomendaciones de optimización.
• Pruebas de Automatización: Escritura y ejecución de pruebas de automatización del navegador.
• Monitoreo de Sitios Web: Verificación de la funcionalidad y el rendimiento del sitio web.
• Validación de Desarrollo: Verificación del efecto real de los cambios de código en el navegador.

Comentarios y Contribuciones

Este proyecto se encuentra en fase de vista previa pública, y el equipo de Chrome DevTools busca activamente la retroalimentación de la comunidad:

• Si tienes solicitudes de funciones o encuentras problemas, por favor, envíalos en GitHub Issues.
• Ya seas un desarrollador que utiliza asistentes de programación de IA o un proveedor que construye la próxima generación de herramientas de desarrollo de IA, tus conocimientos son invaluables.