Esiste la possibilità di ispezionare gli oggetti renderizzati su una tela HTML5 come possiamo fare in Silverlight con Silverlight Spy?Ispettore canvas HTML5?
Se utilizzo l'ispettore di elementi di Chrome, posso controllare solo DOM.
EDIT: questa risposta non funzionano su nuove versioni cromo vedono: chrome canvas inspector 2015
In Chrome Canary:
chrome://flags/la guida completa sul profiler tela: http://www.html5rocks.com/en/tutorials/canvas/inspection/
GIF animato che mostra in azione: https://twitter.com/umaar/status/480705624448045057
Nella mia versione di Chrome '24 .0.1312.56 m 'o Chrome Canary non esiste ancora :(.. – mastak
istruzioni aggiornate.è un processo un po 'contorto – jedierikb
c'è un motivo per cui questo scomparirebbe miracolosamente? Avevo funzionato sia in canarino che in vaniglia, un giorno in poof. abilitato, nessun profiler, nessuna ispezione su tela? – pailhead
Il contenuto della tela non fa parte del DOM, quindi non è possibile visualizzarne il contenuto. Come hai giustamente sottolineato, gli ispettori possono ispezionare solo DOM, quindi la tela è fuori dal suo scopo. È possibile controllare il contenuto della tela nella console del vostro devtools anche se con
yourcanvas.toDataURL();
e controllare l'output DataURL nella scheda vicina.
La tela è bitmap: il contenuto è solo quello che vedi sullo schermo –
Non sei sicuro di quale sia stato l'ultimo commento, grazie @spliter - è fantastico per il debugging! – UpTheCreek
Trattare la tela come pittura ms. Non ci sono oggetti, ci sono solo pixel e metodi per metterli sullo schermo.
Non c'è modo di ispezionare il contenuto di tela al momento, ma in caso di WebGL è possibile utilizzare "WebGL Inspector" un'estensione per Google Chrome, quindi penso è possibile fare estensione simile per Canvas troppo . ma non funziona come gli ispettori DOM comuni.
Ecco le caratteristiche WebGL Inspector:
Let Io non sono fuori strada, ma non c'è bitmap o vettoriale Canvas ispettore al momento.
Non ci sono oggetti renderizzati su una tela HTML5. Ci sono solo pixel Quando si disegna una forma, la tela ondula la sua bacchetta, i pixel appaiono e poi dimentica che è successo qualcosa.
Come molti hanno fatto, è possibile tenere traccia di ciò che si disegna su una tela per avere oggetti persistenti per il ridisegno. Ho scritto alcuni popular tutorials on that e senza dubbio se cerchi, troverai di più.
Man mano che si crea il sistema di oggetti persistenti, quasi sicuramente si desidera includere un sacco di codice di debug che restituisce elenchi di oggetti e relative coordinate di facile comprensione. Un sacco di persone scelgono di farlo con le dichiarazioni console.log che emetteranno qualsiasi stringa desideri alla console di sviluppo (parte degli strumenti di sviluppo F12 nella maggior parte dei browser moderni).
Ma questo è tutto. Quello che costruisci è ciò che usi per ispezionare le cose.
Corretto .. non ci sono ancora browser per supportare l'ispezione su tela .. solo un modo per usare il framework giusto come [Kohana] (http://alertdevelop.ru/projects/profilertoolbar) – mastak
JavaScript non è HTML. Ho aggiornato la tua domanda. – Jonas
La scheda Profilo di Google Chrome sotto Strumenti per sviluppatori (Ctrl + Maiusc + J) potrebbe fare la differenza. Non ho mai provato con la tela però. – Ryan
@minitech: la scheda Profili consente di esaminare l'utilizzo della CPU e dell'heap di JavaScript; in realtà non ha nulla a che fare con ciò che viene visualizzato sullo schermo. – josh3736