# Chrome Devtools MCP

> Usa al auditar rendimiento y depurar webs con DevTools MCP.

- Skill: `ntizar/chrome-devtools-mcp` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ntizar/chrome-devtools-mcp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ntizar/chrome-devtools-mcp/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- License: Apache-2.0
- Author: ntizar (https://skillmd.com/u/ntizar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ntizar/chrome-devtools-mcp

---


# Chrome DevTools MCP — DevTools para agentes de código

## Qué es

`chrome-devtools-mcp` (github.com/ChromeDevTools/chrome-devtools-mcp, Google, TypeScript, Apache-2.0, 51.131⭐, push 2026-09-06) es el **servidor MCP oficial de Chrome DevTools**: da a un agente IA (Claude, Cursor, Copilot, Hermes) control e inspección de un Chrome vivo — automatización fiable vía puppeteer, trazas de rendimiento accionables, red, consola con stack traces source-mapped y auditorías Lighthouse. También tiene **CLI** para uso sin MCP.

**Cuándo usarlo:** auditoría de rendimiento de dashboards/HTML de David (DataHubEspana, SolMAD, Kit72h), depuración de errores de consola/red en producción, verificación visual antes de desplegar. Para automatización ligera sin rendimiento: `agent-browser`. Para QA exploratorio de metodología: `dogfood`.

## Instalación / Arranque

Config de cliente MCP (stdio vía npx):

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

- Requiere Node.js LTS + Chrome stable (soporte oficial SOLO Chrome y Chrome for Testing; Chromium tipo Edge/Brave no garantizado).
- `--slim --headless`: modo básico solo con tareas elementales de navegador (menos tools, menos contexto).
- El servidor NO abre Chrome al conectar: la browser se lanza al primer tool que la necesita.
- Test de humo (prompt del propio README): `Check the performance of https://developers.chrome.com`

## Grupos de tools (verificado en docs/tool-reference.md)

| Grupo | Tools clave |
|-------|-------------|
| Input | `click`, `drag`, `fill`, `fill_form`, `hover`, `press_key`, `type_text`, `upload_file`, `click_at`, `handle_dialog` |
| Navegación | `navigate_page`, `new_page`, `list_pages`, `select_page`, `close_page`, `wait_for` |
| Rendimiento | `performance_start_trace`, `performance_stop_trace`, `performance_analyze_insight` (insights accionables, no solo números) |
| Red | `list_network_requests`, `get_network_request` |
| Depuración | `evaluate_script`, `list_console_messages`, `get_console_message`, `take_screenshot`, `take_snapshot`, `lighthouse_audit`, `screencast_start/stop` |
| Memoria | `take_heapsnapshot`, `close_heapsnapshot`, `compare_heapsnapshots`, `get_heapsnapshot_retainers/retaining_paths/dominators`, `query_heapsnapshot_objects` |
| Emulación | `emulate`, `resize_page` |
| Extensiones | `install_extension`, `list_extensions`, `reload_extension`, `trigger_extension_action`, `uninstall_extension` |

## Configuración avanzada (docs/advanced-usage.md)

- **Conexión a Chrome ya abierto** (imprescindible para reutilizar login): `--autoConnect`, o manual con `--browser-url=http://127.0.0.1:9222` lanzando Chrome con `--remote-debugging-port=9222 --user-data-dir=<dir no default>` (Chrome LO EXIGE por seguridad — nunca usa tu perfil por defecto con el puerto abierto). En Windows: `"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"`.
- **Sesiones concurrentes:** `--experimentalPageIdRouting` expone `pageId` en los tools; combinar con `--isolated` para perfiles temporales.
- **Datos de usuario:** profile por defecto en `%USERPROFILE%\.cache\chrome-devtools-mcp\chrome-profile`.
- **Depuración de Chrome en Android** soportada (ver guía advanced).
- Referencia de subagente de navegador integrado: Gemini CLI browser agent (el propio README recomienda construir sobre esto).

## Pitfalls

- **Telemetría ON por defecto:** Google recoge stats de uso (éxito de invocaciones, latencia, entorno). Desactivar con `--no-usage-statistics` o env `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` (también desactiva si hay `CI`). Es INDEPENDIENTE de las métricas de Chrome: salir del opt-out de Chrome no afecta aquí.
- **CrUX:** las tools de rendimiento envían URLs de trace a la API CrUX de Google (datos de usuarios reales). `--no-performance-crux` para desactivar.
- **Chequeo de actualizaciones npm:** `CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS` para silenciar.
- **Exposición de contenido:** el MCP expone TODO lo que ve el navegador al cliente — nunca iniciar sesión en banca/servicios sensibles mientras un agente está conectado.
- **Fijar versión:** `chrome-devtools-mcp@latest` es lo recomendado oficialmente; en pipelines reproducibles pinear versión.
- **APIs de terceros** solo con Chrome/Chrome for Testing; en entornos Linux headless verificar que Chrome (no Chromium del paquete) está instalado.

## Verificación

1. `npx -y chrome-devtools-mcp@latest --version` responde.
2. Prompt "Check the performance of https://developers.chrome.com" → debe abrir Chrome, grabar trace y devolver insights.
3. Si se usa `--browser-url`, confirmar que el Chrome objetivo arrancó con `--remote-debugging-port` y `--user-data-dir` distinto del default.

## Fuentes

- Repo: https://github.com/ChromeDevTools/chrome-devtools-mcp (README + docs/tool-reference.md + docs/advanced-usage.md + docs/configuration.md, verificados 2026-09-06)