背景
不久之前,目前 Chrome 開發人員工具僅支援檢視的 WebAssembly 偵錯功能 原始 WebAssembly 堆疊追蹤,並逐一前往 拆解的 WebAssembly 文字格式。
雖然這個做法可與任何 WebAssembly 模組搭配使用,並有助於對小型獨立函式偵錯,但對於大型應用程式來說,如果是拆解過的程式碼和來源之間的對應並不容易。
臨時替代方案
為解決這個問題,Emscripten 和 DevTools 已經暫時調整了現有物件的 source maps 格式到 WebAssembly。允許對應 已編譯模組中的二進位偏移值到來源檔案中的原始位置。
然而,來源對應是專為文字格式且能明確對應至 JavaScript 概念和值的文字格式而設計,不適用於 WebAssembly 等任意來源語言、型別系統和線性記憶體等二進位格式。因此整合了駭客、有限,而且在 Emscripten 之外不受到廣泛支援。
進入 DWARF
另一方面,許多原生語言已有常見的偵錯格式 DWARF,為偵錯工具提供所有必要資訊,以便解析位置、變數名稱、類型版面配置等等。
雖然仍有些 WebAssembly 特有功能必須新增才能完全相容,但 Clang 和 Rust 等編譯器原本就支援在 WebAssembly 模組中傳送 DWARF 資訊,因此開發人員工具團隊可以開始使用這些功能 這項工具可讓你直接開始使用這項工具
首先,開發人員工具現已支援使用這項資訊的原生來源對應,因此你可以開始偵錯由任何編譯器產生的 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 整合,已包含逐步支援程式碼、設定中斷點,以及解析原文語言的堆疊追蹤。
未來
不過,還有很長的路要走。
舉例來說,在工具端,Emscripten (Binaryen) 和 wasm-pack (wasm-bindgen) 並不支援更新 DWARF 資訊,以便瞭解已執行的轉換。現階段,他們將無法享有這項整合服務。
在 Chrome 開發人員工具方面,我們將逐漸改善整合機制,確保流暢的偵錯體驗,包括:
- 解析變數名稱
- 美化排版
- 評估原文語言的運算式
- ...還有更多!
敬請密切留意後續消息!
下載預覽頻道
建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。
與 Chrome 開發人員工具團隊聯絡
請使用下列選項,討論貼文中的新功能和異動,或與開發人員工具相關的其他事項。
- 歡迎透過 crbug.com 提出建議或意見。
- 使用「更多選項」 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
- 前往 @ChromeDevTools 張貼 Tweet。
- 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。