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):
{
"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
npx -y chrome-devtools-mcp@latest --version responde.- Prompt "Check the performance of https://developers.chrome.com" → debe abrir Chrome, grabar trace y devolver insights.
- Si se usa
--browser-url, confirmar que el Chrome objetivo arrancó con --remote-debugging-port y --user-data-dir distinto del default.
Fuentes
1---2name: chrome-devtools-mcp3description: Usa al auditar rendimiento y depurar webs con DevTools MCP.4license: Apache-2.05---67# Chrome DevTools MCP — DevTools para agentes de código89## Qué es1011`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.1213**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`.1415## Instalación / Arranque1617Config de cliente MCP (stdio vía npx):1819```json20{21 "mcpServers": {22 "chrome-devtools": {23 "command": "npx",24 "args": ["-y", "chrome-devtools-mcp@latest"]25 }26 }27}28```2930- Requiere Node.js LTS + Chrome stable (soporte oficial SOLO Chrome y Chrome for Testing; Chromium tipo Edge/Brave no garantizado).31- `--slim --headless`: modo básico solo con tareas elementales de navegador (menos tools, menos contexto).32- El servidor NO abre Chrome al conectar: la browser se lanza al primer tool que la necesita.33- Test de humo (prompt del propio README): `Check the performance of https://developers.chrome.com`3435## Grupos de tools (verificado en docs/tool-reference.md)3637| Grupo | Tools clave |38|-------|-------------|39| Input | `click`, `drag`, `fill`, `fill_form`, `hover`, `press_key`, `type_text`, `upload_file`, `click_at`, `handle_dialog` |40| Navegación | `navigate_page`, `new_page`, `list_pages`, `select_page`, `close_page`, `wait_for` |41| Rendimiento | `performance_start_trace`, `performance_stop_trace`, `performance_analyze_insight` (insights accionables, no solo números) |42| Red | `list_network_requests`, `get_network_request` |43| Depuración | `evaluate_script`, `list_console_messages`, `get_console_message`, `take_screenshot`, `take_snapshot`, `lighthouse_audit`, `screencast_start/stop` |44| Memoria | `take_heapsnapshot`, `close_heapsnapshot`, `compare_heapsnapshots`, `get_heapsnapshot_retainers/retaining_paths/dominators`, `query_heapsnapshot_objects` |45| Emulación | `emulate`, `resize_page` |46| Extensiones | `install_extension`, `list_extensions`, `reload_extension`, `trigger_extension_action`, `uninstall_extension` |4748## Configuración avanzada (docs/advanced-usage.md)4950- **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"`.51- **Sesiones concurrentes:** `--experimentalPageIdRouting` expone `pageId` en los tools; combinar con `--isolated` para perfiles temporales.52- **Datos de usuario:** profile por defecto en `%USERPROFILE%\.cache\chrome-devtools-mcp\chrome-profile`.53- **Depuración de Chrome en Android** soportada (ver guía advanced).54- Referencia de subagente de navegador integrado: Gemini CLI browser agent (el propio README recomienda construir sobre esto).5556## Pitfalls5758- **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í.59- **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.60- **Chequeo de actualizaciones npm:** `CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS` para silenciar.61- **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.62- **Fijar versión:** `chrome-devtools-mcp@latest` es lo recomendado oficialmente; en pipelines reproducibles pinear versión.63- **APIs de terceros** solo con Chrome/Chrome for Testing; en entornos Linux headless verificar que Chrome (no Chromium del paquete) está instalado.6465## Verificación66671. `npx -y chrome-devtools-mcp@latest --version` responde.682. Prompt "Check the performance of https://developers.chrome.com" → debe abrir Chrome, grabar trace y devolver insights.693. Si se usa `--browser-url`, confirmar que el Chrome objetivo arrancó con `--remote-debugging-port` y `--user-data-dir` distinto del default.7071## Fuentes7273- Repo: https://github.com/ChromeDevTools/chrome-devtools-mcp (README + docs/tool-reference.md + docs/advanced-usage.md + docs/configuration.md, verificados 2026-09-06)
ntizar