使用新的記憶體檢查器檢查 JavaScript 中的 ArrayBuffer
、TypedArray
和 DataView
記憶體,以及以 C++ 編寫的 Wasm 應用程式 WebAssembly.Memory
。
開啟記憶體檢查工具
您可以透過幾種方式開啟記憶體檢查器。
從選單開啟
- 開啟開發人員工具。
- 依序按一下「More Options」圖示 >「More tools」 >「Memory Inspector」。
在偵錯期間開啟
- 開啟使用 JavaScript
ArrayBuffer
的網頁。我們將使用這個示範網頁。 - 開啟開發人員工具。
- 在「Sources」面板中開啟 demo-js.js 檔案,在第 18 行設定中斷點。
- 請重新整理頁面。
- 在右側的「Debugger」窗格中,展開「Scope」區段。
您可以開啟記憶體檢查器:
- 透過圖示:按一下
buffer
屬性旁邊的圖示,或是 - 透過內容選單。在
buffer
屬性上按一下滑鼠右鍵,然後選取「Reveal in Memory Inspector」面板。
- 透過圖示:按一下
檢查多個物件
- 您也可以檢查 DataView 或 TypedArray。例如
b2
就是TypedArray
。如要檢查,請在b2
屬性上按一下滑鼠右鍵,然後選取「Reveal in Memory Inspector」面板 (TypedArray
或DataView
尚無圖示)。 - 系統會在記憶體檢查器中開啟新分頁。請注意,您可以一次檢查多個物件。
記憶體檢查器
記憶體檢查器主要包含 3 個區域:
導覽列
- 「地址輸入內容」會以十六進位格式顯示目前的位元組位址。您可以輸入新值,跳到記憶體緩衝區中的新位置。例如,您可以輸入
0x00000008
。 - 記憶體緩衝區可能比頁面長。使用「向左」和「向右」按鈕瀏覽時,不必捲動瀏覽。
- 使用左側的按鈕可進行向前/向後瀏覽。
- 根據預設,緩衝處理時會自動更新緩衝區。如果沒有,「refresh」按鈕可讓您選擇重新整理記憶體並更新其內容。
記憶體緩衝區
- 左側的地址會以十六進位格式顯示。
- 記憶體也會顯示為十六進位格式,每個位元組都會以空格分隔。目前選取的位元組會醒目顯示。按一下位元組,或使用鍵盤 (左、右、上、下) 瀏覽。
- 右側會顯示記憶體的 ASCII 表示法。醒目顯示文字會顯示與位元組上所選位元的對應值。與記憶體類似,您可以按一下位元組,或使用鍵盤 (左、右、上、下) 瀏覽。
值檢查器
- 頂端工具列中含有一個按鈕,可用來切換大圓角和小端子,以及開啟設定。開啟設定,選取檢查器中每個預設值的值類型。
- 主要區域會顯示根據設定中的所有值解讀結果。根據預設,系統會顯示所有欄位。
- 編碼可供點擊。你可以切換使用 dec、十六進位、oct 代表整數和 sci,以及浮點數的 dec。
正在檢查記憶體
讓我們一起檢查記憶體。
- 按照這些步驟開始偵錯。
- 在地址輸入中將地址變更為
0x00000027
。 - 觀察 ASCII 表示法和值解讀。目前所有的值皆為空白。
- 請留意
Pointer 32-bit
和Pointer 64-bit
旁邊的藍色「Jump to address」(跳至位址) 按鈕。只要按一下按鈕,就能跳到該網址。如果地址無效,按鈕會顯示為灰色,無法點選。 - 按一下「Resume Script run」逐步執行程式碼。
- 請注意,ASCII 表示法現已更新。所有值解釋也會更新。
- 讓我們自訂「值檢查器」,只顯示浮點。點選「settings」按鈕,只勾選「Float 32-bit」和「Float 64-bit」。
- 讓我們將編碼從
dec
變更為sci
。請注意,值表示法也會隨之更新。 - 你可以嘗試使用鍵盤或導覽列來瀏覽記憶體緩衝區,重複步驟 4,觀察值是否改變。
WebAssembly 記憶體檢查
WebAssembly.Memory
物件是 ArrayBuffer
,保存物件記憶體的原始位元組。「Memory Inspector」面板可讓您檢查以 C++ 編寫的 Wasm 應用程式中這類物件。
如何充分運用 WebAssembly.Memory
檢查功能:
- 使用 Chrome 107 以上版本。請前往
chrome://version/
查看你的版本。 - 安裝 C/C++ 開發人員工具支援 (DWARF) 擴充功能。這個外掛程式能使用 DWARF 偵錯資訊對 C/C++ WebAssembly 應用程式進行偵錯。
如要檢查物件的 WebAssembly.Memory
:
- 前往這個示範頁面開啟開發人員工具。
- 在「Sources」面板中開啟
demo-cpp.cc
,然後在main()
函式的第 15 行中設定中斷點:x[i] = n - i - 1;
。 - 重新載入頁面以執行應用程式。偵錯工具會在中斷點暫停。
- 在「Debugger」窗格中,依序展開「Scope」 >「Local」。
按一下
x: int[10]
陣列旁邊的 圖示。您也可以在陣列上按一下滑鼠右鍵,然後選取「在記憶體檢查器面板中顯示」。
如要停止醒目顯示物件記憶體,請在「Memory Inspector」面板中,將滑鼠遊標懸停在物件標記上,然後按一下 x
按鈕。
詳情請參閱: