HTML5 canvas inspector?

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

In 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 gear to bring up developer preferences
5. select experiments from the menu
6. select Canvas Inspections
7. 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

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.