memory-leak-debugging

内存泄漏调试

此技能提供专家指导和 工作流，用于使用 Chrome DevTools MCP 工具查找、诊断和修复 JavaScript 和 Node.js 应用中的内存泄漏。

先决条件

高级内存调试工具（compare_heapsnapshots、get_heapsnapshot_details 等）仅在服务器以 --memoryDebugging 标志启动时可用。首先检查这些工具是否可用；如果不可用，尝试读取 MCP 配置文件以检查是否启用了 --memoryDebugging。

核心原则

• 优先使用 MCP 内存工具： 不要尝试直接读取原始 .heapsnapshot 文件，因为它们极大且会消耗过多 token。使用 Chrome DevTools MCP 堆快照工具来汇总、比较和检查快照。
• 隔离泄漏： 确定泄漏是在浏览器（客户端）还是 Node.js（服务端）。
• 常见罪魁祸首： 查找分离的 DOM 节点、未处理的闭包、全局变量、未移除的事件监听器以及无限增长的缓存。注意：分离的 DOM 节点有时是有意为之的缓存；在将其置空之前务必询问用户。
• 关闭已加载的快照： 堆快照可能很大。完成调查后，对每个已加载的快照使用 close_heapsnapshot 以释放 MCP 服务占用的内存。

工作流

1. 捕获快照

在调查前端 Web 应用内存泄漏时，利用 chrome-devtools-mcp 工具与应用交互并拍摄快照。

• 使用页面级工具如 click、navigate_page、fill 等（指定 pageId）将页面操作到所需状态。
• 在交互后将页面还原到原始状态，以查看内存是否释放。
• 将相同的用户交互重复 10 次以放大泄漏。
• 使用 take_heapsnapshot（配合 pageId）将 .heapsnapshot 文件保存到磁盘，分别在基线、目标（操作后）和最终（还原操作后）状态。

2. 比较快照

一旦你使用 take_heapsnapshot 生成了 .heapsnapshot 文件，使用 Chrome DevTools MCP 内存工具进行比较。

• 对每个快照先运行 get_heapsnapshot_summary，以确认文件能加载并比较高层总计。
• 使用 compare_heapsnapshots 比较基线和目标快照。先不使用 classIndex 获取摘要差异，然后仅对可疑增长指定 classIndex 请求详细的类差异。
• 在深入特定节点 ID 之前，先使用 compare_heapsnapshots 的摘要输出。

3. 检查保留者和支配者链

当类或对象类型意外增长时，在更改代码前使用 MCP 工具检查保留链和支配者。

• 使用 get_heapsnapshot_class_nodes 列出可疑类的实例。
• 使用 get_heapsnapshot_retainers、get_heapsnapshot_retaining_paths、get_heapsnapshot_dominators 和 get_heapsnapshot_edges 理解为何代表性节点仍然可达。
• 使用 get_heapsnapshot_object_details 并指定 nodeId 获取详细的对象元数据（大小、类型、距离和 DOM 分离状态）。
• 当字符串增长在差异中占主导时，使用 get_heapsnapshot_duplicate_strings。
• 在保留路径指向应用代码后，阅读 references/common-leaks.md 获取常见内存泄漏示例及修复方法。

4. 高级分析与分类过滤器

使用内置的 MCP 内存工具和过滤器，无需外部工具即可直接定位特定的泄漏类别。

• 使用 get_heapsnapshot_details 或 get_heapsnapshot_class_nodes 并配合 filterName，以针对常见的泄漏原因：
  • objectsRetainedByDetachedDomNodes：识别内存中保留的已分离 DOM 元素。
  • objectsRetainedByEventHandlers：识别因未移除的事件监听器而保持存活的对象。
  • objectsRetainedByContexts：识别被困在闭包或执行上下文中的对象。
  • objectsRetainedByConsole：识别因控制台日志记录而保留的对象。