Introduction
Que vous utilisiez un contexte 2D ou WebGL, toute personne ayant déjà travaillé avec l'élément <canvas> sait qu'il peut être extrêmement difficile à déboguer. Travailler avec un canevas implique généralement une liste d'appels longue et difficile à suivre:
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
}
Il arrive que vous souhaitiez capturer les instructions envoyées à un contexte de canevas et les examiner une par une. Heureusement, une nouvelle fonctionnalité d'inspection du canevas est disponible dans les outils pour les développeurs de Chrome.
Dans cet article, je vais vous montrer comment utiliser cette fonctionnalité pour commencer à déboguer votre travail sur le canevas. L'inspecteur est compatible avec les contextes 2D et WebGL. Par conséquent, quel que soit le contexte que vous utilisez, vous devriez pouvoir obtenir immédiatement des informations de débogage utiles.
Premiers pas
Pour commencer, accédez à about:flags dans Chrome et activez l'option Activer les tests des outils pour les développeurs.
Accédez ensuite à DevTools et cliquez sur la roue dentée 
en bas à droite. Vous pouvez ensuite accéder à Tests et activer l'inspection du canevas:
Pour que les modifications prennent effet, vous devez fermer et rouvrir les outils de développement (vous pouvez utiliser Alt+R ou Option+R, une alternative pratique).
Lorsque DevTools se rouvre, accédez à la section "Profiles" (Profils) et vous verrez une nouvelle option "Canvas Profiler" (Profileur de canevas).
Vous remarquerez d'abord que le Profiler Canvas est désactivé. Une fois que l'une de vos pages contient un canevas que vous souhaitez déboguer, appuyez simplement sur Enable (Activer). La page s'actualise et la page est prête à capturer les appels <canvas>:
Vous devez décider si vous souhaitez capturer une seule image, ou des images consécutives, lorsqu'une image est exactement la même que celle affichée dans la timeline des outils de développement.
Single frame (Cadre unique) capture les appels jusqu'à la fin du frame actuel, puis s'arrête. En revanche, Cadres consécutifs capture tous les cadres de tous les éléments <canvas> jusqu'à ce que vous lui indiquiez d'arrêter. Le mode que vous choisissez dépend de la façon dont vous utilisez l'élément <canvas>. Pour une animation en cours, vous pouvez capturer un seul frame. Pour une brève animation qui se produit en réponse à un événement utilisateur, vous devrez peut-être capturer des images consécutives.
Vous êtes maintenant prêt à commencer à enregistrer des vidéos.
Capturer des images
Pour effectuer une capture, appuyez simplement sur Démarrer, puis interagissez avec votre application comme vous le feriez normalement. Après un certain temps, revenez dans les outils de développement et, si vous enregistrez des vidéos de manière consécutive, appuyez sur Stop (Arrêter).
Un nouveau profil s'affiche maintenant dans la liste de gauche, avec le nombre d'appels de contexte capturés pour tous les éléments <canvas>. Cliquez sur le profil. Un écran semblable à celui-ci s'affiche:
Dans le volet inférieur, vous trouverez la liste de tous les frames capturés que vous pouvez parcourir. Lorsque vous cliquez sur chacun d'eux, la capture d'écran en haut de l'écran affiche l'état de l'élément <canvas> à la fin de ce frame. Si vous disposez de plusieurs éléments <canvas>, vous pouvez choisir celui à afficher à l'aide du menu situé juste en dessous de la capture d'écran.
Dans le cadre, vous verrez des groupes d'appels de dessin. Chaque groupe d'appels de dessin contient un seul appel de dessin, qui sera le dernier appel du groupe. Qu'est-ce qu'un appel de dessin ? Pour un contexte 2D, il peut s'agir de clearRect(), drawImage(), fill(), stroke(), putImageData() ou de toute fonction de rendu de texte, et pour WebGL, il peut s'agir de clear(), drawArrays() ou drawElements(). Il s'agit essentiellement de tout élément qui modifierait le contenu du tampon de dessin actuel. (Si vous n'êtes pas un expert en graphisme, vous pouvez considérer un tampon comme un bitmap avec des pixels que nous manipulons.)
Il ne vous reste plus qu'à suivre la liste. Vous pouvez le faire au niveau du frame, du groupe d'appels ou de l'appel. Quelle que soit la méthode choisie pour parcourir la liste (et des boutons se trouvent juste en dessous de la capture d'écran pour vous aider à naviguer rapidement), vous verrez le contexte à ce stade, ce qui vous permettra d'identifier et de corriger rapidement les bugs au fur et à mesure qu'ils surviennent.
Trouvez les différences
Une autre fonctionnalité utile est la possibilité de voir quelles propriétés et variables ont changé entre deux appels.
Pour le voir, il vous suffit de cliquer sur le bouton de la barre latérale (
). Une nouvelle vue s'affiche alors. Au fur et à mesure de l'exécution des appels de dessin, vous verrez les propriétés qui ont été mises à jour. Le contenu des tampons ou des tableaux s'affiche si vous pointez dessus.
Faites-vous entendre !
Vous savez maintenant comment déboguer votre travail sur le canevas dans les outils pour les développeurs de Chrome. Si vous avez des commentaires sur l'outil Canvas Profiler, signalez un bug ou publiez un message sur le groupe des outils pour les développeurs Chrome. N'hésitez pas à nous contacter si vous détectez des bugs ou si vous souhaitez nous faire part d'autres questions lors de l'inspection d'une <canvas>. En effet, les outils de Chrome ne sont améliorés que grâce à l'utilisation et aux commentaires des développeurs.