К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

memory-leak-debugging — скилл Claude Code: утечки и установка

Находит утечки памяти в JavaScript и Node.js через Chrome DevTools MCP. Пригодится для анализа высокого расхода памяти, OOM и heap snapshots.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/memory-leak-debugging/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/memory-leak-debugging/

Из того же набора6

Весь набор →
chrome-devtools ChromeDevTools Скилл подключает Chrome DevTools через MCP для отладки страниц, браузерной автоматизации, анализа производительности и сетевых запросов. Claude Code CX Codex Cursor +1 8 600установок chrome-devtools-cli ChromeDevTools Позволяет агенту управлять браузером через Chrome DevTools: кликать по элементам, собирать снимки памяти и профилировать производительность прямо из терминала. Claude Code CX Codex Cursor +1 6 700установок a11y-debugging ChromeDevTools Проверяет доступность веб-страниц через Chrome DevTools MCP: семантику, ARIA, фокус, клавиатурную навигацию и контраст. Claude Code CX Codex Cursor +1 3 600установок debug-optimize-lcp ChromeDevTools Разбирает Largest Contentful Paint на четыре последовательных этапа и показывает, где именно тормозит загрузка главного контента страницы. Claude Code CX Codex Cursor +1 3 500установок troubleshooting ChromeDevTools Пошагово диагностирует сбои подключения и ошибки инструментов Chrome DevTools MCP в ассистенте. Пригодится, когда не запускается сервер или падают команды управления вкладками. Claude Code CX Codex Cursor +1 3 200установок

Похожие

search официальный anthropics Параллельно ищет информацию по подключённым MCP-источникам и собирает единый ответ. Пригодится, когда решение или переписка затерялись между почтой, чатом и трекером. Claude Code CX Codex Cursor +1 5 000установок create-tldr-page официальный github Собирает страницу tldr из документации команды: короткое описание, ссылка на первоисточник и 5–8 примеров вызова. GitHub Copilot 8 800установок start официальный anthropics Проверяет подключённые MCP-серверы и доступные инструменты биоисследований. Помогает сориентироваться в окружении плагина перед началом проекта. Claude Code CX Codex Cursor +1 4 900установок claude-certification rohitg00 Ведёт по одному из четырёх треков сертификации Claude: объясняет урок, гоняет практику и проверяет артефакты. Пригодится, если готовитесь к экзамену и хотите учиться, а не читать список ссылок. Claude Code CX Codex Cursor +1 3 300установок prompt-master nidhinjs Скилл пишет и улучшает промпты под конкретный ИИ-инструмент. Подключайте его, когда нужно подготовить запрос для Claude Code, Cursor или другого поддерживаемого инструмента. Claude Code CX Codex Cursor +1 3 900установок portless vercel-labs Присваивает локальным dev-серверам стабильные имена вида myapp.localhost вместо номеров портов. Claude Code CX Codex Cursor +1 5 900установок setup-matt-pocock-skills Matt Pocock Скилл настраивает репозиторий для инженерных скиллов Matt Pocock: задаёт трекер задач, метки триажа и расположение доменной документации. Запустите его перед первым использованием остальных скиллов. Claude Code 1 052 851установок to-tickets Matt Pocock Разбивает план, спецификацию или переписку на небольшие сквозные задачи и отмечает, какие из них блокируют остальные. Пригодится, когда нужно согласовать порядок работы до публикации задач в трекере. Claude Code 711 230установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой