Introdução
Não importa se você está usando um contexto 2D ou WebGL, qualquer pessoa que já trabalhou com o elemento <canvas> sabe que ele pode ser extremamente difícil de depurar. Trabalhar com telas geralmente envolve uma lista de chamadas longa e difícil de seguir:
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
}
Às vezes, você quer capturar as instruções enviadas a um contexto de tela e analisá-las uma a uma. Felizmente, existe um novo recurso de inspeção de tela no DevTools do Chrome que permite fazer exatamente isso.
Neste artigo, mostrarei como usar esse recurso para começar a depurar o trabalho da tela. O inspetor oferece suporte a contextos 2D e WebGL. Por isso, independentemente de qual deles você estiver usando, será possível receber informações de depuração úteis imediatamente.
Vamos começar
Para começar, acesse about:flags no Chrome e selecione Ativar experimentos das Ferramentas para desenvolvedores.
Em seguida, acesse o DevTools e clique na engrenagem 
no canto inferior direito. Nela, acesse Experimentos e ative a Inspeção de tela:
Para que as mudanças entrem em vigor, feche e reabra o DevTools (você pode usar Alt+R ou Option+R, uma alternativa útil).
Quando o DevTools reabrir, acesse a seção "Profiles" para ver uma nova opção do Canvas Profiler.
Para começar, você vai notar que o Canvas Profiler está desativado. Quando você tiver uma página com uma tela que quer depurar, pressione Ativar. Ela será atualizada e ficará pronta para capturar as chamadas de <canvas>:
Decida se quer capturar um frame único ou consecutivos, em que um frame é exatamente o mesmo que você veria na Linha do tempo do DevTools.
O frame único captura as chamadas até o fim do frame atual e, em seguida, é interrompido. Frames consecutivos, por outro lado, capturam todos os frames de todos os elementos <canvas> até que você peça para parar. O modo escolhido depende de como você está usando o elemento <canvas>. Para uma animação em andamento, é recomendável capturar um único frame. Para uma animação breve que ocorre em resposta a um evento do usuário, você pode precisar capturar frames consecutivos.
Com isso, está tudo pronto para começar a capturar!
Como capturar frames
Para fazer uma captura, pressione Start e interaja com o aplicativo normalmente. Depois de algum tempo, volte para o DevTools e, se estiver capturando em sequência, pressione Stop.
Agora você tem um perfil novo na lista à esquerda, com o número de chamadas de contexto capturadas em todos os elementos <canvas>. Clique no perfil para abrir uma tela parecida com esta:
No painel inferior, há uma lista de todos os frames capturados que podem ser percorridos e, à medida que você clica em cada um, a captura de tela na parte de cima mostra o estado do elemento <canvas> ao final do frame. Se você tiver vários elementos <canvas>, poderá escolher qual deles será exibido usando o menu logo abaixo da captura de tela.
Os grupos de chamadas de desenho vão aparecer no frame. Cada grupo de chamadas de desenho contém uma única chamada de desenho, que será a última no grupo. Então, o que é uma chamada de desenho? Para um contexto 2D que seria algo como clearRect(), drawImage(), fill(), stroke(), putImageData() ou qualquer função de renderização de texto, e para WebGL, seria clear(), drawArrays() ou drawElements(). É essencialmente qualquer coisa que mude o conteúdo do buffer de desenho atual. Se você não gosta de gráficos, pode pensar em um buffer como um bitmap com pixels que estamos manipulando.
Agora, basta percorrer a lista. Você pode fazer isso no frame, desenhar o grupo de chamadas ou o nível da chamada. Seja qual for a maneira escolhida para percorrer a lista (e há botões logo abaixo da captura de tela que ajudam você a navegar rapidamente), você verá o contexto nesse ponto, o que significa que você pode rapidamente encontrar e corrigir bugs à medida que eles aparecem.
Identifique a diferença
Outro recurso útil é a capacidade de verificar quais propriedades e variáveis foram alteradas entre duas chamadas.
Para verificar isso, basta clicar no botão da barra lateral (
). Uma nova visualização vai aparecer. Ao percorrer as chamadas de desenho, você verá as propriedades que foram atualizadas. Os buffers ou matrizes exibirão o conteúdo se você passar o cursor sobre eles.
Seja ouvido!
Agora você sabe como depurar seu trabalho de tela no DevTools do Chrome. Se você tiver feedback sobre a ferramenta Canvas Profiler, registre um bug ou poste no Grupo do Chrome DevTools. Avise nossa equipe se você encontrar algum bug ou se quiser ver mais alguma coisa ao inspecionar um <canvas>. A melhoria das ferramentas do Chrome só acontece com o uso do desenvolvedor e o feedback.