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

Jecelyn Yeen

Sofia Emelianova

注意：「記憶體檢查工具」面板自 Chrome 第 91 版起開放使用。你可以前往 chrome://version/ 查看版本資訊。

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

總覽

記憶體檢查器可整理記憶體內容，協助您快速瀏覽大型陣列。您可以直接查看位元組旁的記憶體內容 ASCII 值，並選取不同的字節序。在偵錯網頁應用程式時使用記憶體檢查器，以便建立有效率的工作流程。

開啟記憶體檢查工具

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

透過選單開啟

1. 開啟開發人員工具。
2. 依序按一下「更多選項」 >「更多工具」 >「記憶體檢查器」。

在偵錯期間開啟

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

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

   • 透過圖示。按一下 buffer 屬性旁的圖示，或
   • 透過內容選單。在 buffer 屬性上按一下滑鼠右鍵，然後選取「在『Memory Inspector』面板中顯示」。

   

檢查多個物件

1. 您也可以檢查 DataView 或 TypedArray。例如 b2 就是 TypedArray。如要檢查這項資訊，請在 b2 屬性上按一下滑鼠右鍵，然後選取「在『Memory Inspector』面板中顯示」 (TypedArray 或 DataView 尚未有圖示)。
2. 記憶體檢查工具會開啟新的分頁。請注意，您可以一次檢查多個物件。

記憶體檢查工具

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

導覽列

1. 「address input」會以十六進位格式顯示目前的位元組位址。您可以輸入新值，跳到記憶體緩衝區的新位置。例如，輸入 0x00000008。
2. 記憶體緩衝區可能會比一個頁面還長。您可以使用「向左」和「向右」按鈕瀏覽，而無需捲動畫面。
3. 左側的按鈕可讓您前進/後退瀏覽。
4. 根據預設，緩衝區會在步進時自動更新。如果不是，您可以使用「重新整理」按鈕重新整理記憶體並更新內容。

記憶體緩衝區

1. 從左側開始，地址以十六進制格式顯示。
2. 記憶體也會以十六進制格式顯示，每個位元組以空格分隔。目前選取的位元會以醒目顯示。您可以點選位元組，或使用鍵盤 (向左、向右、向上、向下) 進行瀏覽。
3. 右側會顯示記憶體的 ASCII 表示法。畫面上會以高亮顯示位元組中所選位元的對應值。與記憶體類似，您可以點選位元組，或使用鍵盤 (左、右、上、下) 進行瀏覽。

值檢查工具

1. 頂端工具列提供按鈕，可切換大端序和小端序，並開啟設定。開啟「設定」，選取預設要在檢查器中顯示的值類型。
2. 主區域會根據設定顯示所有值解讀。根據預設，系統會顯示所有項目。
3. 編碼可供點選。您可以切換 dec、hex、oct 以便處理整數，以及 sci、dec 以便處理浮點數。

檢查記憶體

讓我們一起檢查記憶體。

1. 請按照下列步驟開始偵錯。
2. 在地址輸入框中，將地址變更為 0x00000027。
3. 請觀察 ASCII 表示法和值解讀。目前所有值皆為空白。
4. 請注意 Pointer 32-bit 和 Pointer 64-bit 旁的藍色「跳至位址」按鈕。按一下即可跳轉至該地址。如果地址無效，按鈕會顯示灰色，無法點選。
5. 按一下「Resume script execution」，逐一執行程式碼。
6. 請注意，ASCII 表示法現已更新。所有值解讀也都已更新。
7. 讓我們自訂值檢查器，只顯示浮點。按一下「設定」按鈕，然後只勾選「32 位元浮點」和「64 位元浮點」。
8. 讓我們將編碼從 dec 變更為 sci。請注意，值表示法會隨之更新。
9. 請嘗試使用鍵盤或導覽列瀏覽記憶體緩衝區。重複執行步驟 4，觀察值是否有變化。

WebAssembly 記憶體檢查

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

如要充分利用 WebAssembly.Memory 檢查功能，請按照下列步驟操作：

• 使用 Chrome 107 以上版本。請前往 chrome://version/ 查看版本。
• 安裝 C/C++ DevTools 支援 (DWARF) 擴充功能。這是用於使用 DWARF 偵錯資訊偵錯 C/C++ WebAssembly 應用程式的外掛程式。

如要檢查物件的 WebAssembly.Memory：

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

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

   或者，您也可以在陣列上按一下滑鼠右鍵，然後選取「在『Memory Inspector』面板中顯示」。

注意：自 Chrome 107 版起，記憶體檢查器會醒目顯示 C/C++ 記憶體物件的所有位元組。這樣一來，您就能將這些記憶體區分開來。

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

如需更多資訊，請參閱：

• 擴充記憶體檢查器，用於 C/C++ 偵錯
• 使用新工具偵錯 WebAssembly。