Tutorial de Chrome DevTools MCP: depura un error real

Chrome DevTools MCP permite al agente inspeccionar la página, la consola y la red y grabar trazas de rendimiento. Sigue un síntoma hasta la petición o el código responsable. En el ejemplo falla la carga de registros. Reproducimos el error, cambiamos una ruta fetch y verificamos el resultado.

Elige una conexión de navegador

Usa una instancia aislada para un sitio nuevo o de prueba. La herramienta admite browserUrl o wsEndpoint para un navegador depurable y autoConnect para entornos Chrome compatibles. Una sesión existente puede mostrar páginas autenticadas y almacenamiento. Limita el alcance al perfil y origen autorizados. Usamos Tabbit Browser Dev mediante su ejecutable explícito y un perfil aislado. Es un entorno probado, sin generalizar a todas las versiones.

Chrome for Developers

Registra el MCP e inicia el ejercicio

Usa la configuración stdio local del cliente. Probamos chrome-devtools-mcp 1.12.0 con el ejecutable indicado. Ajusta la ruta a tu equipo. Desactivamos estadísticas y consultas CrUX en la prueba. Descarga los dos archivos en una carpeta, inicia Python y abre la URL local que imprime.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@1.12.0",
        "--executablePath",
        "/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
        "--isolated",
        "--headless",
        "--viewport=1000x565",
        "--usageStatistics=false",
        "--performanceCrux=false"
      ]
    }
  }
}

fixture.py · fixture.html

python3 fixture.py --port 8765

Reproduce y reúne las dos pruebas

Abre la página, toma una captura de accesibilidad y pulsa Load records una vez. Usa el pageId y uid actuales. La página mostró Could not load records. list_console_messages devolvió F02 load failed: HTTP 404. list_network_requests filtrado a fetch mostró GET /api/record [404]. get_network_request confirmó el fallo. Otro 404 de favicon era independiente.

Chrome DevTools MCP · Tool reference

Cambia una ruta y repite la acción

El servidor ofrece /api/records y el script llama /api/record. Cambia la ruta fetch de fixture.html y guarda. Recarga la misma página, toma una captura nueva y pulsa otra vez. La petición correcta devolvió 200 y la página mostró Loaded: F02-FIXED. El error de aplicación no volvió. Guarda ambos resultados.

- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");

Usa la traza para una pregunta distinta

Tras la prueba funcional ejecutamos performance_start_trace con reload y autoStop. La medición local mostró LCP 386 ms, TTFB 2 ms y CLS 0,00, sin limitación de CPU o red ni datos de campo. Una recarga confirma la captura, pero no demuestra una mejora. Para medir lentitud, repite el mismo trabajo en el mismo entorno.

Qué aportan dos experiencias

Un usuario de r/ClaudeAI separó un recurso ausente y otra excepción con red y consola. En r/mcp, otro describió un navegador MCP más lento que el habitual. Son entornos individuales. Guarda una petición exacta y el modo de navegador, y mide el rendimiento por separado.

r/ClaudeAI r/mcp

¿Se puede conectar un navegador en ejecución?

Sí, si ofrece un punto de depuración autorizado y el entorno lo admite. Empieza aislado salvo que necesites una sesión existente.

• Browser automation tools

• Cómo comprobar la configuración de un agente de navegador

• Cómo conectar un agente de IA al navegador abierto

• Guía de agent-browser CLI para snapshots, refs y sesiones

• ¿Puede Codex leer un panel en el que ya iniciaste sesión?

• Configurar el navegador de OpenClaw y elegir perfil

• Tutorial de Playwright MCP: configura, actúa y verifica

Secholar.L

Crecimiento y contenido en Tabbit

Secholar.L escribe guías prácticas sobre navegadores con IA y flujos de trabajo con agentes, comparando herramientas con investigación real y fuentes verificables.