需安装 wasm-pack 与 Rust 目标平台、配置 VSCode 的 WebAssembly 扩展及 launch.json、用 wasm-pack build 生成含 sourcemap 的 Wasm 模块、通过 npx serve 启动本地服务、在 Rust 源码设断点调试。
如果您希望在 VSCode 中开发 WebAssembly 应用，但尚未配置编译与调试环境，则可能是由于缺少 Wasm 工具链或调试器集成。以下是实现 Wasm 项目在 VSCode 中完成编译与调试的步骤：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装 WebAssembly 工具链
WebAssembly 编译依赖于底层工具链，如 wasm-pack 或 Emscripten，它们负责将 Rust/C/C++ 源码转换为 .wasm 文件，并生成配套的 JavaScript 胶水代码。
1、打开终端，执行 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh 安装 wasm-pack。
2、运行 rustup target add wasm32-unknown-unknown 添加 WebAssembly 目标平台支持。
3、验证安装：输入 wasm-pack –version，确认输出版本号不为空。
二、配置 VSCode 扩展与工作区
VSCode 需通过扩展识别 .wasm 文件结构、提供语法高亮及调试入口，同时需正确设置 launch.json 以启动基于 Web 的调试会话。
1、在扩展市场中搜索并安装 WebAssembly（由 Microsoft 提供）和 Rust Analyzer（若使用 Rust）。
2、在项目根目录创建 .vscode/launch.json，填入包含 type: “pwa-chrome” 和 “webRoot”: “${workspaceFolder}” 的配置项。
3、确保项目中存在 index.html，且其 script 标签加载了由 wasm-pack build 生成的 JS 胶水文件。
三、构建并生成可调试的 Wasm 模块
wasm-pack build 默认生成的模块不可直接调试，需启用 sourcemap 并选择浏览器兼容模式，使 VSCode 能映射源码与 wasm 指令。
1、在终端中进入 Cargo 项目目录，执行 wasm-pack build –dev –target web –out-dir pkg –out-name index。
2、检查 pkg/ 目录下是否生成了 index.js、index_bg.wasm 和 index_bg.wasm.map 三个文件。
3、修改 index.html 中 script src 为 “./pkg/index.js”，确保路径与实际输出一致。
四、启动调试会话
VSCode 通过 Chrome Debug Adapter 连接本地运行的 Web 服务，在内存中加载并单步执行 wasm 模块，需确保服务已就绪且端口未被占用。
1、在终端中执行 npx serve -s pkg 启动静态服务器，默认监听 http://localhost:5000。
2、在 VSCode 中按 Ctrl+Shift+D（Windows/Linux）或 Cmd+Shift+D（macOS）打开调试面板。
3、点击绿色三角形启动按钮，等待 Chrome 实例自动打开并加载页面，此时断点即可生效。
五、在 Rust 源码中设置断点并检查变量
Wasm 调试支持在原始 Rust 源文件中设置断点，VSCode 将通过 sourcemap 自动关联 wasm 指令位置，变量值可在“变量”面板中实时查看。
1、在 lib.rs 或 main.rs 的函数内部行号左侧单击，设置断点，例如在 log::info!(“Hello from Wasm!”); 所在行。
2、刷新浏览器页面，触发函数调用，VSCode 将暂停执行并高亮当前行。
3、在“变量”面板中展开 this 或局部作用域节点，查看 u32、String 等类型的实际值。
