Introduction
Que vous utilisiez un contexte 2D ou WebGL, quiconque a déjà travaillé avec l'élément <canvas> sait qu'il peut être extrêmement difficile à déboguer. L'utilisation d'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 peut arriver que vous souhaitiez capturer les instructions envoyées à un contexte de canevas et les parcourir une par une. Heureusement, les outils pour les développeurs Chrome proposent une nouvelle fonctionnalité d'inspection de canevas qui nous permet de faire exactement cela.
Dans cet article, je vais vous montrer comment utiliser cette fonctionnalité pour commencer à déboguer votre travail sur Canvas. L'inspecteur est compatible avec les contextes 2D et WebGL. Quel que soit celui que vous utilisez, vous devriez donc pouvoir obtenir immédiatement des informations de débogage utiles.
Premiers pas
Pour commencer, accédez à about:flags dans Chrome et activez l'option Enable Developer Tools experiments (Activer les tests des outils pour les développeurs).
Ensuite, accédez aux outils de développement et cliquez sur la roue dentée 
en bas à droite. De là, vous pouvez accéder à Experiments (Tests) et activer Canvas inspection (Inspection du canevas) :
Pour que les modifications soient prises en compte, vous devez fermer et rouvrir les outils de développement (vous pouvez utiliser Alt+R ou Option+R, une alternative pratique).
Lorsque les outils de développement se rouvrent, accédez à la section "Profiles" (Profils). Une nouvelle option "Canvas Profiler" (Profileur de canevas) s'affiche.
Pour commencer, vous remarquerez que le profileur Canvas est désactivé. Une fois que vous avez une page contenant un canevas que vous souhaitez déboguer, appuyez simplement sur Activer. La page se recharge, prête à capturer les appels <canvas> :
Vous devez décider si vous souhaitez capturer une seule image ou des images consécutives, où une image est exactement la même que celle que vous verriez dans la chronologie des outils de développement.
Single frame (Frame unique) capture les appels jusqu'à la fin du frame actuel, puis s'arrête. Images consécutives, en revanche, capture toutes les images de tous les éléments <canvas> jusqu'à ce que vous lui demandiez d'arrêter. Le choix du mode dépend de la façon dont vous utilisez l'élément <canvas>. Pour une animation en cours, vous pouvez capturer une seule image. Pour une brève animation qui se produit en réponse à un événement utilisateur, vous devrez peut-être capturer des images consécutives.
Nous sommes maintenant prêts à commencer la capture.
Capturer des frames
Pour capturer, il vous suffit d'appuyer sur Start (Démarrer), puis d'interagir avec votre application comme vous le feriez normalement. Après un certain temps, revenez aux outils de développement et, si vous effectuez une capture consécutive, appuyez sur Stop (Arrêter).
Un nouveau profil s'affiche désormais 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 verrez une liste de toutes les images capturées que vous pouvez parcourir. Lorsque vous cliquez sur chacune d'elles, la capture d'écran en haut vous montre l'état de l'élément <canvas> à la fin de cette image. Si vous avez plusieurs éléments <canvas>, vous pouvez choisir celui qui s'affiche à l'aide du menu situé juste en dessous de la capture d'écran.
Dans le frame, 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 s'agit d'éléments tels que clearRect(), drawImage(), fill(), stroke(), putImageData() ou de toute fonction de rendu de texte. Pour WebGL, il s'agit de clear(), drawArrays() ou drawElements(). Il s'agit essentiellement de tout ce qui modifierait le contenu du tampon de dessin actuel. (Si vous n'êtes pas un spécialiste des graphismes, vous pouvez considérer un tampon comme un bitmap avec des pixels que nous manipulons.)
Il ne vous reste plus qu'à parcourir la liste. Vous pouvez le faire au niveau de l'image, du groupe d'appels de dessin ou de l'appel. Quelle que soit la façon dont vous choisissez de parcourir la liste (des boutons situés juste en dessous de la capture d'écran vous permettent de naviguer rapidement), vous verrez le contexte à ce moment-là, ce qui signifie que vous pourrez rapidement trouver et corriger les bugs au fur et à mesure qu'ils apparaissent.
Trouvez la différence
Une autre fonctionnalité utile est la possibilité de voir quelles propriétés et variables ont changé entre deux appels.
Pour l'afficher, il vous suffit de cliquer sur le bouton de la barre latérale (
). Une nouvelle vue s'affiche alors. À mesure que vous parcourez les appels de dessin, vous verrez les propriétés qui ont été mises à jour. Le contenu des tampons ou des tableaux s'affiche lorsque vous pointez dessus.
Faites-vous entendre !
Vous savez désormais comment déboguer votre travail sur un canevas dans les outils pour les développeurs Chrome. Si vous avez des commentaires sur l'outil Canvas Profiler, n'hésitez pas à signaler un bug ou à publier un message dans le groupe Outils pour les développeurs Chrome. N'hésitez pas à nous signaler les bugs que vous rencontrez ou à nous faire part de vos suggestions pour l'inspection d'un <canvas>. C'est grâce à l'utilisation et aux commentaires des développeurs que les outils Chrome s'améliorent.