本文介紹了在 Chrome 91 版中推出的記憶體檢查器。可讓您檢查 ArrayBuffer、TypedArray、DataView 和 Wasm 記憶體。
簡介
您是否想解讀 ArrayBuffer 中的資料？在記憶體檢查器之前，開發人員工具只能用來深入分析 ArrayBuffers。在偵錯工作階段期間，「範圍」檢視畫面中的檢查項目僅限於查看陣列緩衝區中的單一值清單，因此難以解讀整體資料。以「範圍」檢視畫面為例，以下範例會將緩衝區顯示為可展開的陣列範圍：
使用者前往緩衝區內特定範圍是個問題，因為使用者必須向下捲動才能前往該索引。但即使前往特定位置的操作很輕鬆，但這種實際inspecting值的方式相當麻煩，因為數字代表的意義難以辨識。特別是，如果這些值不應解譯為單一位元組，又像是 32 位元整數，該怎麼辦？
使用記憶體檢查器檢查值
我們在 Chrome 第 91 版中推出了記憶體檢查器，這項工具可用於檢查陣列緩衝區。您之前可能看過記憶體檢查工具來查看二進位資料，它會在格狀檢視畫面中顯示二進位內容及其位址，並提供不同解讀基礎值的方式。這就是記憶體檢查器的優勢。您現在可以使用記憶體檢查器查看內容、進行導覽，以及選取要用來解讀手中值的類型。它會直接在位元組旁邊顯示 ASCII 值，而且可讓使用者選取不同的結束度。請看下方實際操作的記憶體檢查器：
想試試嗎？如要瞭解如何開啟記憶體檢查器並查看陣列緩衝區 (或 TypedArray、DataView 或 Wasm 記憶體)，以及更多使用方式，請參閱記憶體檢查器說明文件。立即試用這些玩具範例 (適用於 JS、Wasm 和 C++)。
設計記憶體檢查器
在本單元中，我們會介紹如何使用網頁元件設計記憶體檢查器，並說明我們對設計目標的其中一個設計目標，以及實作方法。如果您想進一步瞭解相關資訊，請參閱我們對於記憶體檢查器的設計文件。
您可能已看過我們關於遷移至 Web 元件的網誌文章，該文章發布了我們內部指南，說明如何使用網頁元件建構 UI 元件。我們同時在記憶體檢查器中遷移網頁元件，因此決定試試新系統。下圖顯示我們為了建立記憶體檢查器而建構的元件 (請注意，在內部稱為線性記憶體檢查器)：
LinearMemoryInspector 元件是父項元件，結合了在記憶體檢查器中建構所有元素的子元件。基本上，這個函式會採用 Uint8Array 和 address，每次變更時都會將資料套用到子項，進而觸發重新轉譯。LinearMemoryInspector 本身會轉譯三個子元件：
LinearMemoryViewer(顯示值)、LinearMemoryNavigator(允許導覽) 和LinearMemoryValueInterpreter(顯示不同類型的基礎資料解讀)。
後者是父項元件，會轉譯 ValueInterpreterDisplay (顯示值) 和 ValueInterpreterSettings (選取要顯示的類型)。
每個元件僅供代表 UI 的一個小元件，因此您可以視需要重複使用元件。每當在元件上設定新資料時，就會觸發重新轉譯作業，顯示對元件上設定的資料所反映的變化。以下顯示一個包含 Google 元件的工作流程範例，其中使用者變更網址列中的網址，以設定新資料以觸發更新。在這種情況下，這裡是指要查看的位址：
LinearMemoryInspector 會將本身新增為 LinearMemoryNavigator 的事件監聽器。系統會因 address-changed 事件觸發 addressChanged 函式。使用者現在編輯地址輸入內容後，就會傳送上述事件，這時系統會呼叫 addressChanged 函式。此函式現在會在內部儲存地址，並使用 data(address, ..) setter 更新子元件。子元件會在內部儲存地址，並重新轉譯其檢視畫面，以顯示該特定位址的內容。
設計目標：讓效能和記憶體用量與緩衝區大小無關
在設計記憶體檢查器的過程中，我們考慮到的其中一項因素是記憶體檢查器的效能應與緩衝區大小無關。
如上一節所示，LinearMemoryInspector 元件會使用 UInt8Array 轉譯值。同時，我們希望確保記憶體檢查器不必保留整個資料，因為記憶體檢查器只會顯示一部分資料 (例如 Wasm 記憶體可高達 4GB，而我們不希望在記憶體檢查器中儲存 4 GB)。
因此，為了確保記憶體檢查器的速度和記憶體用量與顯示的實際緩衝區無關，我們允許 LinearMemoryInspector 元件只保留原始緩衝區的「子範圍」。
為了讓這項功能順利運作，LinearMemoryInspector 必須先再使用兩個引數：memoryOffset 和 outerMemoryLength。memoryOffset 代表偏移值，也就是傳遞的 Uint8Array 開始處的偏移值，且必須用這種方式轉譯正確的資料地址。outerMemoryLength 是原始緩衝區的長度，需要瞭解可以顯示哪些範圍：
透過這項資訊，我們可確保在沒有實際設定所有資料的情況下，仍可與先前一樣 (address 周圍的內容) 呈現相同的檢視畫面。如果有其他地址要求，該怎麼辦？在這種情況下，LinearMemoryInspector 會觸發 RequestMemoryEvent，以更新保留的目前範圍；範例如下：
在本範例中，使用者瀏覽記憶體頁面 (記憶體檢查器使用分頁顯示資料區塊)，進而觸發 PageNavigationEvent，而會自動觸發 RequestMemoryEvent。該事件會開始擷取新範圍，然後透過設定資料，套用至 LinearMemoryInspector 元件。因此會顯示新擷取的資料。
喔，你知道嗎？您甚至可以檢查 Wasm 和 C/C++ 程式碼中的記憶體
記憶體檢查器不僅適用於 JavaScript 中的 ArrayBuffers，也可用來檢查 C/C++ 參照/指標指向的 Wasm 記憶體和記憶體 (使用 DWARF 擴充功能，如果還沒試過，請嘗試使用！)請參閱使用新型工具對 WebAssembly 進行偵錯。以下簡單介紹記憶體檢查器，瞭解如何針對網路上的 C++ 進行原生偵錯：
結論
本文將介紹記憶體檢查器，並說明其設計過程。我們希望記憶體檢查器可以幫助您瞭解 ArrayBuffer :- 中的發生情況。有任何改善建議，請告訴我們並回報錯誤！
下載預覽管道
考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！
與 Chrome 開發人員工具團隊聯絡
使用下列選項，討論文章的新功能和異動，以及其他與開發人員工具相關的事項。
- 請透過 crbug.com 提交建議或意見回饋。
- 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示
>「說明」 >「回報開發人員工具的問題」。 - 在 @ChromeDevTools 張貼推文。
- 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。