背景
直到最近，Chrome 開發人員工具支援的 WebAssembly 偵錯功能是查看原始的 WebAssembly 堆疊追蹤，並以分散的 WebAssembly 文字格式逐一逐步說明個別指令。
雖然這個方式可與任何 WebAssembly 模組搭配使用，也能對小型獨立的函式進行偵錯，但這對於大型應用程式而言不太實際；因為在較不易對應的程式碼和來源間對應較不明顯。
暫時解決方法
為解決這個問題，Emscripten 和 DevTools 已暫時將現有的來源對應格式調整為 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 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！
與 Chrome 開發人員工具團隊聯絡
使用下列選項，討論文章的新功能和異動，以及其他與開發人員工具相關的事項。
- 請透過 crbug.com 提交建議或意見回饋。
- 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示
>「說明」 >「回報開發人員工具的問題」。 - 在 @ChromeDevTools 張貼推文。
- 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。