如何调试和测试 WebAssembly 代码？

WebAssembly 的调试和测试相对复杂，但有多种工具和方法可以支持：

1. 浏览器 DevTools 支持

• Chrome DevTools：
  • Sources 面板可以查看 WebAssembly 源码
  • 支持设置断点、单步执行
  • 可以查看调用栈和变量值
  • Performance 面板分析性能瓶颈
• Firefox DevTools：
  • Debugger 面板支持 WebAssembly 调试
  • 可以查看反编译的 WebAssembly 代码
  • Memory 面板监控内存使用

2. 源码映射

• 生成 .wasm 文件时同时生成源码映射文件
• 允许在原始源码中调试，而不是在二进制代码中
• 支持 Rust、C++、AssemblyScript 等语言的源码映射

bash
# Rust 生成源码映射
cargo build --release
# 生成 .wasm 文件和 .d.ts 类型定义

# Emscripten 生成源码映射
emcc source.cpp -o output.html -s WASM=1 -g

3. 测试框架

• Rust：
  • 使用标准的 cargo test 框架
  • wasm-bindgen-test 支持 WebAssembly 单元测试

  rust
  #[cfg(test)]
  mod tests {
      use super::*;
      #[wasm_bindgen_test]
      fn test_add() {
          assert_eq!(add(2, 3), 5);
      }
  }

• JavaScript：
  • 使用 Jest、Mocha 等 JavaScript 测试框架
  • 测试 WebAssembly 模块的导出函数

  javascript
  test('add function', () => {
      expect(wasm.exports.add(2, 3)).toBe(5);
  });

4. 调试工具

• wasm-bindgen：Rust 到 WebAssembly 的绑定工具
• wasm-pack：简化 Rust WebAssembly 项目构建
• wasm2wat：将 WebAssembly 二进制转换为文本格式（WAT）

bash
wasm2wat module.wasm -o module.wat

• wat2wasm：将文本格式转换回二进制格式

5. 性能分析

• 浏览器 Performance 面板：
  • 记录 WebAssembly 函数的执行时间
  • 分析 CPU 使用情况
  • 识别性能瓶颈
• console.time：测量特定代码段的执行时间

javascript
console.time('wasm-function');
wasm.exports.heavyComputation();
console.timeEnd('wasm-function');

6. 内存调试

• Chrome Memory 面板：监控 WebAssembly 内存使用
• 内存快照：分析内存泄漏
• Heap Profiler：查看内存分配情况

7. 错误处理

• try-catch：捕获 WebAssembly 中的异常

javascript
try {
    wasm.exports.functionThatMightFail();
} catch (error) {
    console.error('WebAssembly error:', error);
}

• 错误信息：WebAssembly 提供有限的错误信息
• 边界检查错误：内存访问越界会抛出异常

8. 日志调试

• console.log：在 WebAssembly 中使用导入的 console 函数

rust
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

9. 最佳实践

• 使用源码映射进行调试，而不是直接调试二进制代码
• 编写全面的单元测试和集成测试
• 使用性能分析工具识别瓶颈
• 在开发环境中启用调试信息
• 使用 TypeScript 定义文件提高类型安全

10. 常见问题解决

• 编译错误：检查编译器版本和配置
• 运行时错误：检查内存访问和边界
• 性能问题：使用性能分析工具定位瓶颈
• 内存泄漏：使用内存分析工具检测