メモリ インスペクターを使用して 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 進 dec、16 進 hex、8 進数の octから選択できます。 浮動小数点数の場合は、10 進表記 dec と科学表記 sciのどちらかを選択できます。

メモリの検査

メモリ インスペクターで 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 が メモリ インスペクターで開きます。

   

注:

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

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