對 C/C++ WebAssembly 進行偵錯

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly 提供執行方法，例如以接近原生速度的網路執行 C/C++ 程式碼，以及搭配 JavaScript 執行程式碼。本文說明如何設定及使用 Chrome 開發人員工具，以便進一步對這類應用程式偵錯。

設定開發人員工具後，您可以：

  • 在「Sources」 >「Editor」中檢查原始程式碼。
  • 使用程式碼行中斷點暫停執行，並逐步執行原始 C/C++ 原始碼，而非編譯的 .wasm 二進位檔。

暫停期間，你可以：

  • 將滑鼠遊標懸停在原始來源檔案中的變數上，即可查看變數的值。
  • 瞭解 Call Stack 中的函式名稱以及範圍中的變數。
  • 將深層巢狀屬性和複雜的物件輸出至主控台。
  • 使用記憶體檢查器檢查物件記憶體。

設定

如何在開發人員工具中啟用 C/C++ WebAssembly 偵錯功能：

  1. 編譯含有 DWARF 偵錯資訊的應用程式。執行最新的 Emscripten 編譯器，並向其傳遞 -g 旗標。例如：

    emcc -g source.cc -o app.html

    詳情請參閱「使用偵錯資訊建構專案」。

  2. 安裝 C/C++ 開發人員工具支援 (DWARF) Chrome 擴充功能。

偵錯

開發人員工具設定完畢之後，請對程式碼進行偵錯：

  1. 開啟開發人員工具檢查你的網站。在本教學課程中，您可以在這個示範頁面上試用這項功能，這個頁面使用必要的 -g 標記編譯而成。
  2. 視需要將編寫的檔案分組，方便瀏覽。在「Sources」(來源) 中，勾選 三點圖示選單。 >「Page」(頁面) > 核取方塊。 >「Group by Authored/Deployed」(依已撰寫/部署的分組) 實驗版。。
  3. 從檔案樹狀結構中選取原始來源檔案。在這種情況下，mandelbrot.cc。

  4. 如要設定程式碼行中斷點，請按一下編輯器左側資料欄中的行數，例如第 38 行。

    於第 38 行設定的程式碼行中斷點。

  5. 再次執行程式碼。執行作業會在包含中斷點行之前暫停。

暫停時，請嘗試以下方法：

  • 依序前往「來源」 >「編輯器」，將遊標懸停在變數上，即可在工具提示中查看該變數的值。

工具提示中的變數值。

  • 在「Sources」 >「Call Stack」中，查看來源中的函式名稱。

Call Stack 中的主要函式。

  • 在「來源」 >「範圍」中，查看本機和全域變數、它們的類型和值。

顯示本機變數及其值的「Scope」窗格。

  • 在 Console 中，範圍中難以瀏覽的輸出變數和物件：

    • 深層巢狀變數，例如大型陣列中已建立索引的項目。
    • 複雜的物件，包括可使用指標 (->) 存取的物件。請展開物件查看詳情。

在控制台中展開的巢狀變數和複雜物件。

  • 在「Sources」(來源) >「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]

在不同機器中建構及偵錯

如果在機器上使用與執行 Chrome 不同的作業系統 (容器、VM 或遠端伺服器) 進行建構，您可能需要手動對應偵錯檔案路徑。

舉例來說，如果您的專案位於本機 C:\src\project，但建構在 Docker 容器中使用路徑 /mnt/c/src/project，則請按照下列步驟操作：

  1. 前往 chrome://extensions/ 找出「C/C++ DevTools Support (DWARF)」擴充功能，然後依序點選「Details」 >「Extension options」。
  2. 指定新檔案路徑和新檔案路徑。

指定新舊檔案路徑。

瞭解詳情

如要進一步瞭解 WebAssembly 偵錯，請參閱 Chrome 開發人員工具工程網誌：