想在 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，对应参数分别是：

• wasm-pack：wasm-pack build --debug
• rustc：rustc --crate-type=cdylib -C debuginfo=2

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

操作步骤如下：

1. 刷新页面，确保 WASM 模块完成加载。
2. 在开发者工具 Sources 面板左侧文件树中展开 “Wasm” 节点。
3. 找到对应的 .wasm 文件 → 点击展开 → 会出现同名的 .cpp 或 .rs 源文件（比如 math.cpp）。
4. 点击该源文件，在代码行号左侧单击设断点。
5. 触发对应的 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:// 协议。

《夸克》非常好用的免费AI浏览器

下载APP查看