面向智能体的 Chrome 开发者工具可让您的编码智能体分析和修复应用中的客户端内存泄漏问题（包括 JavaScript 和 WebAssembly）。通过自动收集和分析堆快照，您的智能体可以找出未被正确垃圾回收的对象，并建议有针对性的代码重构。
在 Agentic Workflows 中，您的编码智能体会在不同的应用状态下拍摄多个快照，并使用专门的分析工具。
启用内存调试工具
默认情况下，面向智能体的 Chrome 开发者工具仅公开 take_heapsnapshot
工具。分析堆快照的工具（例如
compare_heapsnapshots、get_heapsnapshot_summary 和
get_heapsnapshot_retaining_paths）仅在您使用 --memoryDebugging
标志启动服务器时可用。如果没有此标志，您的智能体可以捕获快照，但无法分析快照。
如需启用内存调试工具，请将 --memoryDebugging 添加到服务器实参：
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
如需了解更多选项，请参阅 配置。
常见的内存泄漏模式
内存分析的重点是查找常见的泄漏模式，包括：
- 未清除的事件监听器： 附加到全局对象（如
window或document）的事件监听器，会阻止垃圾回收。 - 分离的 DOM 节点： 从文档树中移除但仍被 JavaScript 变量引用的节点。
- 意外的全局变量： 未正确限定范围而声明的变量，会永远保留在内存中。
- 闭包： 闭包会无意中在其自己的范围内保留对大型对象的引用。
- 无界数据结构： 用于缓存的数据结构，会无限增长。
内存分析注意事项
使用内存分析时，请注意以下事项：
请勿直接读取原始快照： 请勿让您的智能体直接读取原始
.heapsnapshot文件。这些文件过大，超出了上下文限制。内存泄漏调试技能明确指示智能体避免读取这些文件。三快照方法： 为了可靠地查找泄漏，您的智能体通常需要捕获三个快照：操作前的基准快照、操作后的目标快照，以及还原操作后的最终快照。 请注意，某些操作（例如由计时器 (
setTimeout) 或动画 (requestAnimationFrame) 触发的操作）会在没有用户互动的情况下发生，可能不需要还原步骤。请注意，某些操作（例如由计时器 (
setTimeout) 或动画 (requestAnimationFrame) 触发的操作）会在没有用户互动的情况下发生，但仍可能会增加内存用量。先验证，再修复： 请务必检查智能体的调查结果，确保其建议的操作适用于您的应用逻辑且正确无误。 例如，在指示智能体将引用设为 null 之前，请先确认分离的节点是否是有意缓存的一部分。
内存泄漏分析用例
指示您的智能体在重复操作（包括计时器和用户互动）期间分析内存，而不是手动拍摄快照并手动进行比较。通过以下工作流将内存分析集成到调试流程中。
注意： 智能体执行步骤是潜在行为的示例。您的智能体可能会采取不同的行动。
在导航期间检测未清除的事件监听器
单页应用 (SPA) 通常会在开发者忘记在组件卸载后移除全局事件监听器时发生内存泄漏。您可以让智能体验证在视图之间导航时内存是否已正确释放。
提示示例：
Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.
智能体执行示例： 您的智能体会在首页上拍摄基准堆快照，导航到信息中心，然后导航回首页以拍摄最终快照。然后，它会使用内部分析工具评估快照，检测到附加到
window 对象的 scroll 监听器从未被清除，并在组件的清理函数中提供调用 removeEventListener
的具体代码。
识别界面组件中分离的 DOM 节点
如果从 DOM 中移除模态框、下拉菜单和复杂的界面组件后，JavaScript 变量中仍保留对这些组件的引用，则这些组件通常会留下分离的 DOM 节点。
提示示例：
Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.
智能体执行示例： 您的智能体在收集所需的基准快照、目标快照和最终快照时，会与设置模态框互动。分析显示，有几个不断增长的对象被标记为
Detached HTMLDivElement。智能体会告知您这一发现，并在更改代码以将保存 DOM 引用的变量设置为 null
之前征求您的确认。
在持续互动中查找无界缓存
如果底层数组或映射无限增长且没有上限，则无限滚动或持续数据提取等功能可能会发生内存泄漏。
提示示例：
Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.
智能体执行示例： 您的智能体会分析滚动前后的内存状态。它会识别出一个无意中捕获了一个无限增长的大型数组的闭包。智能体会建议实现缓存限制，或对与对象生命周期相关联的数据使用 WeakMap，以便进行正确的垃圾回收。
调试后台进程中的内存泄漏
动画和后台计时器可能会在没有明确用户互动的情况下发生内存泄漏。您可以指示智能体监控内存随时间的增长情况，以查找这些进程的内存泄漏。
提示示例：
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
智能体执行示例： 您的智能体会探索画布应用，并自动定期拍摄快照，以监控内存用量随时间的用量。它会分析堆，并识别出渲染循环在每个帧上都会将新的 WebGL 网格推送到数组中，而不会对之前的网格进行垃圾回收，因此建议优化对象重用。