WebAssembly 可讓您以近乎原生速度在網站上執行 C/C++ 程式碼,並跟 JavaScript 一起執行。本文說明如何設定及使用 Chrome 開發人員工具,以便為這類應用程式進一步偵錯。
開發人員工具設定完成後,您可以:
- 在「Sources」中檢查原始程式碼 >編輯者:
- 使用程式碼行中斷點暫停執行,然後逐步執行原始 C/C++ 原始碼,而非編譯的
.wasm
二進位檔案。
暫停期間,你可以:
- 將滑鼠遊標懸停在原始來源檔案中的變數上,即可查看變數值。
- 瞭解 Call Stack 中的函式名稱及範圍中的變數。
- 將深層巢狀屬性和複雜物件輸出至「Console」。
- 使用記憶體檢查器檢查物件記憶體。
設定
如何在開發人員工具中啟用 C/C++ WebAssembly 偵錯功能:
請使用隨附的 DWARF 偵錯資訊編譯應用程式。執行最新的 Emscripten 編譯器,並將
-g
標記傳遞給該編譯器。例如:emcc -g source.cc -o app.html
詳情請參閱「使用偵錯資訊建構專案」。
偵錯
設定開發人員工具後,就能對程式碼進行偵錯:
- 開啟開發人員工具檢查網站。在本教學課程中,您可以在這個示範頁面中試用,該頁面是使用必要
-g
標記編譯而成。 - 視需要將自己編寫的檔案分組,方便瀏覽。在「來源」中,勾選 >網頁 > >分組依據:已編寫/已部署 。
- 從檔案樹狀結構中選取原始來源檔案。在本例中:
mandelbrot.cc
。 如要設定程式碼行中斷點,請在編輯器左側點選資料欄中的行號,例如,在第 38 行。
再次執行程式碼。執行作業會在包含中斷點的行之前暫停。
在暫停期間,請嘗試下列步驟:
- 在「來源」中 >編輯器:將遊標懸停在變數上,即可在工具提示中查看該變數的值。
- 在「來源」中 >Call Stack 查看來源中的函式名稱。
- 在「來源」中 >範圍,查看本機和全域變數、變數的類型和值。
在「Console」中,在「Scope」中難以瀏覽的輸出變數和物件:
- 含有深層巢狀結構的變數,例如大型陣列中的索引項目。
- 複雜物件,包括可透過指標存取的物件 (
->
)。請展開即可查看。
- 在「來源」中 >「Scope」,按一下 圖示開啟「Memory Inspector」,並檢查物件記憶體的原始位元組。詳情請參閱 WebAssembly 記憶體檢查。
設定檔成效
在設定並開啟開發人員工具後,Chrome 執行的程式碼並不會最佳化。已分級,可為您提供更優質的偵錯體驗。
在此情況下,您無法依賴程式碼中的 console.time()
和 performance.now()
剖析效能。請改為使用「效能」面板進行剖析。
或者,您也可以在不開啟開發人員工具的情況下執行剖析程式碼,接著開啟程式碼並在主控台中檢查訊息。
分離偵錯資訊
如要加快載入速度,但仍提升偵錯體驗,您可以將偵錯資訊拆成不同的 .wasm
檔案。詳情請參閱「對 WebAssembly 快速偵錯」。
您可以將這個檔案儲存在本機,或將檔案交由其他伺服器代管。如要使用 Emscripten,請傳遞 -gseparate-dwarf=<filename>
標記並指定檔案路徑:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
在不同機器上建構應用程式並偵錯
如果您是透過其他作業系統 (容器、VM 或遠端伺服器) 的電腦進行建構,而該裝置並非在執行 Chrome 的電腦上,可能需要手動對應偵錯檔案路徑。
舉例來說,如果您的專案在本機的 C:\src\project
處,但是在具有路徑 /mnt/c/src/project
的 Docker 容器中建構,則請執行下列步驟:
- 前往
chrome://extensions/
並找到「C/C++ DevTools Support (DWARF)」擴充功能,然後按一下「詳細資料」>「擴充功能選項」。 - 指定舊檔案路徑和新檔案路徑。
瞭解詳情
請前往 Chrome 開發人員工具工程網誌,進一步瞭解 WebAssembly 偵錯功能: