使用 Chrome DevTools 检查和调试 Canvas

Question

无论您使用的是 2D 还是 WebGL 上下文，任何曾经使用过 <canvas> element 知道调试起来非常困难。 使用画布通常涉及一长串难以理解的调用：

function draw() {
  context.clearRect(0, 0, 258, 258);
  context.fillStyle = "#EEEEEE";
  context.beginPath();
  context.arc(129, 129, 127, 0, 6.28, true);
  context.closePath();
  context.fill();

  // … and on and on
}

有时您想要捕获发送到画布上下文的指令并逐一执行它们。 幸运的是，Chrome 的 DevTools 中有一个新的 Canvas Inspection 功能可以让我们做到这一点！

在这篇文章中，我将向您展示如何使用此功能来开始调试您的画布作品。 检查器同时支持 2D 和 WebGL 上下文，因此无论您使用哪一种，都应该能够立即获得有用的调试信息。

入门

要开始，请访问 about:flags 在 Chrome 中并打开 启用开发者工具实验

图 1 - 在 about:flags 中启用开发人员工具实验

接下来，前往 DevTools 并点击齿轮 在右下角。 从那里你可以去 实验 并启用 画布检查 ：

图 2 - 在 DevTools 的实验中启用 Canvas 检查

要使更改生效，您需要 关闭并重新打开 DevTools （您可以使用 Alt+R 或 Option+R，这是一种方便的替代方法）。

当 DevTools 重新打开时，转到 Profiles 部分，您将看到一个新的 Canvas Profiler 选项。

首先，您会注意到 Canvas Profiler 被禁用。 一旦您有一个包含要调试的画布的页面，只需按 启用 ，页面将重新加载以准备捕获 <canvas>调用：

图 3 - 打开 Canvas Profiler

您需要决定是要捕获单个帧还是连续帧，其中帧与您在 DevTools 时间轴中看到的完全相同。

一个框架代表一次通过页面的事件循环。 这涉及运行 JavaScript、处理事件、更新 DOM、样式更改、执行布局以及绘制和合成页面。 对于流畅的动画，您希望每一帧的时间少于 1/60 秒，即 16.6 毫秒。

单帧 捕获呼叫直到当前帧结束然后停止。 连续帧捕获所有帧的所有帧 另一方面， <canvas> 元素，直到你告诉它停止。 您选择哪种模式取决于您如何使用 <canvas>元素。 对于正在进行的动画，您可能想要捕获单个帧。 对于为响应用户事件而出现的简短动画，您可能需要捕获连续的帧。

图 4 - 选择要捕获的帧数

这样我们就准备就绪，可以开始捕捉了！

捕获帧

要捕获您，只需按 开始 ，然后像往常一样与您的应用程序交互。 一段时间后返回 DevTools，如果您连续捕获，请按 Stop 。

现在您在左侧的列表中有了一个闪亮的新配置文件，其中包含所有捕获的上下文调用的数量 <canvas> 元素。 单击配置文件，您将看到如下所示的屏幕：

图 5 - DevTools 中的画布配置文件

在下方的窗格中，您会看到一个列表，其中列出了您可以逐步浏览的所有捕获的帧，当您单击每个帧时，顶部的屏幕截图将向您显示 <canvas> 该帧末尾的元素状态。 如果你有多个 <canvas> 您可以使用屏幕截图下方的菜单选择要显示的元素。

图 6 - 选择画布上下文

在框架内，您将看到绘图调用组。 每个绘图调用组包含一个绘图调用，这将是组中的最后一个调用。 那么什么是平局电话？ 对于像这样的 2D 上下文 clearRect(), drawImage(), fill(), stroke(), putImageData() 或任何文本渲染函数，对于 WebGL 它将是 clear()、drawArrays() 或者 drawElements()。它本质上是 任何 会改变当前绘图缓冲区内容的东西。 （如果您不喜欢图形，您可以将缓冲区视为带有我们正在操作的像素的位图。）

现在您要做的就是逐步浏览列表。 您可以在框架、绘制调用组或调用级别执行此操作。 无论您选择哪种方式浏览列表（屏幕截图下方的按钮可帮助您快速导航），您都会看到此时的上下文，这意味着您可以在错误出现时快速找到并修复它们。

图 7 - 方便列表跳转的导航按钮

指出不同

另一个有用的功能是能够查看哪些属性和变量在两次调用之间发生了变化。

要看到您只需单击侧边栏按钮 并弹出一个新视图。 当您逐步执行绘制调用时，您将看到已更新的属性。 如果将鼠标悬停在任何缓冲区或数组上，它们都会显示它们的内容。