HTML5画布检查器？

Question

是否有能力检查在HTML5画布上渲染的对象，就像我们在Silverlight Spy中使用Silverlight一样？

如果我使用Chrome元素检查器，我只能检查DOM。

Answer 1

修改 这个答案不适用于新的Chrome版本，请参阅： 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上绘制的内容，以便拥有用于重绘的持久对象。我写了一些popular tutorials on that，毫无疑问，如果你搜索，你会发现更多。

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

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

Answer 4

目前无法检查画布内容 ，但是对于WebGL，您可以对Google Chrome使用“WebGL Inspector”扩展程序，因此我认为 it可能也可以为Canvas进行类似的扩展。但它不像普通的DOM检查员那样工作。

以下是WebGL Inspector的功能：

• 注入页面的扩展
• 使用单个脚本嵌入现有应用程序
• 捕获整个GL帧
• 带有步进/资源导航和冗余呼叫警告的带注释的呼叫记录
• 像素历史记录 - 查看有助于像素+混合信息的所有绘制调用
• GL状态显示
• 纹理，缓冲区和程序的资源浏览器

让我们希望我不会越野，但目前没有Bitmap或Vector Canvas 检查员。

Answer 5

将画布视为ms画画。没有对象，只有像素和方法将它们放在屏幕上。