メモリ インスペクターを使用して JavaScript ArrayBuffer を検査する

メモリ インスペクターを使用して、次の種類のオブジェクトを表示および操作します。

メモリ インスペクターを使用すると、さまざまな種類のメモリ オブジェクトを表示したり、移動したり、値の解釈に使用する型を選択したりできます。 バイトの横に ASCII 値が表示され、異なるエンディアンを選択できます。

メモリ インスペクター パネル

メモリ インスペクター ツールは、デバッグ時にArrayBuffersを検査するソース ツールよりも大きな機能を提供します。 [ソース] ツールの [スコープ ] ビューには、配列バッファー内の 1 つの値の一覧が表示されるため、すべてのデータを見にくくなります。 さらに、バッファー内の特定の範囲に移動するには、特定のインデックスまでスクロールする必要があり、32 ビット整数などの別の形式で表示する場合でも、値は常に 1 バイトとして表示されます。

ソース ツール スコープ パネルでは、メモリを検査する機能が制限されています

デバッグ中にメモリ インスペクターを開く

例:

  1. Microsoft Edge を起動します。

  2. テスト サイト Inspect ArrayBuffers in JS (Memory in JS) (http://memory-inspector.glitch.me/demo-js.html) (404) を開きます。 (Glitch.me プロジェクトのホスティングは、2025 年 7 月 8 日に終了しました。このテスト サイトは、github.io でのホスティングを含む、 https://github.com/MicrosoftEdge/Demosに移行する予定です)。

  3. F12 または Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押して DevTools を開きます。

  4. [ ソース ] をクリックし、 demo-js.js ファイルを開きます。

  5. 次の図に示すように 、18 行目にブレークポイントを設定します。

    JavaScript ファイルのメモリ インスペクターのブレークポイントの設定

  6. Web ページを更新します。 JavaScript がブレークポイントで一時停止するため、表示に失敗します。

  7. 右側の [デバッガー] ウィンドウの [ スコープ] で、 buffer 行を見つけます。

  8. buffer行から、次のいずれかの方法を使用して Memory Inspector を開くことができます。

    • bufferプロパティ行の末尾にある [メモリ内に表示] インスペクター パネル アイコン ([メモリ内に表示] インスペクター パネル アイコン) をクリックするか、または

    • コンテキスト メニューから。 buffer プロパティを右クリックし、[メモリ内に表示] インスペクター パネルを選択します。

    バッファー プロパティラインのコンテキスト メニューからメモリ インスペクターを開く

    JavaScript ArrayBuffer がメモリ インスペクターで開きます。

    メモリ インスペクター パネルで ArrayBuffer を開く

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

DataView や TypedArray など、複数のオブジェクトを同時に検査できます。

ブレークポイントでデモ Web ページが一時停止すると、[スコープ] ビューのオブジェクト b2は TypedArray になります。 b2 オブジェクトを右クリックし、[メモリ内に表示] インスペクター パネルを選択します

b2 オブジェクトの新しいタブが最初のタブの横に開きます。これは、メモリ インスペクターのbuffer オブジェクトを表します。

メモリ インスペクター パネルで 2 つの ArrayBuffer タブが開く

[メモリ インスペクター] パネルには、次の 3 種類のコンテンツが含まれています。

メモリ インスペクター パネル ナビゲーション バー

[ アドレスの入力 ] テキスト ボックスには、現在のバイト アドレスが 16 進形式で表示されます。 値を変更して、メモリ バッファー内の新しい場所にジャンプできます。 テキスト ボックスをクリックし、値を [ 0x00000008] に変更します。 メモリ バッファーはすぐにそのバイト アドレスにジャンプします。

メモリ バッファーが 1 ページより長い場合があります。 左右の矢印ボタンを使用して、[ 前のページ ] (<) と [次へ] ページ (>) をそれぞれ移動します。 メモリ バッファー データのページが 1 ページしかない場合、矢印はページの先頭と末尾に移動します。

左端の履歴矢印を使用して、住所履歴 (住所履歴に戻る) を戻るし、住所履歴で進む (住所履歴に進む) を使用します。

値のステップスルー時にメモリ バッファーが自動的に更新されない場合は、[ 更新 (メモリ バッファーの更新)] をクリックします。

メモリ バッファー

メモリ インスペクター パネル メモリ バッファー

パネルの左側からの読み取りでは、 アドレス が 16 進形式で表示されます。 現在選択されているアドレスは太字です。

メモリも 16 進形式で表示され、各バイトはスペースで区切られます。 現在選択されているバイトが強調表示されています。 任意のバイトをクリックするか、方向キー (左、右、上、下) を使用して移動できます。

メモリの ASCII 表現 がパネルの右側に表示されます。 強調表示された文字は、選択したバイトに対応します。 任意の文字をクリックするか、方向キー (左、右、上、下) を使用して移動できます。

値インスペクター

メモリ インスペクター パネル値インスペクター

現在のエンディアン型をクリックして、 ビッグ エンディアン と リトル エンディアンを切り替えます。

メイン領域には、設定に基づいて各値と解釈が表示されます。 既定では、すべての値が表示されます。

[ 値の種類の設定の切り替え ( 値の種類の設定の切り替え)] をクリックして、インスペクターに表示する値の種類を選択します。 これが新しい既定値の型設定になります。

値の種類の設定

エンコード ビューは、ドロップダウン リストを使用して変更できます。 整数の場合は、10 進 dec、16 進 hex、8 進数の octから選択できます。 浮動小数点数の場合は、10 進表記 dec と科学表記 sciのどちらかを選択できます。

メモリの検査

メモリ インスペクターで Web ページをデバッグするには、次の手順を実行します。

  1. ナビゲーション バーで、アドレスを 0x00000027 に変更します。

  2. ASCII 表現と値の解釈を表示します。 すべての値は 0 または空にする必要があります。

    メモリ インスペクターのアドレスの変更

  3. [ スクリプト実行の再開 (スクリプト実行 の再開)] をクリックするか 、F8 キーまたは Ctrl + \ キー を押してコードをステップ実行します。

    ASCII 表現と値の解釈が更新されます。

    メモリ インスペクターのアドレス値が更新されました

  4. 次のアクティブ メモリ アドレスにジャンプするには、必要に応じてポインター 32 ビットまたはポインター 64 ビットの [アドレスにジャンプ] ボタン ([アドレスにジャンプ] ボタン) をクリックします。 次のメモリ アドレスが使用できない場合は、ツールヒントの [メモリ不足アドレス] が表示され、ボタンがオフになります (メモリ 範囲外のアドレス)。

  5. 浮動小数点値のみを表示するように 値インスペクター をカスタマイズします。 [ 値の種類の設定の切り替え (値の種類の設定を灰色に切り替える)] をクリックし、2 つの浮動小数点値を除くすべてのチェック ボックス を オフにします。

    値型の設定 float

  6. 値 の種類の設定を切り替える (値の種類の設定を青に切り替える) をクリックして、値の種類の設定を閉じます。

  7. ドロップダウン リストを使用して、エンコードを dec から sci に変更します。 値表現が更新されます。

    メモリ インスペクターのアドレス値の更新ビュー

  8. キーボードまたはナビゲーション バーを使用してメモリ バッファーを調べる。

  9. 手順 3 と 4 を繰り返して、値の変更を確認します。

WebAssembly メモリ検査

WebAssembly (Wasm) メモリ検査の場合、このプロセスは JavaScript メモリの検査に似ています。

例:

  1. テスト サイトで Wasm メモリの検査 (Wasm のメモリ) (http://memory-inspector.glitch.me/demo-wasm.html) (404) を開きます。 (Glitch.me プロジェクトのホスティングは、2025 年 7 月 8 日に終了しました。このテスト サイトは、github.io でのホスティングを含む、 https://github.com/MicrosoftEdge/Demosに移行する予定です)。

  2. F12 または Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押して DevTools を開きます。

  3. [ ソース ] をクリックし、 memory-write.wasm ファイルを開きます。

  4. ループの最初の行にブレークポイントを設定します。16 進値 0x03c。

  5. ページを更新します。

  6. デバッガー ウィンドウの [ スコープ] で、[モジュール] を展開 します。

    Wasm ファイルのメモリ インスペクターのブレークポイントの設定

  7. $imports.memoryプロパティ行の末尾にある [メモリ内に表示] インスペクター パネル アイコン ([メモリ内に表示] インスペクター パネル アイコン) をクリックします。

    Wasm ArrayBuffer が メモリ インスペクターで開きます。

    メモリ インスペクター パネル Wasm

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページ はこちらにあり、 Kim-Anh Tran によって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

  • Last updated on