memory-leak-debugging

メモリリークのデバッグ

このスキルは、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: コンソールログによって保持されているオブジェクトを特定します。