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

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

Memory Inspector を開く

Memory Inspector を開く方法はいくつかあります。

メニューから開く

1. DevTools を開きます。
2. その他のオプション > [その他のツール] > [Memory Inspector] をクリックします。

デバッグ中に開く

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

6. Memory Inspector は次の方法で開くことができます。

   • アイコンから。buffer プロパティの横のアイコンをクリックします。
   • コンテキスト メニューから使用する場合。buffer プロパティを右クリックして、[Reveal in Memory Inspector パネル] を選択します。

   

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

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

Memory Inspector

メモリ インスペクタは、次の 3 つのメインエリアで構成されています。

ナビゲーション バー

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

メモリバッファ

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

値インスペクタ

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

メモリの検査

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

1. 以下の手順に沿ってデバッグを開始します。
2. 住所入力で住所を 0x00000027 に変更します。
3. ASCII 表現と値の解釈を確認します。現在、値はすべて空です。
4. Pointer 32-bit と Pointer 64-bit の横に青い [Jump to address] ボタンが表示されます。クリックするとアドレスに移動できます。無効な住所の場合、ボタンはグレー表示され、クリックできません。
5. [Resume script execution] をクリックすると、手順を順番に確認できます。
6. これで [ASCII 表現] が更新されました。すべての値の解釈も更新されます。
7. 値インスペクタをカスタマイズして、浮動小数点のみを表示しましょう。[settings] ボタンをクリックし、[Float 32-bit] と [Float 64-bit] のみをオンにします。
8. エンコードを dec から sci に変更しましょう。値の表示もそれに応じて更新されます。
9. キーボードまたはナビゲーション バーを使用して、メモリバッファを操作してみます。ステップ 4 を繰り返して、値の変化を確認します。

WebAssembly のメモリ検査

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

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

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

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

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

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

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

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

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

• C/C++ デバッグ用の Memory Inspector の拡張
• 最新のツールを使用した WebAssembly のデバッグ