使用现代工具调试 WebAssembly

Ingvar Stepanyan
Ingvar Stepanyan

截至目前的道路

一年前，Chrome 宣布初步支持 。

我们展示了基本的逐步支持，并讨论了机会 DWARF 信息，而不是 源代码映射将为我们未来开放：

  • 解析变量名称
  • 美观输出类型
  • 对源语言中的表达式求值
  • ...等等！

今天，我们高兴地向大家介绍所承诺的功能， Emscripten 和 Chrome DevTools 团队在 尤其是 C 和 C++ 应用。

开始之前，请记住，它目前仍处于测试阶段 您需要使用最新版本的所有工具 风险自负。如果您遇到任何问题，请及时将问题报告给 https://bugs.chromium.org/p/chromium/issues/entry?template=DevTools+issue.

我们先从上次的那个简单的 C 示例开始：

#include <stdlib.h>

void assert_less(int x, int y) {
  if (x >= y) {
    abort();
  }
}

int main() {
  assert_less(10, 20);
  assert_less(30, 20);
}

为了编译该版本，我们使用最新的 Emscripten 并传递 -g 标志（就像在原始博文中一样），以包含调试 信息：

emcc -g temp.c -o temp.html

现在我们可以从本地主机 HTTP 服务器（对于 （使用 serve）以及 在最新的 Chrome Canary 版中打开它。

这次，我们还需要一个能与 Chrome 集成的帮助程序扩展程序 并帮助它理解所有调试信息 在 WebAssembly 文件中编码。请前往以下网址进行安装： 链接：goo.gle/wasm-debugging-extension

您还需要在开发者工具中启用 WebAssembly 调试功能 实验。打开 Chrome 开发者工具，点击工具栏中的齿轮图标 (⚙) 在开发者工具窗格的右上角，转到实验面板 然后选中 WebAssembly Debugging: Enable DWARF support。

开发者工具设置的“实验”窗格

当您关闭 Settings 时，开发者工具会建议自行重新加载 来应用设置，就这样吧以上就是 设置。

现在我们可以返回来源面板，启用暂停： 异常（⏸ 图标），然后选中在捕获到异常时暂停 (Pause on caughtexception) 并选中 重新加载页面。您应该会看到开发者工具在出现异常时暂停：

“Sources”面板的屏幕截图，其中显示了如何启用“Pause on caughtexception”（在捕获到异常时暂停）

默认情况下，它会在 Emscripten 生成的粘合代码上停止，但在 此时，您会看到 Call Stack 视图，其中显示了 并且可以导航到在调用原始 C 行时调用 abort:

开发者工具已在 `assert_less` 函数中暂停，并在“Scope”视图中显示“x”和“y”的值

现在，如果查看范围视图，您会看到原始名称 和变量的值，无需再费时费力 了解像“$localN”这样的被破坏名称有什么含义，以及这些名字 您所编写的源代码

这不仅适用于整数等原始值，还适用于复合 例如结构、类、数组等！

丰富的类型支持

我们通过一个更为复杂的示例来展示这些内容。这个 我们将使用下面的模型画一个曼德博分形 以下 C++ 代码：

#include <SDL2/SDL.h>
#include <complex>

int main() {
  // Init SDL.
  int width = 600, height = 600;
  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window;
  SDL_Renderer* renderer;
  SDL_CreateWindowAndRenderer(width, height, SDL_WINDOW_OPENGL, &window,
                              &renderer);

  // Generate a palette with random colors.
  enum { MAX_ITER_COUNT = 256 };
  SDL_Color palette[MAX_ITER_COUNT];
  srand(time(0));
  for (int i = 0; i < MAX_ITER_COUNT; ++i) {
    palette[i] = {
        .r = (uint8_t)rand(),
        .g = (uint8_t)rand(),
        .b = (uint8_t)rand(),
        .a = 255,
    };
  }

  // Calculate and draw the Mandelbrot set.
  std::complex<double> center(0.5, 0.5);
  double scale = 4.0;
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      std::complex<double> point((double)x / width, (double)y / height);
      std::complex<double> c = (point - center) * scale;
      std::complex<double> z(0, 0);
      int i = 0;
      for (; i < MAX_ITER_COUNT - 1; i++) {
        z = z * z + c;
        if (abs(z) > 2.0)
          break;
      }
      SDL_Color color = palette[i];
      SDL_SetRenderDrawColor(renderer, color.r, color.g, color.b, color.a);
      SDL_RenderDrawPoint(renderer, x, y);
    }
  }

  // Render everything we've drawn to the canvas.
  SDL_RenderPresent(renderer);

  // SDL_Quit();
}

