Canvas 调试器是我们将在旧金山举行的 游戏开发者大会 上演示的一款新工具。它用于调试在 Canvas 元素上渲染的动画帧。无论您是创建可视化效果、动画还是调试游戏，此工具都将帮助您理解和优化动画循环。它可以调试 WebGL 或 2D Canvas 上下文。

您可以使用传统的调试器（如我们自己的 Firefox 开发者工具中的 JavaScript 调试器）调试动画。但是，这可能很困难，因为它需要手动搜索您可能希望逐步执行的所有各种 Canvas 方法。Canvas 调试器旨在让您从动画循环本身的角度查看渲染调用，从而更好地了解发生了什么。

工作原理

Canvas 调试器通过创建渲染帧期间发生的所有事件的快照来工作。它记录所有 Canvas 上下文方法调用。每个帧快照都包含上下文方法调用的列表以及相关的 JavaScript 堆栈。通过检查此堆栈，开发人员可以将调用追踪回应用程序或引擎调用的更高级别函数，这些函数导致绘制了一些内容。

某些类型的 Canvas 上下文函数已突出显示，以便在快照中更容易发现它们。快速滚动浏览列表时，开发人员可以轻松发现绘制调用或冗余操作。

每个绘制调用都有一个相关的屏幕截图，该屏幕截图以“胶片带”视图的形式排列在屏幕底部的时间线上。您可以使用滑块“擦洗”此胶片带，以快速定位与特定渲染部分相关的绘制调用。您还可以单击缩略图以直接转到动画帧快照中的相关绘制调用。

缩略图胶片带可以让您快速了解绘制过程。您可以轻松地看到场景是如何组合起来以获得最终渲染的。

逐步操作

您可能会注意到附加屏幕截图中有一排熟悉的按钮。它们是从 JavaScript 调试器借用的，为开发人员提供了一种在动画快照中导航的方法。这些按钮在最终发布时可能会更改其图标，但现在我们将描述它们当前的样子。

• “继续” - 跳到下一个绘制调用。
• “单步跳过” - 跳过当前上下文调用。
• “单步跳出” - 跳出动画帧（通常跳到下一个 requestAnimationFrame 调用）。
• “单步进入” - 跳到 JavaScript 调试器中的下一个非上下文调用。

通过在快照函数调用上“单步进入”或通过函数的堆栈跳转到 JavaScript 调试器，您可以在动画仍在运行的情况下添加断点并立即暂停。非常方便！

未来工作

我们还没有完成。我们还有一些改进措施，可以使此工具更强大。

• 添加检查每次方法调用时上下文的 state 的功能。突出显示调用之间 state 的差异。
• 测量每个绘制调用中花费的时间。这将清楚地显示昂贵的 Canvas 操作。
• 更轻松地了解哪些程序和着色器当前在每个绘制调用中使用，从而允许您跳转到着色器编辑器并实时调整着色器。总体上与着色器编辑器更好的链接。
• 通过分别绘制各个区域（通过 ID 以不同颜色绘制）或在使用鼠标悬停在预览面板上时显示像素的命中区域 ID 来检查 命中区域。

我们才刚刚开始。Canvas 调试器应该很快就会出现在 Firefox Nightly 中。请关注此空间以获取其发布的新闻和更多更新。