简介
无论您使用的是 2D 还是 WebGL 上下文，任何使用过 <canvas> 元素的人都知道，调试起来可能非常困难。使用画布通常涉及一长串难以理解的调用：
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 开发者工具中有一项新的画布检查功能，可以帮助我们做到这一点！
在本文中，我将向您展示如何使用此功能开始调试画布工作。该检查器同时支持 2D 和 WebGL 上下文，因此无论您使用的是哪种上下文，都应该能够立即获得有用的调试信息。
使用入门
首先，在 Chrome 中前往 about:flags，然后开启“启用开发者工具实验”
接下来，前往开发者工具，然后点击右下角的齿轮图标 
。然后，您可以前往实验并启用画布检查：
如需使更改生效，您需要关闭并重新打开开发者工具（您可以使用 Alt+R 或 Option+R，这是一个便捷的替代方法）。
当开发者工具重新打开时，前往“Profiles”部分，您会看到一个新的“Canvas Profiler”选项。
首先，您会注意到 Canvas Profiler 已停用。当您打开包含要调试的画布的页面后，只需按启用，页面就会重新加载，准备好捕获 <canvas> 调用：
您需要决定是捕获单帧还是连续帧，其中帧与您在开发者工具时间轴中看到的完全相同。
Single frame 会捕获调用，直到当前帧结束，然后停止。另一方面，连续帧会捕获所有 <canvas> 元素的所有帧，直到您指示其停止。选择哪种模式取决于您如何使用 <canvas> 元素。对于正在播放的动画，您可能需要捕获单帧。对于为响应用户事件而发生的简短动画，您可能需要捕获连续帧。
至此，我们已完成所有设置，可以开始捕获了！
正在捕获帧
如需捕获，只需按开始，然后像往常一样与应用交互。过一段时间后，返回开发者工具，如果您正在连续捕获，请按停止。
现在，左侧列表中会显示一个全新的配置文件，其中包含所有 <canvas> 元素中捕获的上下文调用次数。点击该配置文件，您会看到如下所示的界面：
在下方面板中，您会看到一个列表，其中包含所有已捕获的帧，您可以逐帧查看。点击每一帧时，顶部的屏幕截图会显示该帧结束时 <canvas> 元素的状态。如果您有多个 <canvas> 元素，可以使用屏幕截图下方的菜单选择要显示的元素。
在帧内，您会看到绘制调用组。每个绘制调用组都包含一个绘制调用，该调用将是组中的最后一个调用。那么，什么是绘制调用？对于 2D 上下文，这些函数包括 clearRect()、drawImage()、fill()、stroke()、putImageData() 或任何文本渲染函数；对于 WebGL，这些函数包括 clear()、drawArrays() 或 drawElements()。基本上，任何会改变当前绘图缓冲区内容的操作都属于此类。（如果您不熟悉图形，可以将缓冲区视为包含我们正在操作的像素的位图。）
现在，您只需逐步完成列表中的操作。您可以在帧、绘制调用组或调用级别执行此操作。无论您选择以何种方式浏览列表（屏幕截图下方有可帮助您快速浏览的按钮），您都会看到相应时间点的上下文，这意味着您可以快速找到并修复出现的 bug。
欢乐找不同
另一项实用功能是能够查看两次调用之间哪些属性和变量发生了变化。
如需查看，只需点击边栏按钮 (
)，系统就会弹出一个新视图。当您逐步查看绘制调用时，您会看到已更新的属性。如果您将鼠标悬停在任何缓冲区或数组上，系统都会显示其内容。
让世界听到你的声音！
现在，您已经知道如何在 Chrome 开发者工具中调试画布工作。如果您对 Canvas Profiler 工具有任何反馈，请提交 bug 或在 Chrome 开发者工具群组中发帖。如果您发现任何 bug，或者在检查 <canvas> 时还想看到其他内容，请告诉我们，因为只有通过开发者的使用和反馈，Chrome 的工具才能变得更好。