在 Chrome 92 中,我們推出了記憶體檢查器,這是用於檢查線性記憶體緩衝區的工具。本文將說明我們如何改善 C/C++ 偵錯工具的檢查器,以及過程中遇到的技術挑戰。
如果您是 C/C++ 偵錯和記憶體檢查器的新手,請參閱下列相關網誌文章:
- 想要進行深度記憶體偵錯嗎?請參閱「隆重推出記憶體檢查器」。
- 想瞭解完整的 C/C++ 偵錯工具套件嗎?請參閱「使用新式工具偵錯 WASM」和「加快 WebAssembly 偵錯速度」。
簡介
記憶體檢查器提供更強大的線性記憶體緩衝區偵錯選項。如果是 C/C++,您可以檢查 WebAssembly 記憶體中的 C/C++ 記憶體物件。
在周圍的 WebAssembly 記憶體中辨識物件的位元組是個難題。您必須知道物件的大小,並從物件開始計算位元組數。在下方螢幕截圖中,系統已選取 10 個元素 int32
陣列的第一個位元組,但無法立即判斷其他位元組屬於哪個陣列。如果您能立即辨識屬於物件的所有位元組,那該有多好?
記憶體檢查工具中的物件醒目顯示
從 Chrome 107 開始,記憶體檢查器會醒目顯示 C/C++ 記憶體物件的所有位元組。這有助於區分周圍的記憶體。
請觀看以下影片,瞭解記憶體檢查器的運作方式。在「記憶體檢查器」中顯示陣列 x
時,記憶體檢視器會顯示醒目顯示的記憶體,以及位於其上方的新方塊。這個方塊會提醒您醒目顯示的記憶體名稱和類型。按一下晶片即可跳至物件的記憶體。將滑鼠遊標懸停在方塊上,就會看到十字圖示,按一下該圖示則可移除醒目顯示範圍。
在要檢查的物件外選取位元組時,系統會對其進行醒目顯示,避免使用者分心。如要再次聚焦,請再次點選物件的任何位元或方塊。
物件醒目顯示功能不限於陣列。您也可以檢查結構體、物件和指標。這些變更可讓您更輕鬆探索 C/C++ 應用程式的記憶體!
想試試嗎?您需要完成以下事項:
- 使用 Chrome 107 以上版本。
- 安裝 C/C++ DWARF 擴充功能。
- 依序前往「開發人員工具」>「設定」>「實驗」>「WebAssemble 偵錯:啟用 DWARF 支援」,啟用 DWARF 偵錯功能。
- 開啟這個示範頁面。
- 按照頁面上的指示操作。
偵錯範例
本節將介紹玩具錯誤,說明如何使用記憶體檢查器進行 C/C++ 偵錯。在下方的程式碼範例中,程式設計師會建立整數陣列,並決定使用指標算術來選取最後一個元素。遺憾的是,程式設計師在指標計算中犯錯了,現在該程式不會顯示無意義的值,而非輸出最後一個元素。
#include <iostream>
int main()
{
int numbers[] = {1, 2, 3, 4};
int *ptr = numbers;
int arraySize = sizeof(numbers)/sizeof(int);
int* lastNumber = ptr + arraySize; // Can you notice the bug here?
std::cout <<../ *lastNumber <<../ '\n';
return 0;
}
程式設計師會進入記憶體檢查器來偵錯。你也可以按照這個示範操作!他們會先檢查記憶體檢查器中的陣列,確認 numbers
陣列如預期包含 1
、2
、3
和 4
整數。
接著,它們會顯示「Scope」窗格中的 lastNumber
變數,並發現指標指向陣列以外的整數!利用這項知識,程式設計師發現他們在第 8 行正確計算指標位移。應為 ptr + arraySize - 1
。
雖然這是玩具範例,但能說明物件醒目顯示功能如何有效傳達記憶體物件的大小和位置,協助您進一步瞭解 C/C++ 應用程式的記憶體內發生了什麼事。
開發人員工具如何判斷要醒目顯示哪些內容
在本節中,我們將介紹可用於 C/C++ 偵錯的工具生態系統。具體來說,您將瞭解開發人員工具、V8、C/C++ DWARF 擴充功能和 Emscripten 如何在 Chrome 中進行 C/C++ 偵錯。
如要充分運用開發人員工具中的 C/C++ 偵錯功能,需要有以下兩個條件:
- 在 Chrome 中安裝的 C/C++ DWARF 擴充功能
- 使用最新的 Emscripten 編譯器,將 C/C++ 來源檔案編譯成 WebAssembly,詳情請參閱這篇網誌文章
但為什麼呢?Chrome 的 JavaScript 和 WebAssembly 引擎 V8 不知道如何執行 C 或 C++。多虧 Emscripten,C/C++ 是 WebAssembly 編譯器的 C/C++,將以 C 或 C++ 建構的應用程式作為 WebAssembly 編譯,並在瀏覽器中執行!
在編譯期間,emscripten 會將 DWARF 偵錯資料嵌入二進位檔。整體來說,這項資料可協助擴充功能找出哪些 WebAssembly 變數對應至您的 C/C++ 變數等等。這樣一來,即使 V8 實際執行的是 WebAssembly,開發人員工具仍可顯示您的 C++ 變數。如有興趣,請參閱這篇網誌文章,瞭解 DWARF 偵錯資料的範例。
那麼,當顯示 lastNumber
時實際上會發生什麼事?只要按一下記憶體圖示,開發人員工具就會檢查您要檢查的變數。接著,系統會針對 lastNumber
的資料類型和位置,查詢擴充資料。只要擴充功能提供該資訊,記憶體檢查器就能顯示相關記憶體區塊,並瞭解其類型,也會顯示物件大小。
如果您查看前述範例中的 lastNumber
,可能會發現我們檢查的是 lastNumber: int *
,但記憶體檢查器中的晶片卻顯示 *lastNumber: int
,這是為什麼?檢查器會使用 C++ 樣式指標取消參照來表示顯示的物件類型!如果您檢查指標,檢查器會顯示指標指向的項目。
在偵錯工具步驟中保留醒目顯示
當您在記憶體檢查工具中顯示物件,並透過偵錯工具執行步驟時,如果檢查工具認為仍適用,就會保留醒目顯示。我們最初並未在發展藍圖中提供這項功能,但很快就發現,這樣會破壞偵錯體驗。想像一下,如果您必須在每個步驟後重新檢查陣列,就像下方影片中的情況一樣!
當偵錯工具命中新的中斷點時,記憶體檢查器會再次查詢 V8 和與先前醒目顯示項目相關聯的變數擴充功能。然後比較物件的地點和類型。如果相符,則會持續顯示醒目顯示。在上方的影片中,有一個 for 迴圈會寫入陣列 x
。這些作業不會變更陣列的類型或位置,因此會持續醒目顯示。
您可能會想知道這會對指標造成什麼影響。如果您有醒目提示指標,並將其重新指派給其他物件,醒目提示物件的舊位置和新位置會不同,醒目提示也會消失。由於新指向的物件可位於 WebAssembly 記憶體中的任何位置,且可能與先前的記憶體位置幾乎無關,因此移除醒目顯示會比跳到新的記憶體位置更清楚。您可以點選「範圍」窗格中的記憶體圖示,再次醒目顯示指標。
結論
本文說明 C/C++ 偵錯的記憶體檢查器改善了哪些內容。我們希望這項新功能能簡化 C/C++ 應用程式的記憶體偵錯作業!如有進一步改善建議,歡迎回報錯誤!
後續步驟
詳情請參閱: