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

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

• ArrayBuffer
• TypedArray
• Dataview
• WebAssembly (Wasm) メモリ

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

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

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

1. Microsoft Edge を起動します。

2. JS (JS のメモリ) でテスト サイト Inspect ArrayBuffers を開きます。

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

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

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

   

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

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

8. 行から buffer 、次のいずれかの方法を使用してメモリ インスペクターを開くことができます。

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

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

   

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

   

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

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

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

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

メモリ インスペクターでの移動

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

• ナビゲーション バー
• メモリ バッファー
• 値インスペクター

ナビゲーション バー

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

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

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

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

メモリ バッファー

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

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

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

値インスペクター

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

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

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

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

メモリの検査

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

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

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

   

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

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

   

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

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

   

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

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

   

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

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

WebAssembly メモリ検査

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

1. Wasm テスト サイト の Wasm メモリの検査 (Wasm のメモリ) を開きます。

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

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

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

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

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

   

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

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

   

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