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

Chrome 126调试WebAssembly需启用DWARF支持：安装C/C++ DevTools扩展、开启“Enable WebAssembly debugging”设置、在Experiments中启用DWARF支持、编译时加-g和-O0参数，且须通过http/https访问页面。

在Chrome 126中调试WebAssembly代码，必须启用DWARF调试支持才能看到源码级变量、函数名和行号映射，否则只能看到无符号的wasm函数索引和原始字节码。

安装并启用WASM调试扩展

打开Chrome Web Store，搜索并安装官方扩展 【C/C++ DevTools Support (DWARF)】，ID为 pdcpmagijalfljmkmjngeonclgbbannbx。该扩展仅兼容Chrome 93及以上版本，Chrome 126已完全支持。

安装后无需重启浏览器，但需手动启用：按 F12 打开开发者工具 → 点击右上角三个点 → Settings → Preferences → 勾选 “Enable WebAssembly debugging”（若未出现该选项，请先确认扩展已启用）。

注意：此设置项只在启用C/C++ DevTools Support扩展后才会显示，未安装时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调试段，例如：

谷歌浏览器nofollow插件

谷歌浏览器nofollow插件|crx

下载

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：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:// 协议。