您可以看到，这个应用仍然相当小， 包含 50 行代码的文件 - 但这一次，我还使用了 外部 API，例如用于实现以下目的的 SDL 库： 以及复数 C++ 标准库。

我将使用与上文相同的 -g 标志进行编译，以包含 调试信息，还会要求 Emscripten 提供 SDL2。 库，并允许任意大小的内存：

emcc -g mandelbrot.cc -o mandelbrot.html \
     -s USE_SDL=2 \
     -s ALLOW_MEMORY_GROWTH=1

当我在浏览器中访问生成的页面时 带有一些随机颜色的分形形状：

演示页面

当我打开开发者工具时，可以再次看到原始的 C++ 文件。这个 不过，代码不会出错（哇！）， 在代码开头添加一些断点。

当我们再次重新加载页面时，调试程序会在我们的 C++ 源代码：

开发者工具在调用 `SDL_Init` 时暂停

我们可以在右侧看到所有变量，但只有 width 和 height 都是初始化阶段， 检查。

我们在 Mandelbrot 主循环内设置另一个断点，然后继续 执行以向前跳转一点。

开发者工具已在嵌套循环内暂停

此时，palette 已填充了一些随机颜色， 我们可以展开数组本身 SDL_Color 结构，并检查其组件，以验证 一切正常（例如，始终将“alpha”渠道设置为 设为完全不透明度）。同样，我们可以扩展并检查 存储在 center 变量中的复数的虚部。

如果需要访问在其他方面难以访问的深层嵌套属性 进入范围视图，您可以使用控制台 评估！不过请注意，更复杂的 C++ 表达式不支持 尚未获得支持。

显示 `palette[10].r` 结果的控制台面板

我们再执行几次，看看内部 x 的效果如何 也可以再次查看 Scope 视图，添加 将变量名称添加到监控列表，在控制台中对其进行评估，或者通过 将鼠标悬停在源代码中的变量上：

关于来源中变量“x”的提示，其值显示值“3”

在这里，我们可以步入或调试 C++ 语句，并观察如何 其他变量也会在发生变化：

显示 `color`、`point` 和其他变量的值的提示和 Scope 视图

好，这一切在有调试信息的情况下都能正常运行 如果我们想调试并非使用调试工具构建的代码，该怎么办？ 选项？

原始 WebAssembly 调试

例如，我们要求 Emscripten 为开发者提供预构建的 SDL 库， 而不是自行从源代码进行编译，至少 。 让我们再次进入 SDL_RenderDrawColor：

开发者工具显示 `mandelbrot.wasm` 的分解视图

我们将回到原始的 WebAssembly 调试体验。

现在，这看起来有点害怕，大多数 Web 开发者都不会遇到 但有时您可能想调试 而构建时没有调试信息，无论是由于 是您无法控制的第三方库，或者您 只是在生产环境中遇到的一种错误

为帮助解决此类问题，我们对基础版的基础 API 功能 调试经验。

首先，如果您以前用过原始的 WebAssembly 调试功能， 请注意，整个拆解过程现在显示在一个文件中 更多猜测 Sources 条目 wasm-53834e3e/ wasm-53834e3e-7 可能对应于哪个函数。

新的名称生成方案

我们还改进了分解视图中的名称。之前，您会看到 而如果是函数，则不必指定名称。

现在，我们要生成与其他反汇编工具类似的名称 使用 WebAssembly name 部分中的提示， 导入/导出路径，最后，如果其他一切都失败， 根据项的类型和索引（例如 $func123）替换它们。您可以 在上面的屏幕截图中， 堆栈轨迹和反汇编代码更易读

如果没有类型信息，可能很难检查 除基元外的其他值 常规整数中存储了什么内容， 内存。

内存检查

以前，您只能展开 WebAssembly 内存对象（在 Scope 视图中由 env.memory 表示），以便查找 各个字节这在一些无关紧要的场景中行之有效， 特别方便扩展，且无需重新解读数据 采用非字节值的格式。我们新增了一项功能 线性内存检查器。

如果您右键点击 env.memory，现在应该会看到一个新的 名为 Inspect memory 的选项：

“Scope”窗格中“env.memory”上的上下文菜单，其中显示了“Inspect Memory”商品

