# Memory Leak Debugging > Diagnostica y resuelve fugas de memoria en aplicaciones JavaScript/Node.js capturando, comparando e inspeccionando heap snapshots. Fuente: https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/memory-leak-debugging Markdown: https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/memory-leak-debugging.md Repositorio: https://github.com/ChromeDevTools/chrome-devtools-mcp Autor: ChromeDevTools Licencia: Apache-2.0 Actualizado: ayer Coste de contexto: 55 tok instalada, 1k tok al activarse, 1.5k tok con todos los archivos del bundle Bundle: 2 archivos, 6 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 memory-leak-debugging --agent claude-code # Cursor npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging --agent cursor # Codex npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging --agent codex # Gemini CLI npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging --agent gemini # Windsurf npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging --agent windsurf # Cline npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging --agent cline ``` ## Qué hace - Captura heap snapshots en distintos estados (baseline, tras interacciones, tras revertirlas) con las herramientas MCP en vez de leer .heapsnapshot en crudo - Compara snapshots para detectar crecimiento sospechoso por clase, y examina retainers, dominadores y cadenas de retención - Filtra por causas comunes: nodos DOM desconectados, event listeners no eliminados, closures y contextos, retención por consola - Cierra los snapshots cargados al terminar para liberar memoria del servidor MCP ## Cuándo usarla - El usuario reporta uso alto de memoria, errores OOM, o quiere capturar/comparar/inspeccionar heap snapshots ## Qué la activa - "Mi app de Node se está quedando sin memoria, ayúdame a encontrar la fuga" - "Compara estos dos heap snapshots y dime qué está creciendo" ## Antes de instalar - Requiere las herramientas de heap snapshot de Chrome DevTools MCP; no se deben leer los archivos .heapsnapshot en crudo. ## Archivos - SKILL.md — 4 KB - references/common-leaks.md — 2 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. # Memory Leak Debugging This skill provides expert guidance and workflows for finding, diagnosing, and fixing memory leaks in JavaScript and Node.js applications using Chrome DevTools MCP tools. ## Core Principles - **Prefer MCP memory tools:** Do NOT attempt to read raw `.heapsnapshot` files directly, as they are extremely large and will consume too many tokens. Use the Chrome DevTools MCP heap snapshot tools to summarize, compare, and inspect snapshots. - **Isolate the Leak:** Determine if the leak is in the browser (client-side) or Node.js (server-side). - **Common Culprits:** Look for detached DOM nodes, unhandled closures, global variables, event listeners not being removed, and caches growing unbounded. _Note: Detached DOM nodes are sometimes intentional caches; always ask the user before nulling them._ - **Close Loaded Snapshots:** Heap snapshots can be large. After completing an investigation, use `close_heapsnapshot` for each loaded snapshot to release memory held by the MCP server. ## Workflows ### 1. Capturing Snapshots When investigating a frontend web application memory leak, utilize the `chrome-devtools-mcp` tools to interact with the application and take snapshots. - Use page-scoped tools like `click`, `navigate_page`, `fill`, etc. (specifying `pageId`) to manipulate the page into the desired state. - Revert the page back to the original state after interactions to see if memory is released. - Repeat the same user interactions 10 times to amplify the leak. - Use `take_heapsnapshot` (with `pageId`) to save `.heapsnapshot` files to disk at baseline, target (after actions), and final (after reverting actions) states. ### 2. Comparing Snapshots Once you have generated `.heapsnapshot` files using `take_heapsnapshot`, compare them with Chrome DevTools MCP memory tools. - Start with `get_heapsnapshot_summary` for each snapshot to confirm that the files load and to compare high-level totals. - Use `compare_heapsnapshots` to compare baseline and target snapshots. Start without `classIndex` for the summary diff, then request detailed class diffs only for suspicious growth by specifying `classIndex`. - Use the summary output from `compare_heapsnapshots` before drilling into specific node IDs. ### 3. Inspecting Retainers and Dominator Chains When a class or object type grows unexpectedly, inspect the retaining chain and dominators with the MCP tools before changing code. - Use `get_heapsnapshot_class_nodes` to list instances of the suspicious class. - Use `get_heapsnapshot_retainers`, `get_heapsnapshot_retaining_paths`, `get_heapsnapshot_dominators`, and `get_heapsnapshot_edges` to understand why representative nodes are still reachable. - Use `get_heapsnapshot_object_details` with a specific `nodeId` to retrieve detailed object metadata (size, type, distance, and DOM detachedness). - Use `get_heapsnapshot_duplicate_strings` when string growth dominates the diff. - Read [references/common-leaks.md](references/common-leaks.md) for examples of common memory leaks and how to fix them after the retaining path points at application code. ### 4. Advanced Analysis and Categorized Filters Use built-in MCP memory tools and filters to pinpoint specific leak categories directly without external tools. - Use `get_heapsnapshot_details` or `get_heapsnapshot_class_nodes` with `filterName` to target common leak causes: - `objectsRetainedByDetachedDomNodes`: Identifies detached DOM elements retained in memory. - `objectsRetainedByEventHandlers`: Identifies objects kept alive by unremoved event listeners. - `objectsRetainedByContexts`: Identifies objects trapped in closures or execution contexts. - `objectsRetainedByConsole`: Identifies objects retained by console logging. ## 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 - [Chrome Devtools](https://skillsagentes.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools.md): 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. - [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)