Ispezione di Canvas mediante Chrome DevTools

Paul Lewis

Introduzione

Non importa se utilizzi un contesto 2D o WebGL, chiunque abbia mai lavorato con l'elemento <canvas> sa che può essere estremamente difficile eseguire il debug. Lavorare con un canvas di solito comporta un elenco lungo e difficile da seguire di chiamate:

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 vuoi acquisire le istruzioni inviate a un contesto canvas ed eseguirle una alla volta. Fortunatamente, in Chrome DevTools è disponibile una nuova funzionalità di ispezione di Canvas che ci consente di farlo.

In questo articolo ti mostrerò come utilizzare questa funzionalità per iniziare a eseguire il debug del tuo lavoro con Canvas. L'inspector supporta sia i contesti 2D che WebGL, quindi, indipendentemente da quello che utilizzi, dovresti essere in grado di ottenere immediatamente informazioni di debug utili.

Per iniziare

Per iniziare, vai a about:flags in Chrome e attiva "Attiva esperimenti di Strumenti per sviluppatori".

Figura 1 - Attivazione degli esperimenti degli Strumenti per sviluppatori in about:flags

Poi, vai su DevTools e premi l'icona a forma di ingranaggio nell'angolo in basso a destra. Da qui puoi andare a Esperimenti e attivare Ispezione canvas:

Figura 2 - Attivazione dell'ispezione di Canvas negli esperimenti di DevTools

Affinché le modifiche vengano applicate, devi chiudere e riaprire DevTools (puoi utilizzare Alt+R o Option+R, una comoda alternativa).

Quando DevTools si riapre, vai alla sezione Profili e vedrai una nuova opzione Profiler canvas.

Per iniziare, noterai che Canvas Profiler è disattivato. Una volta visualizzata una pagina contenente un canvas di cui vuoi eseguire il debug, premi Attiva e la pagina verrà ricaricata pronta per acquisire le chiamate <canvas>:

Figura 3 - Attivazione di Canvas Profiler

Dovrai decidere se acquisire un singolo frame o frame consecutivi, dove un frame è esattamente lo stesso che vedresti nella cronologia di DevTools.

Termine chiave: un frame rappresenta un singolo passaggio attraverso il loop di eventi della pagina. Ciò comporta l'esecuzione di JavaScript, la gestione degli eventi, l'aggiornamento del DOM, le modifiche allo stile, l'esecuzione del layout, la pittura e la composizione della pagina. Per un'animazione fluida, ogni frame deve richiedere meno di 1/60 di secondo o 16, 6 ms.

Singolo frame acquisisce le chiamate fino alla fine del frame corrente, quindi si interrompe. Fotogrammi consecutivi, invece, acquisisce tutti i fotogrammi di tutti gli elementi <canvas> finché non interrompi l'operazione. La modalità scelta dipende da come utilizzi l'elemento <canvas>. Per un'animazione in corso, potresti voler acquisire un singolo frame. Per una breve animazione che si verifica in risposta a un evento utente, potrebbe essere necessario acquisire frame consecutivi.

Figura 4 - Scelta del numero di frame da acquisire

Ora è tutto pronto per iniziare ad acquisire.

Acquisizione dei frame

Per acquisire, premi semplicemente Inizia e poi interagisci con l'applicazione come faresti normalmente. Dopo un po' di tempo, torna a DevTools e, se stai acquisendo consecutivamente, premi Interrompi.

Ora hai un nuovo profilo nell'elenco a sinistra, completo del numero di chiamate di contesto acquisite in tutti gli elementi <canvas>. Fai clic sul profilo e vedrai una schermata simile alla seguente:

Figura 5 - Un profilo canvas in DevTools

Nel riquadro inferiore vedrai un elenco di tutti i frame acquisiti che puoi esaminare e, quando fai clic su ciascuno, 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 appena sotto lo screenshot.

Figura 6 - Scelta del contesto del canvas

All'interno del frame vedrai i gruppi di chiamate di disegno. Ogni gruppo di chiamate di disegno contiene una singola chiamata di disegno, che sarà l'ultima chiamata del gruppo. Quindi, cos'è una chiamata di disegno? Per un contesto 2D, si tratta di elementi come clearRect(), drawImage(), fill(), stroke(), putImageData() o qualsiasi funzione di rendering del testo, mentre per WebGL si tratta di clear(), drawArrays() o drawElements(). In sostanza, si tratta di qualsiasi cosa che modifichi i contenuti del buffer di disegno corrente. (Se non ti interessa la grafica, puoi pensare a un buffer come a una bitmap con pixel che stiamo manipolando.)

Ora non devi fare altro che scorrere l'elenco. Puoi farlo a livello di frame, gruppo di chiamate di disegno o chiamata. Indipendentemente dal modo in cui scegli di scorrere l'elenco (e ci sono pulsanti appena sotto lo screenshot che ti aiutano a navigare rapidamente), vedrai il contesto in quel punto, il che significa che puoi trovare e correggere rapidamente i bug man mano che si presentano.

Figura 7 - Pulsanti di navigazione per passare facilmente da un elenco all'altro

Trova le differenze

Un'altra funzionalità utile è la possibilità di vedere quali proprietà e variabili sono cambiate tra due chiamate.

Per visualizzarla, basta fare clic sul pulsante della barra laterale () e verrà visualizzata una nuova visualizzazione. Man mano che esamini le chiamate di disegno, vedrai le proprietà che sono state aggiornate. Se passi il mouse sopra i buffer o gli array, ne verranno visualizzati i contenuti.

Fatti sentire!

Ora sai come eseguire il debug del tuo lavoro con Canvas in DevTools di Chrome. Se hai un feedback sullo strumento Canvas Profiler, segnala un bug o pubblica un post nel gruppo Chrome DevTools. Facci sapere se trovi bug o se c'è qualcos'altro che vorresti vedere quando ispezioni un <canvas>, perché è solo attraverso l'utilizzo e il feedback degli sviluppatori che gli strumenti di Chrome migliorano.