改善 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、開發人員版或Beta 版設為預設開發人員版瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論文章中的新功能和變更，或任何與開發人員工具相關的內容。