# Chrome Devtools

> Usa Chrome DevTools vía MCP para depuración eficiente, resolución de problemas y automatización del navegador. No aplica al modo --slim de configuración MCP.

Fuente: https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools
Markdown: https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools.md

Repositorio: https://github.com/ChromeDevTools/chrome-devtools-mcp
Autor: ChromeDevTools
Licencia: Apache-2.0
Actualizado: ayer
Coste de contexto: 69 tok instalada, 1k tok al activarse, 1k tok con todos los archivos del bundle
Bundle: 1 archivo, 4 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools --agent claude-code
# Cursor
npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools --agent cursor
# Codex
npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools --agent codex
# Gemini CLI
npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools --agent gemini
# Windsurf
npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools --agent windsurf
# Cline
npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools --agent cline
```

## Qué hace

- Navega, toma snapshots de accesibilidad y capturas, e interactúa con páginas usando Chrome DevTools por MCP
- Ubica elementos por su 'uid' del snapshot para hacer click, fill y otras interacciones
- Ejecuta scripts con evaluate_script para datos que no están en el árbol de accesibilidad
- Instala y prueba extensiones de Chrome, incluida su service worker en segundo plano

## Cuándo usarla

- Se está depurando una página web
- Se necesita automatizar interacciones del navegador
- Se analiza el rendimiento o se inspeccionan solicitudes de red

## Cuándo no

- El servidor MCP está configurado en modo --slim

## Qué la activa

- "Depura esta página web con Chrome DevTools"
- "Automatiza el llenado de este formulario en el navegador"
- "Inspecciona las solicitudes de red de esta página"

## Antes de instalar

- Requiere el servidor MCP chrome-devtools-mcp corriendo; algunas funciones necesitan flags como --categoryExtensions o --memoryDebugging.

## Archivos

- SKILL.md — 4 KB

## SKILL.md

Reproducido tal cual desde ChromeDevTools/chrome-devtools-mcp bajo Apache-2.0. Esta sección es el documento original y está en inglés.

## Core Concepts

**Browser lifecycle**: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: `npx chrome-devtools-mcp@latest --help`.
Addional tooling can be enabled by providing the following flags:

- For extension tooling, use the `--categoryExtensions` flag.
- For memory tooling, use the `--memoryDebugging` flag.

**Page targeting**: Page-scoped tools require a `pageId` parameter to target a specific page. Use `list_pages` to see available pages and their IDs (e.g. `pageId: 1`), or use the ID returned when creating a page with `new_page`.
Note: For `evaluate_script`, `pageId` is required when targeting pages. However, when `--categoryExtensions` is enabled, `pageId` is optional so you can pass `serviceWorkerId` instead to evaluate inside an extension background service worker.
**Element interaction**: Use `take_snapshot` to get page structure with element `uid`s. Each element has a unique `uid` for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.

## Workflow Patterns

### Before interacting with a page

1. Navigate: `navigate_page` or `new_page`
2. Wait: `wait_for` to ensure content is loaded if you know what you look for.
3. Snapshot: `take_snapshot` with `pageId` to understand page structure
4. Interact: Use element `uid`s from snapshot for `click`, `fill`, etc., passing the corresponding `pageId`.

### Efficient data retrieval

- Use `filePath` parameter for large outputs (screenshots, snapshots, traces)
- Use pagination (`pageIdx`, `pageSize`) and filtering (`types`) to minimize data
- Set `includeSnapshot: false` on input actions unless you need updated page state

### Tool selection

- **Automation/interaction**: `take_snapshot` (text-based, faster, better for automation)
- **Visual inspection**: `take_screenshot` (when user needs to see visual state)
- **Additional details**: `evaluate_script` for data not in accessibility tree

### Parallel execution

You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.

### Testing an extension

> **Before proceeding**: Extension tools (`install_extension`, `list_extensions`, etc.) are only available when the MCP server is started with the `--categoryExtensions` flag. If these tools are not in your tool list, stop and ask the user to update their MCP server configuration:
>
> ```json
> {
>   "mcpServers": {
>     "chrome-devtools": {
>       "command": "npx",
>       "args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]
>     }
>   }
> }
> ```
>
> After updating, the user must restart the MCP server (or their AI client) for the change to take effect.

1. **Install**: Use `install_extension` with the path to the unpacked extension.
2. **Identify**: Get the extension ID from the response or by calling `list_extensions`.
3. **Trigger Action**: Use `trigger_extension_action` to open the popup or side panel if applicable.
4. **Verify Service Worker**: Use `evaluate_script` with `serviceWorkerId` (omitting `pageId` and `args`) to check extension state or trigger background actions. When evaluating in a page, pass `pageId` (omitting `serviceWorkerId`).
5. **Verify Page Behavior**: Navigate to a page where the extension operates and use `take_snapshot` to check if content scripts injected elements or modified the page correctly.

## Troubleshooting

If `chrome-devtools-mcp` is insufficient, guide users to use Chrome DevTools UI:

- https://developer.chrome.com/docs/devtools
- https://developer.chrome.com/docs/devtools/ai-assistance

If there are errors launching `chrome-devtools-mcp` or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [ChromeDevTools](https://skillsagentes.com/creators/chromedevtools.md) — 6 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Memory Leak Debugging](https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/memory-leak-debugging.md): Diagnostica y resuelve fugas de memoria en aplicaciones JavaScript/Node.js capturando, comparando e inspeccionando heap snapshots.
- [Troubleshooting](https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/troubleshooting.md): Usa Chrome DevTools MCP y su documentación para solucionar problemas de conexión y de target cuando fallan list_pages, new_page o navigate_page.
- [Chrome Devtools Cli](https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools-cli.md): Usa este skill para escribir scripts de shell o correr comandos de shell que automaticen el navegador u otras tareas de Chrome DevTools por CLI.
- [Debug Optimize Lcp](https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/debug-optimize-lcp.md): Guía la depuración y optimización del Largest Contentful Paint (LCP) usando las herramientas de Chrome DevTools MCP.
- [A11y Debugging](https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging.md): Usa Chrome DevTools por MCP para depuración y auditoría de accesibilidad (a11y) siguiendo las guías de web.dev. Úsalo al probar HTML semántico, ARIA, foco, teclado, tap targets y contraste.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)