HTML5 canvas inspector?

问题

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

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

回答1:

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

In Chrome Canary:

in your browser, enter this url chrome://flags/
enable Enable Developer Tools experiments
relaunch Chrome
in the developer tools, click the gear to bring up developer preferences
select experiments from the menu
select Canvas Inspections
close devtools, refresh the page, reopen devtools

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

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

回答2:

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

yourcanvas.toDataURL();

and check the output dataURL in the neighbouring tab.

回答3:

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.

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 that and no doubt if you search you'll find more.

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.log statements that will output whatever strings you want to the developer console (part of the F12 developer tools in most modern browsers).

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

回答4:

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 possible to make similar extension for Canvas too. but it doesn't work like common DOM inspectors.

Here is the WebGL Inspector features:

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

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

回答5:

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

来源：https://stackoverflow.com/questions/9143209/html5-canvas-inspector

标签

html5

canvas

html5-canvas

inspector