web-dev-qa-db-fra.com

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 je ne peux inspecter que DOM.

htmlcanvashtml5-canvasinspector
28
mastak

EDIT: cette réponse ne fonctionne pas sur les nouvelles chrome voir: Chrome Canvas Inspector 2015

Dans Chrome Canary:

  1. dans votre navigateur, entrez cette URL chrome://flags/
  2. enable Activer les expériences des outils de développement
  3. relancer Chrome
  4. dans les outils de développement, cliquez sur la roue dentée pour afficher les préférences du développeur
  5. sélectionnez expériences dans le menu
  6. sélectionnez Inspections de toile
  7. fermez devtools, actualisez la page, rouvrez devtools

Le guide complet sur le profileur de toile: http://www.html5rocks.com/en/tutorials/canvas/inspection/

Gif animé le montrant en action: https://Twitter.com/umaar/status/480705624448045057

45
jedierikb

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 indiqué, les inspecteurs ne peuvent inspecter que DOM, donc le canevas 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 l'URL de données de sortie dans l'onglet voisin.

12
spliter

Il n'y a aucun objet rendu sur un canevas HTML5. Il n'y a que des pixels. Lorsque vous dessinez une forme, le canevas agite sa baguette, des pixels apparaissent, puis il oublie que quelque chose s'est même produit.

Comme beaucoup l'ont fait, vous pouvez garder une trace de ce que vous dessinez sur un canevas afin d'avoir des objets persistants à redessiner. J'ai écrit quelques tutoriels populaires à ce sujet et sans aucun doute si vous recherchez, vous en trouverez plus.

Lorsque vous construisez votre système d'objets persistants, vous souhaiterez presque 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 console.log instructions qui afficheront les chaînes que vous souhaitez sur la console du développeur (qui fait 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.

7
Simon Sarris

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 = c'est possible pour faire une extension similaire pour Canvas aussi. mais cela ne fonctionne pas comme les inspecteurs DOM courants.

Voici les fonctionnalités de l'inspecteur WebGL:

  • Extension pour injecter dans les pages
  • Intégrer dans une application existante avec un seul script
  • Capturer des GL images entières
  • 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 mélange
  • Affichage de l'état GL
  • Navigateurs de ressources pour les textures, les tampons et les programmes

Espérons que je ne sois pas hors route, mais il n'y a pas d'inspecteur Bitmap ou Vector Canvas pour le moment.

3
sysop

Traitez 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.

1
rezoner