メモリパネルの概要

Dale St. Marthe
Dale St. Marthe
LinkedIn

[メモリ] パネルには、JavaScript オブジェクトのメモリ分布の確認、メモリリークの検出と隔離、関数別のメモリ割り当ての内訳の表示などを行う診断ツールが用意されています。

概要

[Memory] パネルでは、3 種類のプロファイルをキャプチャできます。次のプロファイル タイプは、さまざまな視点からのスナップショットを表示し、さまざまな有用性を提供します。

  • ヒープ スナップショット。ヒープ スナップショットには、ページの JavaScript オブジェクトと関連する DOM ノードのメモリ分布が表示されます。
  • タイムラインでの割り当ての計測。割り当てタイムラインには、計測された JavaScript メモリ割り当ての推移が表示されます。プロファイルの録画後に時間間隔を選択して、プロファイル内に割り当てられ、録画が終了するまでに継続しているオブジェクトを表示できます。このプロファイル タイプを使用してメモリリークを隔離します。
  • 割り当てのサンプリング。サンプリング メソッドを使用してメモリ割り当てを記録します。このプロファイル タイプはパフォーマンスのオーバーヘッドが最小限で、長時間実行オペレーションに使用できます。JavaScript 実行スタックごとに分類された割り当てのおおよその値がわかります。

JavaScript VM インスタンスを選択して、これらの各プロファイルを実行できます。

詳しくは、次をご覧ください。

[Memory] パネルを開く

[メモリ] パネルを開くには:

  1. DevTools を開きます。
  2. 次のコマンドを実行して、コマンド メニューを開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニュー
  3. 「memory」と入力し、[メモリを表示] を選択して、Enter キーを押します。DevTools ウィンドウの上部に [Memory] パネルが表示されます。

または、次の方法で [Memory] パネルを開くこともできます。

  • 上部のアクションバーで、double_arrow [その他のパネル] をクリックし、プルダウン リストから [メモリ] を選択します。
  • 右上にある more_vert [その他のオプション] > [その他のツール] > [メモリ] を選択します。