Introduzione
Non importa se utilizzi un contesto 2D o WebGL, chiunque abbia lavorato con l'elemento <canvas> sa che eseguire il debug può essere estremamente difficile. L'utilizzo di una tela di solito comporta un elenco di chiamate lungo e difficile da seguire:
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
A volte potresti voler acquisire le istruzioni inviate a un contesto canvas e visualizzarle una per volta. Fortunatamente, in Chrome DevTools c'è una nuova funzionalità Ispezione di Canvas che ci consente di farlo.
In questo articolo ti mostrerò come usare questa funzionalità per iniziare a eseguire il debug del tuo lavoro su tela. Lo strumento di controllo supporta sia i contesti 2D che WebGL, pertanto dovresti riuscire a ottenere subito informazioni di debug utili, indipendentemente da quale utilizzi.
Per iniziare
Per iniziare, vai a about:flags in Chrome e attiva "Attiva gli esperimenti di Strumenti per sviluppatori"
Poi, vai a DevTools e premi l'ingranaggio 
nell'angolo in basso a destra. Da qui puoi andare a Esperimenti e attivare l'ispezione di Canvas:
Affinché le modifiche abbiano effetto, devi chiudere e riaprire DevTools (puoi usare Alt+R o Option+R, una pratica alternativa).
Quando DevTools riapre, vai alla sezione Profili e vedrai una nuova opzione di Profiler di Canvas.
Per cominciare, noterai che Canvas Profiler è disattivato. Quando hai una pagina che contiene un canvas di cui vuoi eseguire il debug, premi Abilita e la pagina verrà ricaricata e pronta per acquisire le chiamate <canvas>:
Dovrai decidere se acquisire un singolo frame o frame consecutivi, in cui un frame è esattamente lo stesso di quello che visualizzeresti nella sequenza temporale di DevTools.
Singolo fotogramma acquisisce le chiamate fino alla fine del frame corrente, quindi si interrompe. I frame consecutivi, invece, acquisiscono tutti i frame di tutti gli elementi <canvas> finché non chiedi di arrestarsi. La modalità scelta dipende da come utilizzi l'elemento <canvas>. Per un'animazione in corso, potresti voler acquisire un singolo fotogramma. Per una breve animazione che si verifica in risposta a un evento utente, potrebbe essere necessario acquisire fotogrammi consecutivi.
Ora è tutto pronto per iniziare ad acquisire immagini.
Acquisizione fotogrammi
Per acquisire le immagini è sufficiente premere Start e interagire con l'applicazione come faresti normalmente. Trascorso un po' di tempo, torna a DevTools e, se le acquisizioni vengono acquisite consecutivamente, premi Interrompi.
Ora hai un nuovo profilo nell'elenco a sinistra, completo del numero di chiamate contestuali acquisite in tutti gli elementi <canvas>. Fai clic sul profilo e vedrai una schermata simile alla seguente:
Nel riquadro inferiore vedrai un elenco di tutti i frame acquisiti che puoi esaminare e, facendo clic su ciascuno di essi, lo screenshot in alto mostrerà lo stato dell'elemento <canvas> alla fine di quel frame. Se hai più elementi <canvas>, puoi scegliere quale mostrare utilizzando il menu sotto lo screenshot.
All'interno del frame vedrai i gruppi di chiamata disegnati. Ogni gruppo di chiamate di disegno contiene una singola chiamata di disegno, che sarà l'ultima chiamata del gruppo. Che cos'è una chiamata al pareggio? Per un contesto 2D potrebbe essere clearRect(), drawImage(), fill(), stroke(), putImageData() o qualsiasi funzione di rendering del testo, mentre per WebGL sarebbe clear(), drawArrays() o drawElements(). Si tratta essenzialmente di qualsiasi cosa che cambierebbe i contenuti del buffer di disegno corrente. (Se non ti piace la grafica, puoi pensare al buffer come a una bitmap con pixel che stiamo manipolando.)
A questo punto non devi fare altro che scorrere l'elenco. Puoi farlo a livello di frame, disegnare gruppo di chiamata o chiamata. Indipendentemente dal metodo scelto (e sotto lo screenshot sono presenti dei pulsanti che ti aiutano a navigare rapidamente), vedrai il contesto in qualsiasi momento, il che significa che potrai trovare e correggere rapidamente i bug man mano che si presentano.
Trova la differenza
Un'altra funzionalità utile è la possibilità di vedere quali proprietà e variabili sono cambiate tra due chiamate.
È sufficiente fare clic sul pulsante della barra laterale (
) per aprire una nuova visualizzazione. Mentre esegui le chiamate di disegno, vedrai le proprietà che sono state aggiornate. Se passi il mouse sopra eventuali buffer o array, verranno visualizzati i relativi contenuti.
Fatti sentire.
Ora sai come eseguire il debug del lavoro sul canvas in DevTools di Chrome. Se hai feedback sullo strumento Canvas Profiler, segnala un bug o pubblica un post nel gruppo di Chrome DevTools. Facci sapere se riscontri bug o se c'è qualcos'altro che vorresti sapere durante l'ispezione di un <canvas>, perché gli strumenti di Chrome migliorano solo grazie all'uso e al feedback degli sviluppatori.