此页面由 Cloud Translation API 翻译。

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

Ingvar Stepanyan

背景

直到最近，Chrome DevTools 支持的唯一 WebAssembly 调试是查看原始 WebAssembly 堆栈轨迹，以及单步调试反汇编的 WebAssembly 文本格式。

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

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

为了解决此问题，Emscripten 和开发者工具临时调整了现有的 source maps 格式转换为 WebAssembly。允许的此映射已编译模块中的二进制偏移量与源文件中原始位置之间的偏移量。

由源代码映射提供支持的调试的屏幕截图。

然而，源映射是专为与 JavaScript 概念和值明确映射的文本格式设计的，而不适用于二进制格式，例如具有任意源语言、类型系统和线性内存的 WebAssembly。这使得这项集成操作过于复杂、有限，在 Emscripten 之外没有得到广泛支持。

另一方面，许多母语已有一种通用的调试格式， 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

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