How to see Rust source code when debugging WebAssembly in a browser?

当你在浏览器中调试编译自 Rust 的 WebAssembly 时，你可以通过以下步骤来查看 Rust 源代码：

1. 确保编译时包含调试信息:

   使用 wasm-pack 构建你的项目时，确保使用了 --dev 标志，以便包含源码映射。例如:

   sh
   wasm-pack build --dev

   如果你直接使用 cargo 构建 wasm 文件，确保使用 --debug 标志:

   sh
   cargo build --target wasm32-unknown-unknown --debug

2. 生成源码映射:

   确保编译过程中生成了 .wasm 文件对应的源码映射（source map）。大多数 Rust 到 WebAssembly 的工具链会自动生成这些文件。

3. 在 Web 项目中包含 WebAssembly 和源码映射:

   确保 .wasm 文件和生成的源码映射文件都被部署到你的 web 服务器上，并且在网页上正确引用。

4. 配置 Content-Type:

   你的 web 服务器需要为 .wasm 文件设置正确的 Content-Type 头 (application/wasm)，以便浏览器能够正确识别和加载 WebAssembly 模块。

5. 在浏览器中开启源码调试:

   在你的网页加载后，打开浏览器的开发者工具：

   • Chrome: 按 F12 或右键点击页面元素选择“检查”，然后切换到“Sources”标签页。
   • Firefox: 按 Ctrl+Shift+I（或 Cmd+Option+I 在 macOS 上）或右键点击页面元素选择“检查元素”，然后切换到“调试器”标签页。

   在开发者工具的源码面板中，你应该能够看到你的 Rust 源文件。如果你的 WebAssembly 和源码映射配置正确，这些文件将会和你的 WebAssembly 模块一起被加载。

6. 设置断点并调试:

   在 Rust 源代码中设置断点，然后当 WebAssembly 执行到这些点时，浏览器会暂停执行，并允许你审查调用堆栈、变量等信息。

请注意，不同的浏览器和工具链可能会有所不同，以上步骤可能会根据你使用的具体工具（如 wasm-bindgen, wasm-pack, 或其他工具）和你的项目设置有所变化。如果你遇到任何问题，请检查你使用的工具的文档，以便获得特定于你环境的指导。