Firefox 开发者工具中的Canvas调试器

Canvas调试器（Canvas Debugger）是我们在旧金山的游戏开发大会（Game Developers Conference，简称GDC）中演示的一款新工具，主要用来调试动画在Canvas元素中渲染的动画frame。无论你是在创建一款视觉形象，动画或是调试一个游戏，这个工具都能帮你通过调试WebGL或是2D Canvas context来理解和优化动画循环。

开发者可以使用一款传统的调试器来调试动画，比如火狐开发者工具中的JavaScript调试器。但是，如果需要手动搜索所有canvas方法的话就变得很困难了。Canvas调试器可以让开发者从动画循环本身的角度查看渲染调用，让开发者对所发生的变化有一个更好的全面的了解。

它是如何工作的？

Canvas调试器通过在渲染一个frame时对所有发生的情况创建快照的方式来工作。它记录了所有的canvas context方法调用。每个frame快照包含了context方法调用列表和相关的JavaScript栈。通过查看这个栈，开发者可以追踪调用那些被应用或是引擎请求的更高级别的功能来画出一些东西。

一些Canvas环境功能类型被高亮，这样它们更容易在快照中被发现。快速滚动这个列表，开发者就能非常容易的看到绘制调用或是冗余操作。

每个绘制调用都有一个关联的截图，在屏幕下方的时间轴中的“幻灯片”视图中可以看到。开发者可以使用一个滚动条“擦拭”这个幻灯片来快速定位一个绘制调用和相关的渲染部分。开发者还可以点击缩略图直接到动画frame快照中看到相关的绘制调用。

缩略图幻灯片让开发者可以快速浏览绘制过程，方便的看到整个场景是如何完成最终渲染的。

其他

你可能会注意到在附件截图中有一行熟悉的按钮，它们是从JavaScript调试器中借用来的，为开发者提供在动画快照中导航的方法。这些按钮可能在最后发布时会更换图标，目前我们暂时先保留这个样子。

• “点击恢复” —— 跳转到下一个绘制调用。
• “跨越” —— 执行当前上下文调用。
• “步进” —— 跳出动画frame（典型的是到下一个 requestAnimationFrame调用）。
• “步出” —— 访问JavaScript调试器中的下一个非上下文调用。

通过“步进”一个快照功能调用进入到JavaScript调试器中或是通过一个功能的栈，允许开发者添加断点和在动画允许过程中随时暂停会更方便。

接下来的工作

我们还没有完成，还有一些改进能够帮助这款工具变得更好。
为每个方式调用添加查看context状态的功能。高亮在调用中不同的状态。
计算每个绘制调用花费的时间，这在昂贵的canvas操作中已经显示。
更简单的了解哪个程序和着色器目前在使用哪个绘制调用，允许开发者跳转到着色器编辑器中并且实时用着色器修补。最好能够整体连接到着色器编辑器。
通过分别绘制单独区域，通过id进行不通着色或是当使用鼠标悬停在面板预览时显示像素的hit region id来查看到达区域（Hit Regions）。
我们才刚刚开始，Canvas调试器将加入到Firefox Nightly中，请关于它的更多信息和更新。