Introduction
Peu importe 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. 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
}
Parfois, vous avez besoin de capturer les instructions envoyées au contexte de canevas et de les parcourir une par une. Heureusement, les outils de développement Chrome disposent d'une nouvelle fonctionnalité d'inspection de canevas qui nous permet de le faire.
Dans cet article, je vais vous montrer comment utiliser cette fonctionnalité pour commencer à déboguer le canevas. L'outil d'inspection est compatible avec les contextes 2D et WebGL. Quel que soit celui que vous utilisez, vous devriez pouvoir obtenir immédiatement des informations de débogage utiles.
Getting Started
Pour commencer, accédez à about:flags dans Chrome, puis activez l'option Activer les expériences liées aux outils de développement
Accédez ensuite aux outils de développement et cliquez sur l'icône en forme de roue dentée 
en bas à droite. Accédez ensuite à Tests et activez l'Inspection du canevas:
Pour que les modifications soient prises en compte, vous devez fermer, puis rouvrir les outils de développement (vous pouvez utiliser Alt+R ou Option+R, une alternative pratique).
Lorsque les outils de développement s'ouvrent à nouveau, accédez à la section "Profiles" pour afficher une nouvelle option Canvas Profiler.
Vous remarquerez d'abord que Canvas Profiler est désactivé. Une fois que votre page contient un canevas à déboguer, appuyez simplement sur Enable (Activer) pour actualiser la page afin de capturer les appels <canvas>:
Vous devez déterminer si vous souhaitez capturer une seule image ou des images consécutives, où chaque image est identique à celle que vous voyez dans la timeline des outils de développement.
Frame unique capture les appels jusqu'à la fin de l'image actuelle, puis s'arrête. En revanche, les images consécutives capturent toutes les images de tous les éléments <canvas> jusqu'à ce que vous lui demandiez de s'arrêter. Le mode que vous choisissez dépend de la manière 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.
Vous pouvez maintenant commencer à filmer.
Capture d'images
Pour cela, 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 dans les outils de développement et, si vous enregistrez plusieurs images de manière consécutive, appuyez sur Arrêter.
Vous disposez désormais d'un nouveau profil 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 ressemblant à ceci s'affiche:
Le volet inférieur affiche la liste de tous les frames capturés que vous pouvez parcourir. Lorsque vous cliquez sur chacun d'eux, la capture d'écran du haut affiche l'état de l'élément <canvas> à la fin de ce frame. Si vous avez 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 dessinés. Chaque groupe d'appels de dessin contient un seul appel de dessin, qui sera le dernier appel du groupe. Alors, qu'est-ce qu'un appel de dessin ? Pour un contexte 2D, ce serait clearRect(), drawImage(), fill(), stroke(), putImageData() ou toute fonction de rendu de texte, et pour WebGL, il s'agirait de clear(), drawArrays() ou drawElements(). Il s'agit essentiellement de toute modification susceptible de modifier le contenu du tampon de dessin actuel. (Si vous n'aimez pas les graphiques, 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 du cadre, de l'affichage d'un groupe d'appels ou d'un appel. Quelle que soit la méthode choisie pour parcourir la liste (et des boutons situés juste en dessous de la capture d'écran vous permettent d'y accéder rapidement), vous verrez le contexte à ce stade, ce qui vous permettra de trouver et de corriger rapidement les bugs à mesure qu'ils apparaissent.
Trouvez la différence
Une autre fonctionnalité utile vous permet d'identifier les propriétés et les variables qui ont changé entre deux appels.
Cliquez simplement sur le bouton de la barre latérale (
) pour ouvrir une nouvelle vue. À mesure que vous parcourez les appels de dessin, vous pouvez voir les propriétés qui ont été mises à jour. Si vous pointez dessus, les tampons ou les tableaux affichent leur contenu.
Faites-vous entendre !
Vous savez désormais comment déboguer votre canevas dans les outils pour les développeurs Chrome. Si vous avez des commentaires sur l'outil Canvas Profiler, veuillez signaler un bug ou publier un message sur le groupe des outils pour les développeurs Chrome. N'hésitez pas à nous contacter si vous rencontrez des bugs ou si vous souhaitez nous signaler d'autres problèmes lors de l'inspection d'un <canvas>. En effet, seule l'utilisation des développeurs et les commentaires nous permettent d'améliorer les outils Chrome.