Html HTML5 画布检查器？

HTML5 canvas inspector?

提问by mastak

Is there any ability to inspect the objects rendered on a HTML5 canvas like we can do in Silverlight with Silverlight Spy ?

有没有能力像我们在 Silverlight 中使用 Silverlight Spy 那样检查 HTML5 画布上呈现的对象？

If I use Chrome elements inspector I can inspect only DOM.

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

回答by jedierikb

EDIT:this answer doesn't work on new chrome versions see: chrome canvas inspector 2015

编辑：此答案不适用于新的 chrome 版本，请参阅： chrome canvas inspector 2015

In Chrome Canary:

在 Chrome Canary 中：

1. in your browser, enter this url chrome://flags/
2. enable Enable Developer Tools experiments
3. relaunch Chrome
4. in the developer tools, click the gearto bring up developer preferences
5. select experimentsfrom the menu
6. select Canvas Inspections
7. close devtools, refresh the page, reopen devtools

1. 在您的浏览器中，输入此网址 chrome://flags/
2. 启用启用开发者工具实验
3. 重新启动 Chrome
4. 在开发人员工具中，单击gear以调出开发人员首选项
5. 从菜单中选择实验
6. 选择画布检查
7. 关闭 devtools，刷新页面，重新打开 devtools

---

---

The full guide on the canvas profiler: http://www.html5rocks.com/en/tutorials/canvas/inspection/

画布分析器的完整指南：http: //www.html5rocks.com/en/tutorials/canvas/inspection/

Animated gif showing it in action: https://twitter.com/umaar/status/480705624448045057

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

回答by spliter

Canvas' content is not part of the DOM, so there is no way you could inspect it's content. As you have correctly pointed, inspectors can inspect DOM only, hence canvas is out of it's scope. You can check the contents of the canvas in the console of your devtools though with

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

yourcanvas.toDataURL();

and check the output dataURL in the neighbouring tab.

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

回答by Simon Sarris

There are no objects rendered on an HTML5 Canvas. There are only pixels. When you draw a shape the canvas waves its wand, pixels appear, and then it forgets that anything even happened.

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

As many have done, you can keep track of what you draw on a Canvas in order to have persistent objects for redrawing. I've written a few popular tutorials on thatand no doubt if you search you'll find more.

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

As you build up your system of persistent objects you'll almost certainly want to include a lot of debug code that outputs easy to understand lists of objects and their coordinates. A lot of people choose to do this with console.logstatements that will output whatever strings you want to the developer console (part of the F12 developer tools in most modern browsers).

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

But that's it. What you build is what you get to use to inspect things.

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

回答by sysop

There is no way to inspect the canvas content at the moment, But in case of WebGL you can use " WebGL Inspector" extension for Google Chrome, so I think it is possibleto make similar extension for Canvas too. but it doesn't work like common DOM inspectors.

有没有办法检查画布内容的那一刻，但在WebGL的情况下，你可以使用“ WebGL的督察谷歌浏览器”的扩展，所以我认为这是有可能作出类似的扩展画布太大。但它不像常见的 DOM 检查器那样工作。

Here is the WebGL Inspector features:

这是 WebGL Inspector 功能：

• Extension for injecting into pages
• Embed in an existing application with a single script include
• Capture entire GL frames
• Annotated call log with stepping/resource navigation and redundant call warnings
• Pixel history - see all draw calls that contributed to a pixel + blending information
• GL state display
• Resource browsers for textures, buffers, and programs

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

Let's hope I'm not off-road, but there is no Bitmap or Vector Canvas inspectorat the moment.

让我们希望我不是越野，但目前没有位图或矢量画布检查器。

回答by rezoner

Treat canvas as ms paint. There are no objects, there are only pixels and methods to put them on screen.

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