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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

概要

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

Memory Inspector を開く

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

メニューから開く

  1. DevTools を開きます。
  2. [その他のオプション] もっと見る >その他のツール >Memory Inspector: 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 パネル] を選択します。

    Memory Inspector パネルに表示

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

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

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

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 ビット浮動小数点数] のみをオンにします。 Value Inspector をカスタマイズする
  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] 配列の横にある Memory Inspector で表示。 アイコンをクリックします。

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

Memory Inspector で開かれた x 配列。

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

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

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