記憶體檢查器：檢查 ArrayBuffer、TypedArray、DataView 和 Wasm 記憶體。

使用新的記憶體檢查器檢查 JavaScript 中的 ArrayBuffer、TypedArray 和 DataView 記憶體，以及以 C++ 編寫的 Wasm 應用程式 WebAssembly.Memory。

開啟記憶體檢查工具

您可以透過幾種方式開啟記憶體檢查器。

從選單開啟

1. 開啟開發人員工具。
2. 依序按一下「More Options」圖示 >「More tools」 >「Memory Inspector」。

在偵錯期間開啟

1. 開啟使用 JavaScript ArrayBuffer 的網頁。我們將使用這個示範網頁。
2. 開啟開發人員工具。
3. 在「Sources」面板中開啟 demo-js.js 檔案，在第 18 行設定中斷點。
4. 請重新整理頁面。
5. 在右側的「Debugger」窗格中，展開「Scope」區段。

6. 您可以開啟記憶體檢查器：

   • 透過圖示：按一下 buffer 屬性旁邊的圖示，或是
   • 透過內容選單。在 buffer 屬性上按一下滑鼠右鍵，然後選取「Reveal in Memory Inspector」面板。

   

檢查多個物件

1. 您也可以檢查 DataView 或 TypedArray。例如 b2 就是 TypedArray。如要檢查，請在 b2 屬性上按一下滑鼠右鍵，然後選取「Reveal in Memory Inspector」面板 (TypedArray 或 DataView 尚無圖示)。
2. 系統會在記憶體檢查器中開啟新分頁。請注意，您可以一次檢查多個物件。

記憶體檢查器

記憶體檢查器主要包含 3 個區域：

導覽列

1. 「地址輸入內容」會以十六進位格式顯示目前的位元組位址。您可以輸入新值，跳到記憶體緩衝區中的新位置。例如，您可以輸入 0x00000008。
2. 記憶體緩衝區可能比頁面長。使用「向左」和「向右」按鈕瀏覽時，不必捲動瀏覽。
3. 使用左側的按鈕可進行向前/向後瀏覽。
4. 根據預設，緩衝處理時會自動更新緩衝區。如果沒有，「refresh」按鈕可讓您選擇重新整理記憶體並更新其內容。

記憶體緩衝區

1. 左側的地址會以十六進位格式顯示。
2. 記憶體也會顯示為十六進位格式，每個位元組都會以空格分隔。目前選取的位元組會醒目顯示。按一下位元組，或使用鍵盤 (左、右、上、下) 瀏覽。
3. 右側會顯示記憶體的 ASCII 表示法。醒目顯示文字會顯示與位元組上所選位元的對應值。與記憶體類似，您可以按一下位元組，或使用鍵盤 (左、右、上、下) 瀏覽。

值檢查器

1. 頂端工具列中含有一個按鈕，可用來切換大圓角和小端子，以及開啟設定。開啟設定，選取檢查器中每個預設值的值類型。
2. 主要區域會顯示根據設定中的所有值解讀結果。根據預設，系統會顯示所有欄位。
3. 編碼可供點擊。你可以切換使用 dec、十六進位、oct 代表整數和 sci，以及浮點數的 dec。

正在檢查記憶體

讓我們一起檢查記憶體。

1. 按照這些步驟開始偵錯。
2. 在地址輸入中將地址變更為 0x00000027。
3. 觀察 ASCII 表示法和值解讀。目前所有的值皆為空白。
4. 請留意 Pointer 32-bit 和 Pointer 64-bit 旁邊的藍色「Jump to address」(跳至位址) 按鈕。只要按一下按鈕，就能跳到該網址。如果地址無效，按鈕會顯示為灰色，無法點選。
5. 按一下「Resume Script run」逐步執行程式碼。
6. 請注意，ASCII 表示法現已更新。所有值解釋也會更新。
7. 讓我們自訂「值檢查器」，只顯示浮點。點選「settings」按鈕，只勾選「Float 32-bit」和「Float 64-bit」。
8. 讓我們將編碼從 dec 變更為 sci。請注意，值表示法也會隨之更新。
9. 你可以嘗試使用鍵盤或導覽列來瀏覽記憶體緩衝區，重複步驟 4，觀察值是否改變。

WebAssembly 記憶體檢查

WebAssembly.Memory 物件是 ArrayBuffer，保存物件記憶體的原始位元組。「Memory Inspector」面板可讓您檢查以 C++ 編寫的 Wasm 應用程式中這類物件。

如何充分運用 WebAssembly.Memory 檢查功能：

• 使用 Chrome 107 以上版本。請前往 chrome://version/ 查看你的版本。
• 安裝 C/C++ 開發人員工具支援 (DWARF) 擴充功能。這個外掛程式能使用 DWARF 偵錯資訊對 C/C++ WebAssembly 應用程式進行偵錯。

如要檢查物件的 WebAssembly.Memory：

1. 前往這個示範頁面開啟開發人員工具。
2. 在「Sources」面板中開啟 demo-cpp.cc，然後在 main() 函式的第 15 行中設定中斷點：x[i] = n - i - 1;。
3. 重新載入頁面以執行應用程式。偵錯工具會在中斷點暫停。
4. 在「Debugger」窗格中，依序展開「Scope」 >「Local」。

5. 按一下 x: int[10] 陣列旁邊的 圖示。

   您也可以在陣列上按一下滑鼠右鍵，然後選取「在記憶體檢查器面板中顯示」。

如要停止醒目顯示物件記憶體，請在「Memory Inspector」面板中，將滑鼠遊標懸停在物件標記上，然後按一下 x 按鈕。

詳情請參閱：

• 擴充記憶體檢查器以進行 C/C++ 偵錯
• 使用新型工具對 WebAssembly 進行偵錯。