記憶體洩漏除錯 是做什麼的？
此技能提供使用 Chrome DevTools MCP 工具來尋找、診斷並修復 JavaScript 和 Node.js 應用程式中記憶體洩漏的專家指導與工作流程。
先決條件
進階記憶體除錯工具（compare_heapsnapshots、get_heapsnapshot_details 等）僅在伺服器以 --memoryDebugging 標記啟動時才可使用。請先檢查這些工具是否可用；若無，請嘗試讀取 MCP 設定檔，確認 --memoryDebugging 是否已啟用。
核心原則
- 優先使用 MCP 記憶體工具： 請勿嘗試直接讀取原始
.heapsnapshot檔案，因為它們非常龐大且會消耗過多 token。請改用 Chrome DevTools MCP 堆積快照工具來彙總、比較和檢查快照。 - 隔離洩漏來源： 判斷洩漏發生在瀏覽器（用戶端）還是 Node.js（伺服器端）。
- 常見嫌疑犯： 尋找分離的 DOM 節點、未被處理的閉包、全域變數、未移除的事件監聽器，以及無限制增長的快取。注意：分離的 DOM 節點有時是刻意的快取；在設為 null 之前務必先詢問使用者。
- 關閉已載入的快照： 堆積快照可能很大。完成調查後，請對每個載入的快照使用
close_heapsnapshot，以釋放 MCP 伺服器持有的記憶體。
工作流程
1. 擷取快照
在調查前端網頁應用程式的記憶體洩漏時，請使用 chrome-devtools-mcp 工具與應用程式互動並擷取快照。
- 使用頁面範圍的工具，例如
click、navigate_page、fill等（指定pageId），將頁面操作至所需的狀態。 - 互動後將頁面回復至原始狀態，以觀察記憶體是否釋放。
- 重複相同的使用者互動 10 次，以放大洩漏效果。
- 使用
take_heapsnapshot（搭配pageId）在基準狀態（baseline）、目標狀態（target，操作後）和最終狀態（final，回復後）將.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：識別因 console 日誌而被保留的物件。