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