菜鸟教程
教程 webassembly tutorial

第 7 章：调试和工具链

7.1 WASM 调试方法

调试 WebAssembly 相较于 JavaScript 更加复杂，但随着工具的发展，已经具备较好的支持方式：

  • 浏览器 DevTools 支持：现代浏览器（如 Chrome、Firefox）已支持 WASM 的源映射，可查看原始源代码（如 C/C++、Rust）；
  • 启用调试信息：在编译时开启 -g（C/C++）或 --debug（Rust）选项，可生成调试符号；
  • console.log 辅助输出：在 WASM 中导出日志函数，由 JavaScript 代理输出；
  • wasm32-unknown-unknown 与 wasm32-wasi 的调试差异：WASI 更适合在本地终端中调试。

7.2 常用命令与工具介绍

开发 WASM 应用时，以下工具链和命令非常常用：

  • Emscripten：C/C++ 编译为 WebAssembly 的工具，常用命令：
    • emcc source.c -o output.wasm
    • emcc -O3 -s WASM=1 -o app.html app.c
  • wasm-pack：Rust 编译为 WASM 的官方工具，集成了构建、打包、发布流程：
    • wasm-pack build
    • wasm-pack new my-wasm-lib
  • wasm-bindgen：桥接 Rust 与 JS 的关键工具，提供绑定生成和类型转换功能；
  • Binaryen：用于优化和分析 WASM 二进制文件；
  • WABT（WebAssembly Binary Toolkit）：
    • wasm2wat：将 .wasm 转为文本格式；
    • wat2wasm：将 .wat 转为二进制；
  • DevTools 插件：
    • Chrome DevTools 中启用 “WebAssembly Debugging”；
    • Firefox 可直接查看源映射及变量值。

通过掌握这些调试方式和工具链，开发者可以更加高效地开发、测试和优化 WebAssembly 应用。

相关内容