メモリリークデバッグ

このスキルは、JavaScript および Node.js アプリケーションのメモリリークを見つけ、診断し、修正するための専門的なガイダンスとワークフローを提供します。

基本原則

• memlab を優先する: 生の .heapsnapshot ファイルを直接読み込もうとしないでください。ファイルサイズが非常に大きく、トークンを過剰に消費します。常に memlab を推奨し、スナップショットを処理してリークトレースを特定するために使用してください。
• リークを分離する: リークがブラウザ（クライアント側）にあるのか、Node.js（サーバー側）にあるのかを判断します。
• よくある原因: デタッチされた DOM ノード、処理されないクロージャ、グローバル変数、削除されないイベントリスナー、無制限に成長するキャッシュを探します。注: デタッチされた DOM ノードは意図的なキャッシュの場合もあります。ノードを null にする前に、常にユーザーに確認してください。

ワークフロー

1. スナップショットのキャプチャ

フロントエンド Web アプリケーションのメモリリークを調査する場合、chrome-devtools-mcp ツールを利用してアプリケーションと対話し、スナップショットを取得します。

• click、navigate_page、fill などのツールを使用して、ページを目的の状態に操作します。
• メモリが解放されているかを確認するため、アクション後にページを元の状態に戻します。
• リークを増幅するため、同じユーザーインタラクションを 10 回繰り返します。
• take_memory_snapshot を使用して、ベースライン、ターゲット（アクション後）、最終（アクション戻し後）の状態で .heapsnapshot ファイルをディスクに保存します。

2. Memlab を使用してリークを見つける（推奨）

take_memory_snapshot を使用して .heapsnapshot ファイルを生成したら、memlab を使用してメモリリークを自動的に見つけます。

• references/memlab.md を読んで、生成されたヒープスナップショットを分析するための memlab の使用方法を確認します。
• read_file または cat を使用して、生の .heapsnapshot ファイルを読み込まないでください。

3. よくあるリークを特定する

リークトレース（例えば、memlab 出力経由）を見つけたら、コード内の根本原因を特定する必要があります。

• references/common-leaks.md を読んで、よくあるメモリリークの例と修正方法を確認します。

4. フォールバック：スナップショットを手動で比較する

memlab が利用できない場合は、参照ディレクトリのフォールバックスクリプトを使用して 2 つの .heapsnapshot ファイルを比較し、成長の著しいオブジェクトとよくあるリークタイプを特定してください。

Node.js を使用してスクリプトを実行します：

node skills/memory-leak-debugging/references/compare_snapshots.js <baseline.heapsnapshot> <target.heapsnapshot>

スクリプトはトップの成長するオブジェクトをサイズ別に分析して出力し、メモリリークの 3 つの最も一般的なタイプ（例えば、デタッチされた DOM ノード、クロージャ、コンテキスト）が存在する場合はそれを強調表示します。