调试 C/C++ WebAssembly

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly 提供了一种方法，能够以接近原生速度和 JavaScript 在网络上运行 C/C++ 代码。本文档介绍了如何设置和使用 Chrome 开发者工具更好地调试此类应用。

设置完开发者工具后，您可以：

  • 在 Sources > Editor 中检查原始代码。
  • 使用代码行断点暂停执行，并单步调试原始 C/C++ 源代码（而不是已编译的 .wasm 二进制文件）。

在暂停期间，您可以：

  • 将鼠标悬停在原始源文件中的变量上，然后查看它们的值。
  • 了解调用堆栈中的函数名称和作用域中的变量。
  • 将深层嵌套的属性和复杂对象输出到 Console。
  • 使用内存检查器检查对象内存。

设置

如需在开发者工具中启用 C/C++ WebAssembly 调试，请执行以下操作：

  1. 使用包含 DWARF 调试信息编译应用。运行最新的 Emscripten 编译器并向其传递 -g 标志。例如：

    emcc -g source.cc -o app.html

    如需了解详情，请参阅使用调试信息构建项目。

  2. 安装 C/C++ DevTools Support (DWARF) Chrome 扩展程序。

调试

设置完开发者工具后，调试您的代码：

  1. 打开开发者工具以检查您的网站。在本教程中，您可以在此演示页面上试用，该页面使用必需的 -g 标志编译。
  2. （可选）将您编写的文件分组，以便更轻松地进行导航。在 Sources（来源）中，勾选 三点状菜单。 > Page > 复选框。 > Group by Authored/Deployed 实验性。。
  3. 从文件树中选择原始源文件。在此示例中为 mandelbrot.cc。

  4. 如需设置代码行断点，请点击编辑器左侧列中的行号（例如第 38 行）。

    在第 38 行设置的代码行断点。

  5. 再次运行代码。执行会在包含断点的行之前暂停。

在暂停期间，请尝试以下操作：

  • 在来源 > 编辑器中，将鼠标悬停在某个变量上，即可在提示中查看其值。

提示中变量的值。

  • 在来源 > 调用堆栈中，查看来源中的函数名称。

调用堆栈中的主函数。

  • 在来源 > 范围中，查看局部和全局变量及其类型和值。

显示局部变量及其值的“Scope”窗格。

  • 在 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 容器中，则执行以下操作：

  1. 转到 chrome://extensions/，找到 C/C++ DevTools Support (DWARF) 扩展程序，然后依次点击 Details > Extension options。
  2. 指定新旧文件路径。

指定了新旧文件路径。

了解详情

如需详细了解 WebAssembly 调试，请查看 Chrome 开发者工具工程博客：