エージェント向け Chrome DevTools を使用すると、コーディング エージェントはアプリケーションのクライアントサイドのメモリリーク（JavaScript や WebAssembly など）を分析して修正できます。ヒープ スナップショットの収集と分析を自動化することで、エージェントはガベージ コレクションが適切に行われていないオブジェクトを特定し、対象を絞ったコードのリファクタリングを提案できます。
エージェント ワークフローでは、コーディング エージェントがさまざまなアプリケーション状態のスナップショットを複数取得し、専用の分析ツールを使用します。
一般的なメモリリーク パターン
メモリ分析では、次のような一般的なリーク パターンの検出に重点が置かれています。
- クリアされていないイベント リスナー: ガベージ コレクションを妨げるグローバル オブジェクト（
windowやdocumentなど）にアタッチされたイベント リスナー。 - 切り離された DOM ノード: ドキュメント ツリーから削除されたが、JavaScript 変数によって参照されているノード。
- 意図しないグローバル変数: 適切なスコープなしで宣言され、メモリに永久に残る変数。
- クロージャー: 意図せずにラージ オブジェクトへの参照を独自のスコープに保持するクロージャー。
- 上限のないデータ構造: 上限なしで増加するキャッシュ保存に使用されるデータ構造。
メモリ分析に関する考慮事項
メモリ分析を使用する場合は、次の点に注意してください。
未加工のスナップショットを直接読み取らない: エージェントが未加工の
.heapsnapshotファイルを直接読み取らないようにします。大きすぎて、コンテキストの上限を超えています。メモリリークのデバッグ スキルは、これらのファイルを読み取らないようにエージェントに明示的に指示します。3 つのスナップショット手法: リークを確実に検出するには、通常、エージェントは 3 つのスナップショット（アクション前のベースライン、アクション後のターゲット、アクションの取り消し後の最終スナップショット）をキャプチャする必要があります。タイマー（
setTimeout）やアニメーション（requestAnimationFrame）によってトリガーされるアクションなど、ユーザー操作なしで発生するアクションもあり、元に戻すステップが必要ない場合もあります。タイマー（
setTimeout）やアニメーション（requestAnimationFrame）によってトリガーされるアクションなど、ユーザー操作なしで発生し、メモリ使用量を増やす可能性のあるアクションもあります。修正前に確認する: エージェントの検出結果を常に確認して、提案されたアクションがアプリのロジックに適用可能で正しいことを確認します。たとえば、エージェントに参照を null にするよう指示する前に、切り離されたノードが意図的なキャッシュの一部であるかどうかを確認します。
メモリリーク分析のユースケース
スナップショットを手動で取得して手動で差分を比較するのではなく、タイマーやユーザー操作などの繰り返しアクション中にメモリをプロファイリングするようエージェントに指示します。これらのワークフローを使用して、メモリ分析をデバッグ プロセスに統合します。
注: エージェントの実行手順は、潜在的な動作の例です。エージェントの動作は異なる場合があります。
ナビゲーション中にクリアされていないイベント リスナーを検出する
シングルページ アプリケーション（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 ノードを特定する
モーダル、ドロップダウン、複雑な UI コンポーネントは、DOM から削除された後も 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.
エージェントの実行例: エージェントは、必要なベースライン、ターゲット、最終スナップショットを収集しながら、設定モーダルを操作します。分析の結果、Detached 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 メッシュを配列にプッシュするたびに、以前のメッシュをガベージ コレクションしていないことを特定し、オブジェクトの再利用に関する最適化を提案します。