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

Sofia Emelianova
Sofia Emelianova

使用記憶體檢查工具檢查 JavaScript 中的 ArrayBufferTypedArrayDataView 記憶體,以及以 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. 您也可以檢查 DataViewTypedArray。例如 b2 就是 TypedArray。如要檢查這項資訊,請在 b2 屬性上按一下滑鼠右鍵,然後選取「在『Memory Inspector』面板中顯示」 (TypedArrayDataView 尚未有圖示)。
  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-bitPointer 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』面板中顯示」

在「記憶體檢查工具」中開啟的 x 陣列。

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

停止醒目顯示物件記憶體。

如需更多資訊,請參閱: