【Edge】メモリ使用量グラフをEdgeで時系列に記録する開発者向けデバッグ手順

EdgeブラウザでWebアプリケーションのメモリリークを調査する際、メモリ使用量の時系列変化を確認する必要があります。Edgeの開発者ツールには、リアルタイムでメモリ使用量をグラフ表示する「パフォーマンスモニター」機能が用意されています。この機能を使うと、JavaScriptヒープの増減を視覚的に捉えられます。本記事では、パフォーマンスモニターの起動方法から時系列データの記録手順までを解説します。

Edgeのパフォーマンスモニターでできること

パフォーマンスモニターは、EdgeのDevToolsに組み込まれたリアルタイムパフォーマンス監視ツールです。CPU使用率、JavaScriptヒープサイズ、DOMノード数、イベントリスナー数などのメトリクスをグラフで表示します。この機能を利用するには、Edgeの最新バージョンが必要です。Windows11およびWindows10のEdgeで利用可能です。特にJSヒープサイズのグラフは、メモリリークの兆候を捉えるのに役立ちます。グラフは横軸が時間、縦軸が各メトリクスの値で、直近約30秒間の推移が表示されます。

メモリ使用量を時系列記録する手順

パフォーマンスモニターの起動

1. DevToolsを開く
   デバッグしたいタブでF12キーを押します。または右上の「設定など」アイコンから「その他のツール」→「開発者ツール」を選択します。ページ上で右クリックして「検査」を選んでも開けます。
2. コンソールドロワーを表示
   DevTools内でEscキーを押します。下部にコンソールドロワーが表示されます。Escキーが効かない場合は、DevToolsをフロート表示に切り替えてから試してください。
3. パフォーマンスモニターを選択
   コンソールドロワーの左上にある3点リーダーメニュー(縦3点)をクリックし、「Performance monitor」を選択します。日本語UIでは「パフォーマンス モニター」と表示されます。

表示項目の設定と監視

4. 監視したい項目を確認
   デフォルトでは「CPU usage」「JS heap size」「DOM Nodes」「JS event listeners」の4項目が表示されます。各項目の横にチェックボックスがあり、表示/非表示を切り替えられます。
5. メモリ監視に最適化
   メモリに焦点を当てるには、「JS heap size」のみチェックを入れるとグラフがシンプルになり、変化を追いやすくなります。また、「DOM Nodes」もメモリに関連するので、両方を表示するのも良いでしょう。
6. 監視を開始
   パフォーマンスモニターは自動的にリアルタイム更新を開始します。ブラウザで操作(ページ遷移、ボタンクリックなど)を行うと、グラフが動的に変化します。メモリリークがある場合、時間経過とともにJSヒープサイズが増加傾向を示します。

時系列データの記録

7. 画面録画による記録
   Windowsの「ゲームバー」(Win+G)やOBS Studioなどの画面録画ソフトで、グラフ領域を録画します。後から時間経過に沿った変化を確認でき、デバッグに活用できます。録画中は操作内容も同時に記録されると原因特定が容易です。
8. スクリーンショットの撮影
   定期的にスクリーンショット(Win+Shift+S)を撮影し、画像を時系列で保存します。手動ですが、特定のイベント前後の比較に有効です。
9. コンソールから数値を取得
   JavaScriptのperformance.memoryオブジェクトを使うと、JSヒープサイズの数値を取得できます。DevToolsのコンソールタブで下記のように入力すれば、その時点のusedJSHeapSizeを確認できます。
   console.log(performance.memory.usedJSHeapSize);
   このコマンドを定期的に実行して値を記録すれば、数値データとして保存できます。

パフォーマンスモニター利用時の注意点

グラフが表示されない場合の対処

パフォーマンスモニターが表示されない場合は、Edgeのバージョンが古い可能性があります。Edgeを最新版に更新してください。また、DevToolsを複数開いていると干渉することがあるため、一度すべて閉じてから再試行してください。

データの解釈における注意

パフォーマンスモニターの値はブラウザの内部メトリクスであり、正確なメモリ使用量ではありません。特にJSヒープサイズはガベージコレクションの影響で変動します。絶対値ではなく、操作に伴う増加傾向を把握するために使いましょう。

パフォーマンスへの影響

パフォーマンスモニター自体がブラウザのリソースを消費します。監視中はパフォーマンスがわずかに低下する可能性があります。本番環境での長時間の監視は避け、必要最小限の時間で行ってください。

他の監視方法との併用

より詳細なメモリプロファイリングが必要な場合は、DevToolsの「パフォーマンス」パネル(録音ボタン)を使用してください。こちらはスナップショット方式で、リアルタイムグラフではありませんが、メモリ割り当ての内訳を確認できます。パフォーマンスモニターと組み合わせると、全体傾向と詳細の両方を把握できます。

パフォーマンスモニターと他の監視ツールの比較

ご自身の目的に合わせて、これらのツールを使い分けると良いでしょう。例えば、JSヒープの細かい変動を追うならパフォーマンスモニター、特定のタブのメモリ消費をチェックするならブラウザタスクマネージャーが適しています。

まとめ

本記事では、EdgeのDevToolsに搭載されたパフォーマンスモニターを使い、メモリ使用量を時系列グラフで記録する手順を解説しました。パフォーマンスモニターを起動し、JSヒープサイズのグラフを画面録画することで、メモリリークの原因となる操作の特定に役立ちます。さらに正確なデータが必要な場合は、DevToolsの「パフォーマンス」パネルでメモリスナップショットを取得する方法も試してみてください。Edgeの開発者ツールを活用して、アプリケーションのパフォーマンスを効率的に改善しましょう。