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

Ingvar Stepanyan
Ingvar Stepanyan

背景

直到最近，Chrome DevTools 支持的唯一 WebAssembly 调试功能是查看原始 WebAssembly 堆栈轨迹，以及在反汇编 WebAssembly 文本格式中单步跳过各个指令。

Chrome DevTools 中之前有限的 WebAssembly 调试支持的屏幕截图。

虽然这适用于任何 WebAssembly 模块，并且一定程度上有助于调试小型隔离函数，但对于大型应用来说，这并不现实，因为反汇编代码与源代码之间的映射并不明显。

临时解决方法

为了解决此问题，Emscripten 和开发者工具临时调整了现有的 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 的这一全新集成已涵盖对代码执行单步调试、设置断点和以源语言解析堆栈轨迹的支持。

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

未来展望

不过，仍然有大量工作要做。 例如，在工具方面，Emscripten (Binaryen) 和 wasm-pack (wasm-bindgen) 尚不支持更新其执行的转换的 DWARF 信息。目前，他们不会从这项集成中受益。

在 Chrome 开发者工具中，我们将不断改进集成功能，以确保提供无缝的调试体验，其中包括：

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

敬请关注未来的更新！

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并在用户发现问题之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论该帖子中介绍的新功能和变更，或与 DevTools 相关的任何其他内容。