メモリリークデバッグ は何をしますか？
このスキルは、Chrome DevTools MCPツールを使用してJavaScriptおよびNode.jsアプリケーションのメモリリークを発見、診断、修正するための専門的なガイダンスとワークフローを提供します。
前提条件
高度なメモリデバッグツール（compare_heapsnapshots、get_heapsnapshot_detailsなど）は、サーバーが --memoryDebugging フラグを付けて起動された場合にのみ利用可能です。まずこれらのツールが利用可能かどうかを確認し、もし利用できない場合はMCP設定ファイルを読んで --memoryDebugging が有効になっているか確認してください。
基本原則
- MCPメモリツールを優先する: 生の
.heapsnapshotファイルを直接読み取ろうとしないでください。非常に大きく、トークンを大量に消費します。Chrome DevTools MCPヒープスナップショットツールを使用して、スナップショットの要約、比較、検査を行ってください。 - リークの隔離: リークがブラウザ（クライアントサイド）とNode.js（サーバーサイド）のどちらで発生しているかを特定します。
- 一般的な原因: 切り離されたDOMノード、未処理のクロージャ、グローバル変数、削除されていないイベントリスナー、無制限に増大するキャッシュに注目してください。注：切り離されたDOMノードは意図的なキャッシュである場合があります。それらをnullにする前に常にユーザーに確認してください。
- 読み込んだスナップショットを閉じる: ヒープスナップショットは大きくなる可能性があります。調査が完了したら、読み込んだ各スナップショットに対して
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を使用して、代表的なノードがまだ到達可能である理由を理解します。- 特定の
nodeIdを指定してget_heapsnapshot_object_detailsを使用し、詳細なオブジェクトメタデータ（サイズ、タイプ、距離、DOM切り離し状態）を取得します。 - 文字列の成長が差分で支配的な場合は、
get_heapsnapshot_duplicate_stringsを使用します。 - references/common-leaks.md を参照して、一般的なメモリリークの例と、保持パスがアプリケーションコードを指した後の修正方法を確認してください。
4. 高度な分析とカテゴリ別フィルター
組み込みのMCPメモリツールとフィルターを使用して、外部ツールを使わずに特定のリークカテゴリを直接特定します。
filterNameを指定してget_heapsnapshot_detailsまたはget_heapsnapshot_class_nodesを使用し、一般的なリーク原因をターゲットにします：objectsRetainedByDetachedDomNodes: メモリ内に保持されている切り離されたDOM要素を特定します。objectsRetainedByEventHandlers: 削除されていないイベントリスナーによって生存し続けているオブジェクトを特定します。objectsRetainedByContexts: クロージャまたは実行コンテキストに閉じ込められているオブジェクトを特定します。objectsRetainedByConsole: コンソールログによって保持されているオブジェクトを特定します。