点击后，它会调出一个 Memory Inspector，位于 您可以用十六进制和 ASCII 视图检查 WebAssembly 内存， 导航到特定地址，以及解析 不同的格式：

DevTools 中的“Memory Inspector”窗格，显示内存的十六进制和 ASCII 视图

高级场景和注意事项

剖析 WebAssembly 代码的性能

当您打开开发者工具时，WebAssembly 代码会“向下分层”更改为 启用调试功能。这个版本的网速要慢很多 也就是说，您不能依赖于 console.time、performance.now 以及使用开发者工具来衡量代码速度的其他方法 您得到的数字并不代表实际效果

您应改用开发者工具的性能面板。 该库会全速运行代码，并为您提供 不同职能部门所用时间的明细：

显示各种 Wasm 函数的分析面板

或者，您也可以在关闭开发者工具的情况下运行应用，并且 完成后打开它们以检查控制台。

未来我们会改进分析场景，但目前它是一项 一些注意事项如果您想详细了解 WebAssembly 请参阅 WebAssembly 编译流水线文档。

在不同机器（包括 Docker / 主机）上构建和调试

在 Docker、虚拟机或远程构建服务器上进行构建时， 您可能会遇到这样的情况 与您自己的文件系统中的路径不匹配，其中 Chrome 开发者工具正在运行。在这种情况下，文件将显示在 Sources 面板，但无法加载。

为了解决此问题，我们在 Google Cloud 中实现了 C/C++ 扩展选项。您可以使用它来重新映射任意路径， 帮助开发者工具找到源代码。

例如，如果宿主机上的项目位于 C:\src\my_project，但它是在 Docker 容器内构建的， 该路径表示为 /mnt/c/src/my_project，您可以重新映射 将这些路径指定为前缀，以便在调试期间返回：

C/C++ 调试扩展程序的选项页面

第一个匹配的前缀“wins”。如果您熟悉其他 C++ 调试程序，此选项类似于 set substitute-path 命令 或 LLDB 中的 target.source-map 设置。

调试优化型 build

与其他任何语言一样，在进行优化时，调试效果最好 已停用。优化功能可能会将一个函数内联到另一个函数中， 或者将代码的某些部分一并删除 而使调试器混淆，从而造成用户误解。

如果您不介意调试体验受到较多限制，但仍想 调试优化型 build 之后，大部分优化措施 （函数内嵌除外）。我们计划解决 日后出现类似问题，但请暂时使用 -fno-inline 在使用任何 -O 级别的优化进行编译时将其停用，例如：

emcc -g temp.c -o temp.html \
     -O3 -fno-inline

分离调试信息

调试信息保留了有关您代码的大量详细信息， 类型、变量、函数、范围和位置 - 任何可能 对调试程序很有用。因此，该值通常会大于 代码本身。

为了加快 WebAssembly 模块的加载和编译速度，您可能需要 您想将此调试信息拆分成单独的 WebAssembly 文件。为此，请在 Emscripten 中传递 -gseparate-dwarf=… 标志，并指定以下内容： 所需文件名：

emcc -g temp.c -o temp.html \
     -gseparate-dwarf=temp.debug.wasm

在这种情况下，主应用将只存储文件名 temp.debug.wasm，然后帮助程序扩展程序将能够找到并 请在打开开发者工具时加载它。

与上述优化措施结合使用时，此功能可 甚至可以用于发布几乎经过优化的 应用，稍后使用本地端文件调试它们。在此示例中 我们还需要覆盖存储的网址 找到辅助文件，例如：

emcc -g temp.c -o temp.html \
     -O3 -fno-inline \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=file://[local path to temp.debug.wasm]

未完待续...

哇，真是增加了不少新功能！

得益于所有这些新的集成，Chrome 开发者工具成为 功能强大的调试程序，不仅适用于 JavaScript，也适用于 C 和 C++ 应用， 它内置了各种 并将它们引入一个共享的跨平台网络。

不过，我们的旅程尚未结束。我们将介绍 从现在开始：

  • 清除了调试体验中的粗糙边缘。
  • 添加了对自定义类型格式化程序的支持。
  • 我们正努力改进 性能分析功能。
  • 添加对代码覆盖率的支持，使其更容易查找 未使用的代码。
  • 改进了对控制台计算中的表达式的支持。
  • 增加对更多语言的支持。
  • …等等！

与此同时，欢迎您对您自己的代码试用当前的 Beta 版，并报告我们找到的任何 问题至 https://bugs.chromium.org/p/chromium/issues/entry?template=DevTools+issue.

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。