改善 Chrome 開發人員工具中的 WebAssembly 偵錯功能

Ingvar Stepanyan
Ingvar Stepanyan

背景

直到最近，Chrome 開發人員工具支援的唯一 WebAssembly 偵錯功能，就是查看原始 WebAssembly 堆疊追蹤記錄，以及在已解構的 WebAssembly 文字格式中逐步執行個別指令。

螢幕截圖：Chrome 開發人員工具中先前僅提供有限的 WebAssembly 偵錯支援功能。

雖然這個做法可與任何 WebAssembly 模組搭配使用，並有助於對小型獨立函式偵錯，但對於大型應用程式來說，如果是拆解過的程式碼和來源之間的對應並不容易。

暫時性解決方法

為解決這個問題，Emscripten 和 DevTools 已暫時將現有的來源對應格式改為 WebAssembly。這可讓編譯模組中的二進位偏移與原始檔案中的原始位置之間建立對應關係。

來源對應輔助偵錯功能的螢幕截圖。

不過，來源對應圖是針對文字格式設計，可清楚對應 JavaScript 概念和值，不適用於使用任意來源語言、型別系統和線性記憶體的二進位格式，例如 WebAssembly。這會導致整合作業變得粗糙、受限，且在 Emscripten 以外的環境中不受廣泛支援。

輸入 DWARF

另一方面，許多原生語言都已提供通用的偵錯格式 DWARF，可為偵錯工具提供所有必要資訊，以便解析位置、變數名稱、型別版面配置等。

雖然仍有部分 WebAssembly 專屬功能需要加入，才能達到完全相容性，但 Clang 和 Rust 等編譯器已支援在 WebAssembly 模組中發出 DWARF 資訊，因此開發人員工具團隊可直接在開發人員工具中使用這項功能。

在第一步中，DevTools 現已支援使用這項資訊的本機來源對應，因此您可以開始對任何編譯器產生的 Wasm 模組進行偵錯，而無須使用已解組格式或任何自訂指令碼。

您只需要像在其他平台上一樣，告訴編譯器加入偵錯資訊。例如，在 Clang 和 Emscripten 中，您可以在編譯期間傳遞 -g 標記，以便執行這項操作：

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

您可以在 Rust 中使用相同的 -g 旗標：

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

或者，如果您使用 Cargo，系統預設會附加偵錯資訊：

  cargo build --target wasm32-unknown-unknown

這個新的開發人員工具與 DWARF 整合功能已涵蓋在原始碼語言中，支援逐步執行程式碼、設定中斷點，以及解析堆疊追蹤。

採用 DWARF 技術的新偵錯螢幕截圖。

未來

不過，還有很長的路要走。舉例來說，在工具方面，Emscripten (Binaryen) 和 wasm-pack (wasm-bindgen) 尚不支援更新所執行轉換作業的 DWARF 資訊。現階段，他們將無法享有這項整合服務。

在 Chrome 開發人員工具方面，我們會持續改進整合功能，確保提供流暢的偵錯體驗，包括：

  • 解析變數名稱
  • 美化排版
  • 評估原始語言中的運算式
  • …以及更多功能！

敬請密切關注後續消息！

下載預覽管道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項來討論最新功能、更新，或任何與開發人員工具相關的內容。