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

Jecelyn Yeen

Sofia Emelianova

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

概要

Memory Inspector は、メモリの内容を整理し、大きな配列をすばやく操作するのに役立ちます。メモリ コンテンツの ASCII 値がバイトのすぐ横に表示され、別のエンディアンを選択できます。ウェブアプリをデバッグする際に Memory Inspector を使用すると、ワークフローを効率化できます。

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 で新しいタブが開きます。複数のオブジェクトを同時に検査することもできます。

Memory Inspector

Memory Inspector は、次の 3 つのメインエリアで構成されています。

ナビゲーション バー

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

メモリバッファ

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

Value Inspector

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

メモリの検査

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

1. 次の手順に沿ってデバッグを開始します。
2. 住所入力欄にある住所を 0x00000027 に変更します。
3. ASCII 表現と値の解釈を確認します。現時点では、すべての値が空白です。
4. Pointer 32-bit と Pointer 64-bit の横に青い [Jump to address] ボタンがあります。クリックするとそのアドレスに移動します。アドレスが有効でない場合、ボタンはグレー表示され、クリックできません。
5. [Resume script execution] をクリックして、コードをステップ実行します。
6. ASCII 表現が更新されています。値の解釈もすべて更新されます。
7. 値インスペクタをカスタマイズして、浮動小数点のみを表示してみましょう。[設定] ボタンをクリックし、[32 ビット浮動小数点数] と [64 ビット浮動小数点数] のみをオンにします。
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. [Sources] パネルで demo-cpp.cc を開き、main() 関数（15 行目 x[i] = n - i - 1;）のブレークポイントを設定します。
3. ページを再読み込みして、アプリケーションを実行します。デバッガはブレークポイントで一時停止します。
4. [Debugger] ペインで、[Scope] >ローカル。

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

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

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

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

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