谷歌浏览器Chrome 126中如何调试和查看WebAssembly编译代码？

想在 Chrome 126 里舒舒服服地调试 WebAssembly 代码？得先把 DWARF 调试支持给安排上，不然你看到的就只有那一堆无符号的 wasm 函数索引和原始字节码——C++ 源码里的变量名、函数名、行号映射全都“隐身”了。整个过程分为几步：安装扩展、开启设置、激活实验性功能、编译时带上调试信息，并且页面必须通过 http/https 访问。

安装并启用 WASM 调试扩展

打开 Chrome Web Store，搜索官方扩展 【C/C++ DevTools Support (DWARF)】（ID 是 pdcpmagijalfljmkmjngeonclgbbannbx）。注意，这个扩展只兼容 Chrome 93 及以上版本，Chrome 126 当然完全支持。安装后不用重启浏览器，但得手动开启：按 F12 打开开发者工具 → 右上角三个点 → Settings → Preferences → 勾选 “Enable WebAssembly debugging”。有个细节：如果没装这个扩展，Settings 里根本看不到这个选项，所以别瞎找。

配置 Chrome 开发者工具实验性功能

在开发者工具里按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令菜单，输入 “Experiments” 回车，进入 Experiments 面板。在搜索框里输入 “dwarf”，找到并勾选 【WebAssembly debug: Enable DWARF support】，然后关掉面板、刷新页面。这一步千万别跳过——即使扩展装好了、编译也带了 -g，如果这里没开，Chrome 126 照样忽略所有 DWARF 调试信息，断点根本不会命中源码行。

编译 WASM 时必须携带调试信息

用 Emscripten 编译时，必须加 -g 参数来生成 DWARF 调试段。例如：

emcc math.cpp -g -O0 -s WASM=1 -o math.js

关键点在于 -O0 禁用优化。Chrome 126 的 DWARF 解析器对内联、寄存器重用这些优化非常敏感，一旦用了 -O2，变量很可能被优化掉，断点错位甚至直接失效。如果用 wasm-pack 或 rustc，对应参数分别是：rustc --crate-type=cdylib -C debuginfo=2 和 wasm-pack build --debug。

在 Sources 面板中定位并调试 WASM 源码

第一步：刷新页面，确保 WASM 模块完成加载；
第二步：在开发者工具 Sources 面板左侧文件树中展开 “Wasm” 节点；
第三步：找到对应的 .wasm 文件 → 点击展开 → 会出现同名的 .cpp 或 .rs 源文件（比如 math.cpp）；
第四步：点击该源文件，在代码行号左侧单击设断点；
第五步：触发对应的 JS 调用（比如 square(5)），执行就会自动停在源码行，而不是 wasm 字节码的位置。

这时你可以查看局部变量、调用栈、Watch 表达式，堆栈里显示的是 C++ 函数名与行号，不再是 _Z6squarei 这种符号或者 func[42] 这种索引。如果看不到源文件，检查三件事：① wasm 文件是否包含 .debug_* 段（用 wasm-objdump -x test.wasm | grep debug 验证）；② Chrome 有没有刷新；③ 当前页面是不是通过 file:// 协议打开的——Chrome 126 对 file:// 下的 WASM 调试有严格限制，必须用 http:// 或 https:// 协议。