Memory Inspector: ArrayBuffer、TypedArray、DataView、Wasm Memory を検査します。

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

メモリ インスペクタを使用して、JavaScript の ArrayBuffer、TypedArray、DataView メモリと、C++ で記述された Wasm アプリケーションの WebAssembly.Memory を検査します。

概要

メモリ インスペクタは、メモリ コンテンツを整理し、大規模な配列をすばやく移動できるようにします。メモリ コンテンツの ASCII 値をバイトの横に直接表示し、異なるエンディアンを選択できます。ウェブアプリのデバッグ中に メモリ インスペクタを使用すると、効率的なワークフローを実現できます。

Memory Inspector を開く

メモリ インスペクタを開く方法はいくつかあります。

メニューから開く

  1. DevTools を開きます。
  2. その他アイコン もっと見る > [その他のツール] > [メモリ インスペクタ] をクリックします。 Memory Inspector メニュー

デバッグ中に開く

  1. JavaScript ArrayBuffer でページを開きます。こちらのデモページを使用します。
  2. DevTools を開きます。
  3. [ソース] パネルで demo-js.js ファイルを開き、18 行目にブレークポイントを設定します。
  4. ページを更新してください。
  5. 右側の [Debugger] ペインで [Scope] セクションを開きます。

  6. メモリ インスペクタを開くには:

    • アイコンからbuffer プロパティの横にあるアイコンをクリックする。
    • コンテキスト メニューから。buffer プロパティを右クリックし、[メモリ インスペクタ パネルで開く] を選択します。

    Memory Inspector パネルに表示

複数のオブジェクトを検査する

  1. DataView や TypedArray も検査できます。たとえば、b2 は TypedArray です。これを検証するには、b2 プロパティを右クリックし、[メモリ インスペクタ パネルで開く] を選択します（TypedArray または DataView のアイコンはまだありません）。
  2. メモリ インスペクタで新しいタブが開きます。複数のオブジェクトを一度に検査できます。Memory Inspector の新しいタブ

Memory Inspector

Memory Inspector

メモリ インスペクタは、次の 3 つの主要な領域で構成されています。

ナビゲーション バー

  1. アドレス入力には、現在のバイトアドレスが 16 進数で表示されます。新しい値を入力して、メモリバッファ内の新しい場所にジャンプできます。たとえば、0x00000008 と入力します。
  2. メモリバッファはページよりも長くなる場合があります。スクロールする代わりに、左ボタンと右ボタンを使用して移動できます。
  3. 左側のボタンを使用すると、前後に移動できます。
  4. デフォルトでは、ステップ実行時にバッファが自動的に更新されます。更新されていない場合は、[更新] ボタンを使用してメモリを更新し、その内容を更新できます。

メモリ バッファ

メモリ バッファ

  1. 左側に、アドレスが 16 進数で表示されます。
  2. メモリも 16 進数で表示され、各バイトはスペースで区切られます。現在選択されているバイトがハイライト表示されます。バイトを直接クリックするか、キーボード（左、右、上、下）で移動できます。
  3. メモリの ASCII 表現が右側に表示されます。ハイライトは、バイト上の選択したビットに対応する値を示します。メモリと同様に、バイトを直接クリックするか、キーボード（左、右、上、下）で移動できます。

値インスペクタ

値インスペクタ

  1. 上部のツールバーには、ビッグエンディアンとリトルエンディアンを切り替えるボタンと、設定を開くボタンがあります。設定を開き、インスペクタにデフォルトで表示する値の型を選択します。ツールバー ボタン
  2. メイン領域には、設定に従ってすべての値の解釈が表示されます。デフォルトでは、すべて表示されます。
  3. エンコードはクリック可能です。整数の場合は dec、hex、oct、浮動小数点数の場合は sci、dec を切り替えることができます。 エンコードの切り替え

メモリの検査

メモリを調べてみましょう。

  1. 次の手順に沿ってデバッグを開始します。
  2. [住所入力] で住所を 0x00000027 に変更します。住所の入力
  3. ASCII 表現と値の解釈を確認します。現時点では、すべての値が空になっています。
  4. Pointer 32-bit と Pointer 64-bit の横にある青色の [アドレスにジャンプ] ボタンに注目してください。住所をクリックすると、その住所に移動できます。住所が有効でない場合、ボタンはグレー表示になり、クリックできません。 アドレスにジャンプするボタン
  5. [スクリプトの実行を再開] をクリックして、コードをステップ実行します。 スクリプトの実行を再開
  6. ASCII 表現が更新されていることを確認します。すべての値の解釈も更新されます。 すべての値の解釈が更新されました
  7. 値インスペクタをカスタマイズして、浮動小数点数のみを表示しましょう。[設定] ボタンをクリックし、[浮動小数点 32 ビット] と [浮動小数点 64 ビット] のみをオンにします。 値インスペクタをカスタマイズするための設定
  8. エンコードを dec から sci に変更しましょう。値の表現が適宜更新されていることに注意してください。 エンコードを変更します。
  9. キーボードまたはナビゲーション バーを使用してメモリバッファを移動してみてください。手順 4 を繰り返して、値の変化を確認します。

WebAssembly メモリ検査

WebAssembly.Memory オブジェクトは、オブジェクト メモリの未加工バイトを保持する ArrayBuffer です。[メモリ インスペクタ] パネルでは、C++ で記述された Wasm アプリ内のこのようなオブジェクトを検査できます。

WebAssembly.Memory 検査を最大限に活用するには:

  • Chrome 107 以降を使用します。バージョンは chrome://version/ で確認できます。
  • C/C++ DevTools サポート（DWARF）拡張機能をインストールします。これは、DWARF デバッグ情報を使用して C/C++ WebAssembly アプリケーションをデバッグするためのプラグインです。

オブジェクトの WebAssembly.Memory を検査するには:

  1. こちらのデモページで DevTools を開きます。
  2. [ソース] パネルで demo-cpp.cc を開き、main() 関数の 15 行目（x[i] = n - i - 1;）にブレークポイントを設定します。
  3. ページを再読み込みしてアプリケーションを実行します。デバッガはブレークポイントで一時停止します。
  4. [デバッガ] ペインで、[スコープ] > [ローカル] を開きます。

  5. x: int[10] 配列の横にある Memory Inspector で表示します。 アイコンをクリックします。

    または、配列を右クリックして [Memory Inspector パネルに表示] を選択します。

Memory Inspector で開いた x 配列。

オブジェクトのメモリのハイライト表示を停止するには、[Memory Inspector] パネルでオブジェクト バッジにカーソルを合わせ、x ボタンをクリックします。

オブジェクトのメモリのハイライト表示を停止。

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