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

Jecelyn Yeen

Sofia Emelianova

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

概要

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

Memory Inspector を開く

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

メニューから開く

1. DevTools を開きます。
2. その他アイコン > [その他のツール] > [メモリ インスペクタ] をクリックします。

デバッグ中に開く

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

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

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

   

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

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

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] パネルでオブジェクト バッジにカーソルを合わせ、x ボタンをクリックします。

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

• C/C++ デバッグ用に Memory Inspector を拡張する
• 最新のツールで WebAssembly をデバッグする。