借助“面向智能体的 Chrome 开发者工具”，您的编码智能体可以分析和修复应用中的客户端内存泄漏问题（包括 JavaScript 和 WebAssembly）。通过自动收集和分析堆快照，您的代理可以精确定位未正确进行垃圾回收的对象，并建议有针对性的代码重构。
在智能体工作流中，编码智能体会在不同的应用状态下拍摄多张快照，并使用专门的分析工具。
常见内存泄漏模式
内存分析侧重于查找常见的内存泄漏模式，包括：
- 未清除的事件监听器：附加到全局对象（如
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 网格推送到数组，而不会对之前的网格进行垃圾回收，因此建议优化对象重用。