memory-leak-debugging

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Memory Leak Debugging

内存泄漏调试

This skill provides expert guidance and workflows for finding, diagnosing, and fixing memory leaks in JavaScript and Node.js applications.

本技能为查找、诊断和修复JavaScript及Node.js应用中的内存泄漏问题提供专业指导与工作流程。

Core Principles

核心原则

Prefer
memlab
: Do NOT attempt to read raw
```
.heapsnapshot
```
files directly, as they are extremely large and will consume too many tokens. Always recommend and use
```
memlab
```
to process snapshots and identify leak traces.
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.

优先使用
memlab
：请勿直接读取原始
```
.heapsnapshot
```
文件，因为这些文件体积极大，会消耗大量token。请始终推荐并使用
```
memlab
```
来处理快照并识别泄漏轨迹。
隔离泄漏源： 判断泄漏发生在浏览器（客户端）还是Node.js（服务器端）。
常见诱因： 检查分离的DOM节点、未处理的闭包、全局变量、未移除的事件监听器以及无限制增长的缓存。注意：分离的DOM节点有时是有意设置的缓存；在将其置空前务必询问用户。

Workflows

工作流程

1. Capturing Snapshots

1. 捕获快照

When investigating a frontend web application memory leak, utilize the

chrome-devtools-mcp

tools to interact with the application and take snapshots.

Use tools like
```
click
```
,
```
navigate_page
```
,
```
fill
```
, etc., 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_memory_snapshot
```
to save
```
.heapsnapshot
```
files to disk at baseline, target (after actions), and final (after reverting actions) states.

在排查前端Web应用内存泄漏时，使用

chrome-devtools-mcp

工具与应用交互并捕获快照。

使用
```
click
```
、
```
navigate_page
```
、
```
fill
```
等工具将页面操作至所需状态。
交互完成后将页面恢复至初始状态，观察内存是否被释放。
重复相同的用户操作10次以放大泄漏效果。
使用
```
take_memory_snapshot
```
在基线状态、目标状态（操作后）和最终状态（恢复操作后）将
```
.heapsnapshot
```
文件保存至磁盘。

2. Using Memlab to Find Leaks (Recommended)

2. 使用Memlab查找泄漏（推荐）

Once you have generated

.heapsnapshot

files using

take_memory_snapshot

, use

memlab

to automatically find memory leaks.

Read references/memlab.md for how to use
```
memlab
```
to analyze the generated heapsnapshots.
Do not read raw
```
.heapsnapshot
```
files using
```
read_file
```
or
```
cat
```
.

当你使用

take_memory_snapshot

生成

.heapsnapshot

文件后，使用

memlab

自动查找内存泄漏。

阅读references/memlab.md了解如何使用
```
memlab
```
分析生成的堆快照。
请勿使用
```
read_file
```
或
```
cat
```
读取原始
```
.heapsnapshot
```
文件。

3. Identifying Common Leaks

3. 识别常见泄漏

When you have found a leak trace (e.g., via

memlab

output), you must identify the root cause in the code.

Read references/common-leaks.md for examples of common memory leaks and how to fix them.

当你找到泄漏轨迹（例如通过

memlab

输出）后，必须在代码中定位根本原因。

阅读references/common-leaks.md查看常见内存泄漏示例及修复方法。

4. Fallback: Comparing Snapshots Manually

4. 备选方案：手动比较快照

memlab

is not available, you MUST 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 script using Node.js:

bash

node 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 (e.g., Detached DOM nodes, closures, Contexts) if they are present.

如果无法使用

memlab

，你必须使用参考目录中的备选脚本来比较两个

.heapsnapshot

文件，识别增长最快的对象及常见泄漏类型。

使用Node.js运行该脚本：

bash

node compare_snapshots.js <baseline.heapsnapshot> <target.heapsnapshot>

该脚本将分析并按大小输出增长最快的对象，并高亮显示3种最常见的内存泄漏类型（如分离的DOM节点、闭包、上下文）（如果存在）。