# 第 7 章：调试和工具链

URL: https://caijiao.org/webassembly/advanced/07-tooling
Source: docs/webassembly/advanced/07-tooling.md
Description: 本章介绍 WebAssembly 的调试方式以及常用的开发工具，帮助开发者更高效地构建和排查 WASM 应用。

## 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 应用。