docs(skills): update memory leak debugging skill to use native MCP tools (#2436)
Issue #2329 Updates the memory leak debugging skill (skills/memory-leak-debugging/SKILL.md) to use native Chrome DevTools MCP memory tools (compare_heapsnapshots, get_heapsnapshot_details, get_heapsnapshot_class_nodes, get_heapsnapshot_retaining_paths, get_heapsnapshot_dominators, get_heapsnapshot_object_details, get_heapsnapshot_duplicate_strings) and category filters (objectsRetainedByDetachedDomNodes, objectsRetainedByEventHandlers, objectsRetainedByContexts, objectsRetainedByConsole) instead of external memlab scripts.
This commit is contained in:
yasirusman85
@@ -5,7 +5,7 @@ description: Diagnoses and resolves memory leaks in JavaScript/Node.js applicati
|
||||
|
||||
# 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.
|
||||
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
|
||||
|
||||
@@ -30,29 +30,30 @@ When investigating a frontend web application memory leak, utilize the `chrome-d
|
||||
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.
|
||||
- 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
|
||||
### 3. Inspecting Retainers and Dominator Chains
|
||||
|
||||
When a class or object type grows unexpectedly, inspect the retaining chain with the MCP tools before changing code.
|
||||
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. External Tool Fallback
|
||||
### 4. Advanced Analysis and Categorized Filters
|
||||
|
||||
If the built-in MCP memory tools are not enough, use external tools as a fallback rather than reading raw snapshots directly.
|
||||
Use built-in MCP memory tools and filters to pinpoint specific leak categories directly without external tools.
|
||||
|
||||
- Read [references/memlab.md](references/memlab.md) for how to use `memlab` to analyze generated heap snapshots.
|
||||
- If `memlab` is not available, use the fallback script in the references directory to compare two `.heapsnapshot` files and identify the top growing objects and common leak types.
|
||||
|
||||
Run the fallback script using Node.js:
|
||||
- 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.
|
||||
- If standalone script comparisons are needed, run:
|
||||
|
||||
```bash
|
||||
node skills/memory-leak-debugging/references/compare_snapshots.js <baseline.heapsnapshot> <target.heapsnapshot>
|
||||
```
|
||||
|
||||
The script will analyze and output the top growing objects by size and highlight the 3 most common types of memory leaks (for example, detached DOM nodes, closures, and contexts) if they are present.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Common Memory Leaks
|
||||
|
||||
When analyzing a retainer trace from `memlab`, look for these common patterns in the codebase:
|
||||
When analyzing retaining paths, dominator chains, or class diffs with Chrome DevTools MCP memory tools, look for these common patterns in the codebase:
|
||||
|
||||
## 1. Uncleared Event Listeners
|
||||
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
# Using Memlab
|
||||
|
||||
[Memlab](https://facebook.github.io/memlab/) is an E2E testing and analysis framework for finding JavaScript memory leaks.
|
||||
|
||||
## Important Rule
|
||||
|
||||
**NEVER read raw `.heapsnapshot` files directly.** They are too large and will exceed context limits. Always use `memlab` commands to analyze them.
|
||||
|
||||
## Analyzing Snapshots
|
||||
|
||||
You can use the `take_heapsnapshot` tool provided by the `chrome-devtools-mcp` extension to generate heap snapshots during an investigation. To find leaks, you generally need 3 snapshots:
|
||||
|
||||
1. **Baseline:** Before the suspect action.
|
||||
2. **Target:** After the suspect action.
|
||||
3. **Final:** After reverting the suspect action (e.g., closing a modal, navigating away).
|
||||
|
||||
Once you have these 3 snapshots saved to disk, you can use `memlab` to find leaks:
|
||||
|
||||
```bash
|
||||
npx memlab find-leaks --baseline <path-to-baseline> --target <path-to-target> --final <path-to-final>
|
||||
```
|
||||
|
||||
You can also parse a single snapshot to find the largest objects or explore it individually:
|
||||
|
||||
```bash
|
||||
npx memlab analyze snapshot --snapshot <path-to-snapshot>
|
||||
```
|
||||
|
||||
Memlab will output the retainer traces for identified leaks. Use these traces to guide your search in the codebase.
|
||||
Reference in New Issue
Block a user