Inspecteur de toile HTML5?
Y a - t-il une possibilité d'inspecter les objets rendus sur une toile HTML5 comme nous pouvons le faire dans Silverlight avec Silverlight Spy ?
Si j'utilise Chrome elements inspector, Je ne peux inspecter que DOM.
5 réponses
Modifier: cette réponse ne fonctionne pas sur les nouvelles versions de chrome voir: chrome toile inspecteur 2015
Dans Chrome Canary:
- dans votre navigateur, entrez cette url
chrome://flags/ - activer activer les expériences des outils de développement
- relancer Chrome
- dans les outils de développement, cliquez sur "engrenage" pour afficher les préférences du développeur
- sélectionnez expériences dans le menu
- sélectionner Toile Les Inspections
- fermez devtools, actualisez la page, rouvrez devtools
LE guide COMPLET sur le profileur canvas: http://www.html5rocks.com/en/tutorials/canvas/inspection/
GIF animé le montrant en action: https://twitter.com/umaar/status/480705624448045057
Le contenu de Canvas ne fait pas partie du DOM, il n'y a donc aucun moyen d'inspecter son contenu. Comme vous l'avez correctement souligné, les inspecteurs peuvent inspecter DOM seulement, donc canvas est hors de sa portée. Vous pouvez vérifier le contenu du canevas dans la console de vos devtools avec
yourcanvas.toDataURL();
Et vérifiez le dataURL de sortie dans l'onglet voisin.
Aucun objet n'est rendu sur un canevas HTML5. Il y a seulement des pixels. Lorsque vous dessinez une forme, la toile agite sa baguette, des pixels apparaissent, puis elle oublie que quelque chose s'est même passé.
Comme beaucoup l'ont fait, vous pouvez garder une trace de ce que vous dessinez sur une toile afin d'avoir des objets persistants à redessiner. J'ai écrit quelques tutoriels populaires sur ce et sans doute si vous recherchez, vous trouverez plus.
Lorsque vous construisez votre système d'objets persistants, vous aurez presque vous voulez certainement inclure beaucoup de code de débogage qui génère des listes d'objets faciles à comprendre et leurs coordonnées. Beaucoup de gens choisissent de le faire avec des instructions console.log qui afficheront les chaînes que vous voulez sur la console de développement (partie des outils de développement F12 dans la plupart des navigateurs modernes).
Mais c'est tout. Ce que vous construisez est ce que vous pouvez utiliser pour inspecter les choses.
Il N'y a aucun moyen d'inspecter le contenu du canevas pour le moment, mais dans le cas de WebGL, vous pouvez utiliser l'extension "WebGL Inspector " pour Google Chrome, donc je pense que il est possible de faire une extension similaire pour Canvas aussi. mais cela ne fonctionne pas comme les inspecteurs DOM communs.
Voici les fonctionnalités de L'Inspecteur WebGL:
- Extension pour l'injection dans les pages
- Intégrer dans une application existante avec un simple script inclure
- Capturer cadres GL entiers
- journal des appels annoté avec navigation pas à pas/ressources et avertissements d'appel redondants
- Historique des pixels-voir tous les appels de tirage qui ont contribué à un pixel + informations de fusion
- affichage de L'état GL
- navigateurs de ressources pour les textures, les tampons et les programmes
Espérons que je ne suis pas hors route, mais il n'y a pas de toile Bitmap ou vectorielle inspector pour le moment.
Traiter la toile comme ms paint. Il n'y a pas d'objets, il n'y a que des pixels et des méthodes pour les mettre à l'écran.