Solución:
EDITAR:
esta respuesta no funciona en las nuevas versiones de Chrome, consulte: Chrome Canvas Inspector 2015
En Chrome Canary:
- en su navegador, ingrese esta url
chrome://flags/
- habilitar Habilitar experimentos de herramientas para desarrolladores
- relanzar Chrome
- en las herramientas para desarrolladores, haga clic en el
gear
para mostrar las preferencias del desarrollador - Seleccione experimentos del menú
- Seleccione Inspecciones de lona
- cerrar devtools, actualizar la página, volver a abrir devtools
La guía completa sobre el perfilador de lienzo: http://www.html5rocks.com/en/tutorials/canvas/inspection/
Gif animado que lo muestra en acción: https://twitter.com/umaar/status/480705624448045057
El contenido de Canvas no es parte del DOM, por lo que no hay forma de que pueda inspeccionar su contenido. Como ha señalado correctamente, los inspectores solo pueden inspeccionar DOM, por lo tanto, el lienzo está fuera de su alcance. Puede verificar el contenido del lienzo en la consola de sus devtools aunque con
yourcanvas.toDataURL();
y verifique la URL de datos de salida en la pestaña vecina.
No hay objetos representados en un lienzo HTML5. Solo hay píxeles. Cuando dibuja una forma, el lienzo agita su varita, aparecen píxeles y luego se olvida de que incluso sucedió algo.
Como muchos han hecho, puede realizar un seguimiento de lo que dibuja en un lienzo para tener objetos persistentes para volver a dibujar. He escrito Una introducción suave para hacer que HTML5 Canvas sea interactivo y, sin duda, si busca, encontrará otros tutoriales.
A medida que construye su sistema de objetos persistentes, seguramente querrá incluir mucho código de depuración que genere listas de objetos fáciles de entender y sus coordenadas. Mucha gente elige hacer esto con console.log
declaraciones que generarán las cadenas que desee en la consola del desarrollador (parte de las herramientas de desarrollo F12 en la mayoría de los navegadores modernos).
Pero eso es todo. Lo que construyes es lo que puedes usar para inspeccionar cosas.