WebAssembly 提供了一种方法,能够以接近原生速度和 JavaScript 在网络上运行 C/C++ 代码。本文档介绍了如何设置和使用 Chrome 开发者工具更好地调试此类应用。
设置完开发者工具后,您可以:
- 在 Sources > Editor 中检查原始代码。
- 使用代码行断点暂停执行,并单步调试原始 C/C++ 源代码(而不是已编译的
.wasm
二进制文件)。
在暂停期间,您可以:
- 将鼠标悬停在原始源文件中的变量上,然后查看它们的值。
- 了解调用堆栈中的函数名称和作用域中的变量。
- 将深层嵌套的属性和复杂对象输出到 Console。
- 使用内存检查器检查对象内存。
设置
如需在开发者工具中启用 C/C++ WebAssembly 调试,请执行以下操作:
使用包含 DWARF 调试信息编译应用。运行最新的 Emscripten 编译器并向其传递
-g
标志。例如:emcc -g source.cc -o app.html
如需了解详情,请参阅使用调试信息构建项目。
调试
设置完开发者工具后,调试您的代码:
- 打开开发者工具以检查您的网站。在本教程中,您可以在此演示页面上试用,该页面使用必需的
-g
标志编译。 - (可选)将您编写的文件分组,以便更轻松地进行导航。在 Sources(来源)中,勾选 > Page > > Group by Authored/Deployed 。
- 从文件树中选择原始源文件。在此示例中为
mandelbrot.cc
。 如需设置代码行断点,请点击编辑器左侧列中的行号(例如第 38 行)。
再次运行代码。执行会在包含断点的行之前暂停。
在暂停期间,请尝试以下操作:
- 在来源 > 编辑器中,将鼠标悬停在某个变量上,即可在提示中查看其值。
- 在来源 > 调用堆栈中,查看来源中的函数名称。
- 在来源 > 范围中,查看局部和全局变量及其类型和值。
在 Console 中,输出变量和对象很难在 Scope 中导航:
- 深层嵌套的变量,例如,大数组中编入索引的项。
- 复杂对象,包括可通过指针访问的对象 (
->
)。展开对象即可进行检查。
- 在 Sources > Scope 中,点击 图标以打开 Memory Inspector 并检查对象内存的原始字节。如需了解详情,请参阅 WebAssembly 内存检查。
分析性能
设置并打开开发者工具后,Chrome 运行的代码不会得到优化。为改善调试体验,我们将它分成了多个层级。
在这种情况下,您不能依赖代码中的 console.time()
和 performance.now()
来分析性能。应改为使用性能面板进行性能分析。
或者,您也可以在不打开开发者工具的情况下运行分析代码,然后在控制台中打开它以检查消息。
拆分调试信息
为了在加快加载速度的同时仍然获得更好的调试体验,您可以将调试信息拆分到单独的 .wasm
文件中。如需了解详情,请参阅更快地调试 WebAssembly。
您可以将此文件保存在本地,也可以将其托管在单独的服务器上。如需使用 Emscripten 执行此操作,请传递 -gseparate-dwarf=<filename>
标志并指定文件的路径:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
在不同机器上构建和调试
如果您在一台计算机上进行构建,且该计算机上的操作系统(容器、虚拟机或远程服务器)与运行 Chrome 的计算机不同,那么您可能需要手动映射调试文件路径。
例如,如果您的项目在本地 C:\src\project
下,但构建于路径为 /mnt/c/src/project
的 Docker 容器中,则执行以下操作:
- 转到
chrome://extensions/
,找到 C/C++ DevTools Support (DWARF) 扩展程序,然后依次点击 Details > Extension options。 - 指定新旧文件路径。
了解详情
如需详细了解 WebAssembly 调试,请查看 Chrome 开发者工具工程博客: