使用Chrome开发工具调试Canvas

http://sentsin.com/web/253.html

无论你是使用2D 仍是WebGL，任何用过<canvas>的人都知道很难调试，使用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
}

 

代码laycode - v1.1

有时候你须要捕获发送到 Canvas 上下文的命令，而后一步步跟踪，幸运的是Chrome的 DevTools 提供了 Canvas检查器，这个新特性让咱们能够调试canvas

本文将介绍如何使用这个特性来调试你的 Canvas 代码，这个检查器同时支持2D 和WebGL，因此无论你使用哪种，你均可以直接获得有用的调试信息

开始

首先进入Chrome 浏览器的 about:flags界面，并激活选项“启用开发者工具实验”

而后，在DevTools界面中点击（右上角）的齿轮按钮，进入Experiments，并勾选Canvas inspection选项

你须要重启 DevTool（你可使用 Alt+R或者Option+R） 当 DevTools 重启后，进入Profiles界面，能够看到新的 Canvas Profiler选项 你会注意到刚开始Canvas Profiler是无效状态，当你想调试页面中的 canvas 元素时，你只须要简单的点击Enable按钮，页面将从新加载并准备捕获<canvas>调用

你能够捕获单个帧，或者连续帧，帧的信息一样也能够在 DevTools 的 Timeline 中看到

一帧表明一次页面事件周期，这包含脚本运行，事件处理，更新DOM，样式生效，布局和重绘页面，为了动画的流畅，每帧的时间最好小于1/60秒，也就是16.6毫秒

单帧捕获会在每帧的结束时中止

连续帧捕获则只在你告诉他时中止，选择哪一种模式取决于你如何使用<canvas>，对于一个连续动画，你可能想捕获每一帧，对于为响应用户交互而引起的短暂动画，你可能须要捕获连续帧

选择帧监听类型，而后咱们就能够就绪开始捕获了

捕获帧事件

你只须要点击Start，而后正常操做你的应用，过一下子回到 DevTools 界面，点击Stop按钮。 如今能够看到一个新的 profile，包含全部捕获的<canvas>元素的调用次数，点击这个 profile 能够看到下面的界面：

下面的面板中，能够看到全部捕获的帧，你能够点击每帧看到逐步绘制的过程，若是你有多个<canvas>元素，你能够选择其中的一个

每一帧的里面，能够看到绘制调用组，每一个组包含一个绘制调用（位于组的最后），什么是绘制调用？对于2D context是 clearRect(), drawImage(), fill(), stroke(), putImageData()或者任何文字绘制方法，对于 WebGL则是clear(), drawArrays()或者drawElements()，本质上任何改变当前绘制缓冲内容的操做（若是Canvas 不可见，你能够想象为对缓存位图的操做） 你能够尽情的查看绘制过程的每一步，每次选择均可以直接看到当前位置绘制的效果，能够方便快速的定位 bug

发觉差别

另外一个有用的功能是查看两次调用的参数和属性变化，你只须要简单的点击sidebar按钮，就能够看到一个新的属性视图，每一步绘制调用你均可以看到属性的更新，你能够鼠标移到属性值上面，看到详细的内容或者数组信息

反馈

如今你知道如何使用 Chrome DevTools 调试你的 canvas了，若是你对 Canvas 调试工具备任何反馈，请提交 bug或者post到 Chrome DevTools Group，若是你发现了 bug 或者但愿在调试<canvas>时看到任何其余信息，欢迎与咱们联系，由于只有经过开发者的反馈Chrome工具才能更加好用