简介
无论您使用的是 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 已停用。如果某个页面包含您想要调试的画布，您只需按 Enable 即可，该页面将重新加载以捕获 <canvas> 调用：
您需要决定是要捕获单个帧还是连续的帧（其中的帧与您在开发者工具时间轴中看到的完全相同）。
单帧会捕获调用，直到当前帧结束为止。另一方面，连续帧会捕获所有 <canvas> 元素的所有帧，直到您指示它停止为止。选择哪种模式取决于您使用 <canvas> 元素的方式。对于持续播放的动画，您可能需要捕获单个帧。对于响应用户事件而播放的简短动画，您可能需要捕获连续帧。
至此，一切准备就绪，可以开始拍摄了！
捕获帧
若要捕获，只需按 Start，然后像平常一样与您的应用交互即可。一段时间后，返回开发者工具，如果您连续捕获，请按 Stop。
现在，左侧列表中有一个全新的配置文件，其中包含所有 <canvas> 元素捕获的上下文调用的数量。点击配置文件，您会看到如下所示的界面：
下方的窗格中将显示您可以单步调试的所有已捕获帧的列表，并且当您点击每个帧时，顶部的屏幕截图将显示 <canvas> 元素在该帧结束时的状态。如果您有多个 <canvas> 元素，可以使用屏幕截图正下方的菜单选择要显示哪个元素。
在此框架内，您会看到绘制调用组。每个绘制调用组都包含一个绘制调用，该调用将是该组中的最后一次调用。那么，什么是“抽奖”呢？对于 2D 上下文（如 clearRect()、drawImage()、fill()、stroke()、putImageData() 或任何文本渲染函数），对于 WebGL，则为 clear()、drawArrays() 或 drawElements()。它本质上是会更改当前绘制缓冲区内容的任何操作。（如果您对图形没有兴趣，可以将缓冲区视为带有要操控的像素的位图。）
现在，您只需逐步浏览列表即可。您可以在框架、绘制调用组或调用级别执行此操作。无论您选择哪种方式浏览列表（屏幕截图正下方有一些按钮可帮助您快速导航），都可以看到当时的上下文，这意味着您可以快速找到并修复出现的错误。
发现不同之处
另一个实用功能是能够查看两次调用之间哪些属性和变量发生了更改。
如要查看，只需点击边栏按钮 (
)，系统会弹出一个新的视图。在您逐步执行绘制调用时，您将看到已更新的属性。如果将鼠标悬停在任何缓冲区或数组上，它们将显示其内容。
请倾听！
现在，您已了解如何在 Chrome 的开发者工具中调试画布工作。如果您对 Canvas Profiler 工具有任何反馈意见，请提交 bug 或向 Chrome 开发者工具群组发帖。如果您发现了任何 bug，或者希望在检查 <canvas> 时了解任何其他问题，请告诉我们，因为只有开发者使用并获得了反馈，Chrome 的工具才能得到改进。