调试 C/C++ WebAssembly

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

  • 在 Sources 中检查原始代码 >编辑者。
  • 使用代码行断点暂停执行，并单步调试原始 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 中，勾选 三点状菜单。 >页面 >复选框。Group by Authored/Deployed 实验性。。
  3. 从文件树中选择原始源文件。在此示例中为 mandelbrot.cc。

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

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

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

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

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

提示中变量的值。

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

调用堆栈中的主函数。

  • 在来源 >限定作用域，查看局部和全局变量及其类型和值。

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

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

    • 深度嵌套的变量，例如，大型数组中编入索引的项。
    • 复杂对象，包括您可以通过指针 (->) 访问的对象。请展开它们进行检查。

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

  • 在来源 >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，但在 Docker 容器中构建的路径为 /mnt/c/src/project，请执行以下操作：

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

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

了解详情

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