vscode 可调试 WebAssembly，但需配合浏览器和正确配置：生成带调试信息的 .wasm + .wasm.map 文件，启用浏览器源码映射，使用 Debugger for chrome/edge 扩展配置 launch.json，并确保加载逻辑支持 source map。
VSCode 可以调试 WebAssembly，但需要配合浏览器（如 Chrome 或 Edge）和正确的构建配置，不能直接像调试 javaScript 那样开箱即用。关键在于生成带调试信息的 Wasm 文件（.wasm + .wasm.map），并在浏览器中启用源码映射，再通过 VSCode 的 Debugger for Chrome / Edge 扩展连接调试。
确保 Wasm 编译时包含调试信息
以 rust 为例（最常用场景），需在 Cargo.toml 中启用调试符号，并使用 debug 模式或自定义 profile：
- 添加 debug = true 和 debug-assertions = true 到 [profile.dev] 或自定义 profile
- 编译时加上 –target wasm32-unknown-unknown，例如：
cargo build –target wasm32-unknown-unknown –profile dev - 用 wasm-pack build –dev –target web 会自动保留调试信息并生成 .wasm.map 文件
- 确认输出目录中有 pkg/your_module_bg.wasm 和同名的 .wasm.map 文件
在 html 中正确加载并启用 source map
浏览器必须能加载 .wasm.map 并关联到 .wasm 文件，否则断点无效：
- 确保 .wasm.map 与 .wasm 同目录，且 http 服务能访问（如用 python3 -m http.server 8000）
- 在 JS 加载逻辑中，避免用 WebAssembly.instantiateStreaming（它不支持 map）；改用 WebAssembly.instantiate + fetch 显式加载字节码
- chrome devtools → Settings → Preferences → Sources → 勾选 Enable javascript source maps 和 Enable WebAssembly source maps
配置 VSCode 启动浏览器并附加调试
推荐使用 Debugger for Chrome 或 Debugger for Edge 扩展（已内置在新版 VSCode 中）：
- 安装扩展后，在项目根目录创建 .vscode/launch.json
- 添加一个 “type”: “pwa-chrome” 的 launch 配置，指定 url（如 http://localhost:8000）和 webRoot（如 “${workspaceFolder}”）
- 确保 sourceMappathOverrides 正确映射本地路径，例如：
“sourceMapPathOverrides”: { “webpack:///./src/*”: “${webRoot}/src/*” } - 按 F5 启动，VSCode 会打开 Chrome 并自动连接；在 TS/RS 源码中打断点（需是原始源文件，不是 .wasm）即可停住
常见问题与验证方法
如果断点灰色、不命中或显示 “Unbound breakpoint”，先检查这几项：
- 打开 Chrome DevTools → Sources → Pages → 展开你的域名 → 查看是否有 .rs 或 .ts 文件被加载（不是 .wasm）
- 右键 .rs 文件 → Reveal in sidebar → 看是否显示 “Source map detected”
- 检查 Network 面板：.wasm.map 是否返回 200？Content-Type 是否为 application/json？
- Rust 用户注意：默认 #[wasm_bindgen] 导出函数不会自动内联源码；加 #[wasm_bindgen(js_name = xxx)] 不影响调试，但别用 –no-modules 构建
基本上就这些。Wasm 调试依赖链稍长（编译→map→加载→浏览器支持→VSCode 连接），但只要每环都对得上，体验接近原生 JS 调试。