HTML5画布检查器？

Question

是否有能力检查在HTML5画布上呈现的对象,就像我们可以在Silverlight Spy中使用Silverlight一样？

如果我使用Chrome元素检查器,我只能检查DOM.

Answer 1

编辑: 这个答案不适用于新的铬版本请参阅: chrome canvas inspector 2015

在Chrome Canary中:

1. 在浏览器中输入此网址 chrome://flags/
2. 启用启用开发者工具实验
3. 重新启动Chrome
4. 在开发人员工具中,单击"齿轮"以显示开发人员首选项
5. 从菜单中选择实验
6. 选择Canvas Inspections
7. 关闭devtools,刷新页面,重新打开devtools

canvas Profiler上的完整指南:http: //www.html5rocks.com/en/tutorials/canvas/inspection/

动画gif显示它在行动:https: //twitter.com/umaar/status/480705624448045057

Answer 2

Canvas的内容不是DOM的一部分,因此您无法检查它的内容.正如您所指出的那样,检查员只能检查DOM,因此画布不在其范围内.您可以在devtools的控制台中检查画布的内容

yourcanvas.toDataURL();

并检查相邻选项卡中的输出dataURL.

Answer 3

HTML5 Canvas上没有呈现的对象.只有像素.当你绘制一个形状时,画布挥动它的魔杖,出现像素,然后忘记发生任何事情.

正如许多人所做的那样,你可以跟踪你在Canvas上绘制的内容,以便拥有用于重绘的持久对象.我已经写了一些流行的教程,毫无疑问,如果你搜索你会发现更多.

在构建持久对象系统时,您几乎肯定希望包含许多调试代码,这些代码可以输出易于理解的对象列表及其坐标.许多人选择使用console.log语句来执行此操作,这些语句将向开发人员控制台输出您想要的任何字符串(在大多数现代浏览器中是F12开发人员工具的一部分).

但就是这样.你构建的是你用来检查事物的东西.