调试 C/C++ WebAssembly

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly 提供了一种方法，可让您在 Web 上以接近原生速度并与 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 扩展程序。

调试

设置完 DevTools 后，调试您的代码：

  1. 打开 DevTools 以检查您的网站。在本教程中，您可以在此演示页面上试用此页面，该页面是使用必需的 -g 标志编译的。
  2. （可选）对您创作的文件进行分组，以便于浏览。在来源中，依次选择 三点状菜单。 > 网页 > 复选框。 > 按作者/部署时间分组 实验性。。
  3. 从文件树中选择原始源文件。在此示例中为 mandelbrot.cc。

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

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

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

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

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

提示中变量的值。

  • 在 Sources > Call Stack 中，查看来源中的函数名称。

调用堆栈中的主函数。

  • 在 Sources（来源）> Scope（作用域）中，查看局部和全局变量及其类型和值。

包含局部变量及其值的“Scope”窗格。

  • 在 Console 中，输出在 Scope 中很难导航到的变量和对象：

    • 深层嵌套的变量，例如大型数组中的编号项。
    • 复杂对象，包括您可以使用指针 (->) 访问的对象。展开这些对象以进行检查。

控制台中展开的嵌套变量和复杂对象。

  • 在 Sources（来源）> Scope（作用域）中，点击 内存。 图标以打开内存检查器，然后检查对象内存的原始字节。如需了解详情，请参阅 WebAssembly 内存检查。

检查变量的内存。

配置文件性能

设置并打开开发者工具后，Chrome 运行的代码不会得到优化。它分层显示，以便您获得更好的调试体验。

在这种情况下，您不能依赖代码中的 console.time() 和 performance.now() 来分析性能。请改用性能面板进行性能分析。

或者，您也可以在不打开 DevTools 的情况下运行性能分析代码，然后打开 DevTools 以在控制台中检查消息。

拆分调试信息

为了加快加载速度但仍获得更好的调试体验，您可以将调试信息拆分到单独的 .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，但在 Docker 容器中构建的路径为 /mnt/c/src/project，请执行以下操作：

  1. 前往 chrome://extensions/，找到 C/C++ DevTools Support (DWARF) 扩展程序，然后依次点击详细信息 > 扩展程序选项。
  2. 指定旧文件路径和新文件路径。

指定了旧文件路径和新文件路径。

了解详情

如需详细了解 WebAssembly 调试，请查看 Chrome DevTools 工程博客：