使用 AI 代理分析記憶體流失情形

程式設計代理可透過代理專用 Chrome 開發人員工具,分析及修正應用程式中的用戶端記憶體流失問題 (包括 JavaScript 和 WebAssembly)。代理程式會自動收集及分析堆積快照,找出未正確進行垃圾回收的物件,並建議針對特定程式碼重構。

在 Agentic Workflows 中,程式設計代理會擷取不同應用程式狀態的多個快照,並使用專門的分析工具。

啟用記憶體偵錯工具

根據預設,代理專用 Chrome 開發人員工具只會公開 take_heapsnapshot 工具。只有使用 --memoryDebugging 旗標啟動伺服器時,才能使用分析堆積快照的工具 (例如 compare_heapsnapshots、get_heapsnapshot_summary 和 get_heapsnapshot_retaining_paths)。如果沒有這個旗標,代理程式可以擷取快照,但無法分析。

如要啟用記憶體偵錯工具,請將 --memoryDebugging 新增至伺服器引數:

"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]

如需更多選項,請參閱「設定」。

常見的記憶體流失模式

記憶體分析著重於找出常見的洩漏模式,包括:

  • 未清除的事件監聽器:附加至全域物件 (例如 window 或 document) 的事件監聽器,會阻止垃圾回收。
  • 分離的 DOM 節點:從文件樹狀結構中移除,但仍由 JavaScript 變數參照的節點。
  • 非預期的全域變數:宣告變數時未指定適當範圍,導致變數永久留在記憶體中。
  • 閉包:閉包在自身範圍內無意中保留對大型物件的參照。
  • 無界資料結構:用於快取的資料結構,可無限擴充。

記憶體分析注意事項

使用記憶體分析時,請注意下列事項:

  • 請勿直接讀取原始快照:請勿讓代理程式直接讀取原始 .heapsnapshot 檔案。因為這些檔案太大,超出內容限制。記憶體流失偵錯技能會明確指示代理避免讀取這些檔案。

  • 三快照方法:為確實找出洩漏,代理程式通常需要擷取三個快照:動作前的基準、動作後的目標,以及還原動作後的最終快照。請注意,部分動作 (例如由計時器 (setTimeout) 或動畫 (requestAnimationFrame) 觸發的動作) 會在使用者未互動時發生,可能不需要還原步驟。

    請注意,某些動作 (例如由計時器 (setTimeout) 或動畫 (requestAnimationFrame) 觸發的動作) 會在沒有使用者互動的情況下發生,且仍可能增加記憶體用量。

  • 先驗證再修正:請務必查看代理的發現結果,確保建議動作適用於應用程式邏輯,且正確無誤。舉例來說,請先確認卸離的節點是否為有意快取的一部分,再指示代理程式將參照設為空值。

記憶體流失分析的用途

指示代理程式在重複動作期間分析記憶體,包括計時器和使用者互動,而不是手動擷取快照並進行差異比較。透過這些工作流程,將記憶體分析整合至偵錯程序。

注意:代理執行步驟是潛在行為的範例。代理程式的行為可能有所不同。

在導覽期間偵測未清除的事件監聽器

如果開發人員忘記在元件卸載後移除全域事件監聽器,單頁應用程式 (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。

找出 UI 元件中卸離的 DOM 節點

如果從 DOM 移除模態、下拉式選單和複雜的 UI 元件後,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.

代理執行範例:代理會與設定模式互動,同時收集必要基準、目標和最終快照。分析結果顯示,有幾個物件正在成長,並標示為「卸離的 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 網格推送至陣列,而不會對先前的網格進行垃圾回收,進而建議物件重複使用的最佳化。