Cómo instalar Chrome DevTools MCP: depura red, consola y rendimiento web con Codex y Claude Code

Sun, 12 Jul 2026 12:13:00 +0800

Chrome DevTools MCP no es una herramienta para que un Agent simplemente «haga clic por una web». Expone a los coding agents, mediante MCP, las solicitudes de red, mensajes de consola, capturas, traces de rendimiento y automatización de páginas de Chrome DevTools. Es más adecuado para cuestiones verificables como «¿por qué la página queda en blanco?», «¿por qué la API devuelve 401?», «¿por qué no ocurre nada al hacer clic?» o «¿por qué el rendimiento se volvió lento de repente?».

Úsalo junto con Cómo solucionar fallos de llamadas a herramientas MCP: primero confirma que el proceso MCP y los permisos funcionan, y después lee la evidencia real del navegador. El repositorio oficial indica que admite inspección de Chrome en vivo, automatización, depuración y análisis de rendimiento, y advierte específicamente que el cliente MCP puede ver datos del navegador. Repositorio oficial

Confirma primero el caso de uso

Es apropiado cuando:

El Agent necesita leer console error, network request, capturas o un performance trace.
Debes reproducir un problema de frontend que ya se ve en Chrome.
Necesitas convertir el comportamiento de la página en solicitudes, selectores o información de pila localizables.
El sitio y la cuenta de prueba están aislados de producción.

No lo trates como un operador de producción sin supervisión. El navegador puede contener sesiones, datos de clientes, páginas de pago o sistemas internos; empieza con un Chrome profile independiente y una cuenta de prueba con pocos privilegios.

Instalación mínima para Codex y Claude Code

Codex CLI puede añadir el MCP server:

`1`	`codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`

Para Claude Code:

`1`	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`

Reinicia el cliente correspondiente tras la instalación y pide al Agent una comprobación de bajo riesgo, por ejemplo: «Abre la página de prueba y enumera los errores de consola y las solicitudes de red fallidas». No empieces con tareas como «inicia sesión en el panel de administración y modifica datos».

Si Windows no encuentra Chrome después de iniciar npx, o MCP tarda demasiado en inicializarse, usa explícitamente cmd y aumenta el tiempo de espera en .codex/config.toml:

[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Depura con evidencia, no pidiendo al Agent que adivine

Conviene fijar este orden:

Página y captura: confirma que están abiertos el entorno, la cuenta y la ruta objetivo.
Consola: registra el texto completo y el source-mapped stack del primer error, no solo la cantidad de mensajes rojos.
Red: filtra solicitudes 4xx, 5xx, CORS o pending durante mucho tiempo; revisa URL, cuerpo de la solicitud y resumen de respuesta.
Reproduce una interacción: deja que el Agent haga solo un clic o introduzca un dato, y vuelve a revisar red y consola.
Rendimiento: graba un trace cuando el problema se reproduzca de forma estable, para no confundir fluctuaciones de red con problemas de renderizado.

Puedes dar al Agent una tarea con límites claros:

Reproduce «la página queda en blanco tras enviar» solo en http://localhost:3000.
Primero toma una captura; luego enumera los console error y las network request fallidas.
No modifiques la página, no envíes el formulario ni visites otros dominios.
Organiza la salida en: síntoma, evidencia, causa más probable y siguiente verificación manual.

Fallos comunes y respuesta

Síntoma	Revisa primero
Se añadió MCP, pero sus herramientas no están disponibles	Reinicia el cliente; confirma que `npx`, Node.js y la configuración MCP estén activos en el ámbito actual.
No se puede conectar a un Chrome ya abierto	Confirma que el puerto de depuración coincide con `--browser-url`; no supongas que la herramienta tomará automáticamente el control del navegador abierto.
Se vieron datos de página que no debían verse	Cierra ese profile de inmediato, cambia a un profile de prueba aislado y reduce el alcance de la tarea del Agent.
El informe de rendimiento es inestable	Fija la página, las condiciones de red y los pasos de reproducción; compara varias muestras.

La herramienta oficial recopila por defecto estadísticas de uso como éxito de llamadas, latencia y entorno. Si tu entorno exige desactivarlo, pasa --no-usage-statistics. El análisis de rendimiento también puede leer datos de CrUX; usa --no-performance-crux cuando corresponda. No son «fallos de depuración», sino límites de privacidad y red que debes decidir antes de desplegar.

Resumen