改进了 Chrome 开发者工具中的 WebAssembly 调试功能

Ingvar Stepanyan
Ingvar Stepanyan

背景

直到最近,Chrome 开发者工具支持的唯一 WebAssembly 调试方式是查看原始的 WebAssembly 堆栈轨迹,以及以分解的 WebAssembly 文本格式单步调试各个指令。

Chrome 开发者工具中先前受限的 WebAssembly 调试支持的屏幕截图。

虽然这适用于任何 WebAssembly 模块,并且有助于调试一些较小的独立函数,但对于反汇编代码与您的源代码之间的映射不太明显的大型应用,这种方法并不实用。

临时解决方法

为了解决此问题,Emscripten 和开发者工具已暂时将现有的源映射格式调整为 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 集成,已支持单步执行代码、设置断点以及以源语言解析堆栈轨迹。

由 DWARF 提供支持的新调试的屏幕截图。

未来展望

不过,工作仍然任重而道远。 例如,在工具方面,Emscripten (Binaryen) 和 wasm-pack (wasm-bindgen) 尚不支持更新有关它们执行的转换的 DWARF 信息。目前,他们无法从此集成中受益。

在 Chrome DevTools 端,我们将不断改进集成,以确保提供无缝的调试体验,包括:

  • 解析变量名称
  • 美观打印类型
  • 对源语言中的表达式求值
  • ...等等!

敬请关注后续动态!

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化,或讨论与开发者工具有关的任何其他内容。

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。