HTML5 canvas inspecteur?

Est-il en capacité d'inspecter les objets affichés sur une toile HTML5 comme nous pouvons le faire dans Silverlight avec Silverlight Espion ?

Si j'utilise Chrome éléments inspecteur je peux inspecter seulement DOM.

  • JavaScript n'est pas en HTML. J'ai mis à jour votre question.
  • Google Chrome Profil de l'onglet Outils de développement (Ctrl+Maj+J) pourrait faire l'affaire. Je n'ai jamais essayé avec de la toile mais.
  • L'onglet profils vous permet de regarder JavaScript CPU et l'utilisation du tas; il n'a rien à voir avec ce qui apparaît à l'écran.
  • Désolé, je pensais que l'OP signifiait toile de profilage, jamais l'esprit 😛
InformationsquelleAutor mastak | 2012-02-04
  1. 45

    EDIT:
    cette réponse ne fonctionne pas sur les nouvelles versions de chrome, voir:
    chrome toile inspecteur 2015

    En Chrome Canary:

    1. dans votre navigateur, entrez l'url suivante chrome://flags/
    2. permettre Activer les Outils de développement les expériences
    3. relancez google Chrome
    4. dans les outils de développement, cliquez sur le gear pour afficher développeur préférences
    5. sélectionnez expériences à partir du menu
    6. sélectionnez Toile Inspections
    7. près de devtools, actualisez la page, rouvrir les devtools

    Le guide complet sur la toile profiler:
    http://www.html5rocks.com/en/tutorials/canvas/inspection/

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

    • est-il une raison pourquoi ce serait miracoluously disparaître? Je l'ai eu à travailler dans les deux canaries et à la vanille, un jour, pouf. Outils de Dev expériences toujours activé, pas de profiler, pas de toile des inspections?
    • pouvez-vous s'il vous plaît laissez-moi savoir ce qu'est le "gear", et où et comment je peux le trouver. Quand ouvrir les outils de développement, elle ouvre les éléments de la fenêtre d'examen. où et qu'est-ce que 'gear'?
    • dans la dernière version de l'alpiste des Canaries cela signifie Settings les 3 points verticaux en haut à droite (ou utiliser la touche F1).
    • comme @pailhead souligné, cela ne semble pas être disponible dans les versions les plus récentes - je ne vois pas cela dans 49.0.2621.0 canary (64-bit). Je pense que Firefox Toile débogueur peut-travail type-de-bien... mais il sera agréable d'obtenir ce retour
    InformationsquelleAutor jedierikb
  2. 12

    Toile de contenu ne fait pas partie de la DOM, donc il n'est pas possible d'inspecter son contenu. Comme vous l'avez justement relevé, l'inspecteur peut inspecter les DOM uniquement, d'où la toile est hors de son champ d'application. Vous pouvez vérifier le contenu de la toile dans la console de votre devtools mais avec

    yourcanvas.toDataURL();

    et vérifiez la sortie dataURL dans les pays voisins de l'onglet.

    • La toile est bitmap: c'est le contenu n'est que ce que vous voyez sur l'écran
    • Pas tout à fait sûr de ce que le dernier commentaire a été en aide, merci @spliter - c'est très bien pour le débogage!
    InformationsquelleAutor spliter
  3. 7

    Il n'y a pas d'objets de rendu HTML5 Canvas. Il y a seulement des pixels. Lorsque vous dessinez une forme la toile ondes de sa baguette, les pixels apparaissent, et puis il oublie que tout de même arrivé.

    Comme beaucoup l'ont fait, vous pouvez garder une trace de ce que vous dessinez sur une Toile afin de disposer d'objets persistants pour les redessiner. J'ai écrit quelques populaire des tutoriels sur cette et nul doute que si vous recherche, vous trouverez plus d'.

    Comme vous construisez votre système des objets persistants, vous aurez presque certainement envie d'inclure un grand nombre de débogage de code que les sorties sont faciles à comprendre, des listes d'objets et de leurs coordonnées. Beaucoup de gens choisissent de le faire avec console.log déclarations qui seront de sortie ce que les chaînes que vous souhaitez pour le développeur de la console (une 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 obtenez à utiliser pour inspecter les choses.

    • Bon.. il n'y pas de navigateurs à supporter toile d'inspection encore.. une seule façon d'utiliser un bon cadre de comme Kohana
    InformationsquelleAutor Simon Sarris
  4. 3

    Il n'existe aucun moyen d'inspecter le contenu de canvas au moment, Mais en cas de WebGL vous pouvez utiliser " WebGL Inspecteur " extension pour Google Chrome, donc je pense que il est possible à faire de même, l'extension de la Toile aussi. mais il ne fonctionne pas comme le commun des DOM inspecteurs.

    Voici le WebGL Inspecteur caractéristiques:

    • Extension pour l'injection dans les pages
    • Intégrer dans une application existante avec un simple script inclure
    • Capturer l'intégralité de GL cadres
    • Annotée du journal des appels avec stepping/ressource de navigation et redondant appeler avertissements
    • Pixel de l'histoire - voir tous les appels de dessin qui ont contribué à un pixel + de fusion de l'information
    • GL affichage état de
    • Ressources navigateurs pour les textures, les tampons et les programmes

    Espérons que je ne suis pas hors-route, mais il n'y a pas de Bitmap ou Vectoriel Toile inspecteur pour le moment.

    InformationsquelleAutor sysop
  5. 1

    Traiter toile comme ms paint. Il n'y a pas des objets, il y a uniquement les pixels et les méthodes pour les mettre sur l'écran.

    InformationsquelleAutor rezoner