memory-leak-debugging — скилл Claude Code: утечки и установка
Находит утечки памяти в JavaScript и Node.js через Chrome DevTools MCP. Пригодится для анализа высокого расхода памяти, OOM и heap snapshots.
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a claude-codeЧто делает memory-leak-debugging
Скилл ведёт диагностику утечек памяти в JavaScript и Node.js. Он помогает определить, где проблема: в браузере или на стороне Node.js, снять heap snapshots до и после повторяемых действий, сравнить их и найти растущие классы и объекты.
Для анализа используются инструменты Chrome DevTools MCP: take_heapsnapshot, get_heapsnapshot_summary, compare_heapsnapshots, методы поиска retainers, dominators и object details. Скилл советует повторить одинаковые действия 10 раз, вернуть страницу в исходное состояние и закрыть загруженные snapshots через close_heapsnapshot.
Расширенные инструменты доступны, когда MCP-сервер запущен с флагом --memoryDebugging, поэтому это нужно проверить до расследования. Сырые .heapsnapshot читать не следует: сначала применяйте MCP-инструменты для сводки и сравнения. Отдельно проверяются detached DOM nodes, замыкания, глобальные переменные, обработчики событий и растущие кэши.
Какие задачи решает
- найти источник утечки в браузере или Node.js
- снять baseline, target и final heap snapshots
- сравнить snapshots и обнаружить растущие классы
- проследить retainers и dominator chains до кода
- проверить объекты, удерживаемые DOM и обработчиками событий
Примеры запросов агенту
- Проверь утечку памяти в этом JavaScript-приложении: повтори сценарий 10 раз, сними snapshots до и после действий, затем сравни их.
- Используй `get_heapsnapshot_summary` и `compare_heapsnapshots`, чтобы найти классы, которые растут между baseline и target.
- Исследуй, почему объект остаётся в памяти: проверь `get_heapsnapshot_retainers`, `get_heapsnapshot_retaining_paths` и `get_heapsnapshot_dominators`, а затем закрой snapshots.
Как установить memory-leak-debugging
1Через Skills CLI (Vercel)
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a claude-code2Вручную: положить файлы
~/.claude/skills/memory-leak-debugging/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/memory-leak-debugging/
1Через Skills CLI (Vercel)
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a codex2Вручную: положить файлы
.agents/skills/memory-leak-debugging/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a cursor2Вручную: положить файлы
.cursor/skills/memory-leak-debugging/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ChromeDevTools/chrome-devtools-mcp memory-leak-debugging2Вручную: положить файлы
.github/skills/memory-leak-debugging/SKILL.md1Через Skills CLI (Vercel)
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a gemini-cli2Командой платформы
gemini skills install https://github.com/ChromeDevTools/chrome-devtools-mcp --path skills/memory-leak-debuggingВручную: положить файлы
.devin/skills/memory-leak-debugging/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора6
Весь набор →Похожие
Вопросы о memory-leak-debugging
Как установить memory-leak-debugging в Claude Code?
Выполните npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a claude-code, затем повторите эту команду. После установки проверьте файл ~/.claude/skills/memory-leak-debugging/SKILL.md.
Что делает memory-leak-debugging?
Скилл помогает расследовать утечки памяти в JavaScript и Node.js через Chrome DevTools MCP. Он снимает и сравнивает heap snapshots, исследует удерживающие цепочки и указывает на объекты, которые остаются достижимыми.
Что нужно для расширенного анализа heap snapshots?
MCP-сервер должен быть запущен с флагом --memoryDebugging. После расследования загруженные snapshots нужно закрыть через close_heapsnapshot, чтобы освободить память MCP-сервера.
Исходный текст
SKILL.md · Apache-2.0
--- name: memory-leak-debugging description: Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools. --- # 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. ## Prerequisites Advanced memory debugging tools (`compare_heapsnapshots`, `get_heapsnapshot_details`, etc.) are only available when the server is started with the `--memoryDebugging` flag. First check if these tools are available; if not, try to read the MCP configuration file to check if `--memoryDebugging` is enabled. ## 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.
© ChromeDevTools · Apache-2.0 · ChromeDevTools/chrome-devtools-mcp