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 pode ser extremamente difícil depurar. Trabalhar com uma tela geralmente envolve uma lista longa e difícil de seguir de chamadas:
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 para um contexto da tela e seguir uma por uma. Felizmente, há um novo recurso de inspeção de tela no Chrome DevTools que permite fazer exatamente isso.
Neste artigo, vou mostrar como usar esse recurso para começar a depurar seu trabalho na tela. O inspetor oferece suporte a contextos 2D e WebGL. Portanto, não importa qual você está usando, você pode receber informações de depuração úteis imediatamente.
Primeiros passos
Para começar, acesse about:flags no Chrome e ative a opção "Ativar experimentos das Ferramentas para desenvolvedores".
Em seguida, acesse DevTools e clique na engrenagem 
no canto inferior direito. A partir daí, você pode acessar Experimentos e ativar a Inspeção de tela:
Para que as mudanças entrem em vigor, feche e abra novamente o DevTools. Você pode usar Alt+R ou Option+R, uma alternativa prática.
Quando o DevTools for aberto novamente, acesse a seção “Profiles” para ver uma nova opção do Canvas Profiler.
Para começar, o Canvas Profiler está desativado. Quando você tiver uma página com uma tela que quer depurar, pressione Enable. A página será atualizada, pronta para capturar as chamadas <canvas>:
Você precisa decidir se quer capturar um único frame ou frames consecutivos, em que um frame é exatamente igual ao que você encontraria na linha do tempo dos DevTools.
Frame único captura as chamadas até o final do frame atual e é interrompida. Os frames consecutivos, por outro lado, capturam todos os frames de todos os elementos <canvas> até que você peça para interrompê-lo. O modo escolhido depende de como você usa o elemento <canvas>. Para uma animação em andamento, convém capturar um único frame. Para uma animação breve que ocorre em resposta a um evento do usuário, talvez seja necessário capturar frames consecutivos.
Pronto, tudo está configurado e você já pode começar a capturar.
Como capturar frames
Para fazer a captura, basta pressionar Start e interagir 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 e você verá uma tela parecida com esta:
No painel inferior, você vai encontrar uma lista de todos os frames capturados que podem ser visualizados. Ao clicar em cada um deles, a captura de tela na parte de cima vai mostrar o estado do elemento <canvas> no final do frame. Se você tiver vários elementos <canvas>, poderá escolher qual deles será mostrado usando o menu logo abaixo da captura de tela.
Dentro do frame, você vai encontrar grupos de chamadas de desenho. Cada grupo de chamadas de desenho contém uma única chamada de desenho, que será a última chamada no grupo. O que é uma chamada de empate? Para um contexto 2D, seriam coisas como clearRect(), drawImage(), fill(), stroke(), putImageData() ou qualquer função de renderização de texto. Para o WebGL, seria clear(), drawArrays() ou drawElements(). É basicamente qualquer coisa que possa mudar o conteúdo do buffer de desenho atual. Se você não gosta de gráficos, pense em um buffer como um bitmap com pixels que estamos manipulando.
Agora você só precisa percorrer a lista. Você pode fazer isso no nível do frame, do grupo de chamadas de desenho ou da chamada. Seja qual for a forma que você escolher para percorrer a lista (e há botões logo abaixo da captura de tela que ajudam a navegar rapidamente), você vai encontrar o contexto naquele ponto, o que significa que você pode encontrar e corrigir rapidamente os bugs à medida que eles aparecem.
Encontre a diferença
Outro recurso útil é a capacidade de ver quais propriedades e variáveis foram alteradas entre duas chamadas.
Clique no botão da barra lateral (
) para abrir uma nova visualização. Ao passar pelas chamadas de exibição, você vai notar as propriedades que foram atualizadas. Os buffers ou matrizes vão mostrar o conteúdo quando 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, envie um bug ou faça uma publicação no grupo do Chrome DevTools. Informe se você encontrar bugs ou se há algo mais que gostaria de ver ao inspecionar um <canvas>, porque as ferramentas do Chrome só melhoram com o uso e o feedback dos desenvolvedores.