WebAssembly调试精选：Chrome 126编译代码查看指南

要在 Chrome 126 中流畅调试 WebAssembly 代码，必须先激活 DWARF 调试支持，否则开发者工具只会显示无符号的函数索引和原始字节码——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:// 协议。

来源：互联网