Einführung
Egal, ob Sie einen 2D- oder WebGL-Kontext verwenden, jeder, der schon einmal mit dem <canvas>-Element gearbeitet hat, weiß, dass das Debugging extrem schwierig sein kann. Die Arbeit mit einem Canvas umfasst in der Regel eine lange und schwer nachvollziehbare Liste von Aufrufen:
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
}
Manchmal möchten Sie die an einen Canvas-Kontext gesendeten Anweisungen erfassen und einzeln durchgehen. Glücklicherweise gibt es in den Chrome-Entwicklertools eine neue Funktion zur Canvas-Prüfung, mit der wir genau das tun können.
In diesem Artikel zeige ich Ihnen, wie Sie diese Funktion verwenden, um mit dem Debuggen Ihrer Canvas-Arbeit zu beginnen. Der Inspector unterstützt sowohl 2D- als auch WebGL-Kontexte. Unabhängig davon, welchen Sie verwenden, sollten Sie sofort nützliche Debugging-Informationen erhalten.
Erste Schritte
Rufen Sie zuerst about:flags in Chrome auf und aktivieren Sie Enable Developer Tools experiments (Entwicklertools-Tests aktivieren).
Gehen Sie als Nächstes zu den Entwicklertools und klicken Sie rechts unten auf das Zahnrad 
. Gehen Sie dort zu Experiments (Experimente) und aktivieren Sie Canvas inspection (Canvas-Prüfung):
Damit die Änderungen wirksam werden, müssen Sie die Entwicklertools schließen und wieder öffnen. Alternativ können Sie auch Alt+R oder Option+R verwenden.
Wenn die Entwicklertools wieder geöffnet werden, rufen Sie den Bereich „Profiles“ auf. Dort sehen Sie die neue Option „Canvas Profiler“.
Zuerst werden Sie feststellen, dass der Canvas Profiler deaktiviert ist. Wenn Sie eine Seite mit einem Canvas haben, für den Sie ein Debugging durchführen möchten, klicken Sie einfach auf Aktivieren. Die Seite wird dann neu geladen und ist bereit, die <canvas>-Aufrufe zu erfassen:
Sie müssen entscheiden, ob Sie einen einzelnen Frame oder aufeinanderfolgende Frames erfassen möchten. Ein Frame ist genau das, was Sie in der DevTools-Zeitachse sehen.
Bei Einzelner Frame werden die Aufrufe bis zum Ende des aktuellen Frames erfasst und dann beendet. Mit Aufeinanderfolgende Frames werden dagegen alle Frames aller <canvas>-Elemente erfasst, bis Sie die Erfassung beenden. Welchen Modus Sie auswählen, hängt davon ab, wie Sie das <canvas>-Element verwenden. Bei einer laufenden Animation möchten Sie vielleicht einen einzelnen Frame erfassen. Für eine kurze Animation, die als Reaktion auf ein Nutzerereignis auftritt, müssen Sie möglicherweise aufeinanderfolgende Frames erfassen.
Damit ist alles eingerichtet und wir können mit der Aufnahme beginnen.
Frames werden erfasst
Wenn Sie die Aufzeichnung starten möchten, klicken Sie einfach auf Start und interagieren Sie dann wie gewohnt mit Ihrer Anwendung. Kehren Sie nach einiger Zeit zu den Entwicklertools zurück und drücken Sie Beenden, wenn Sie fortlaufend aufzeichnen.
In der Liste links wird jetzt ein neues Profil angezeigt, einschließlich der Anzahl der erfassten Kontextaufrufe für alle <canvas>-Elemente. Klicken Sie auf das Profil. Es sollte ein Bildschirm wie der folgende angezeigt werden:
Im unteren Bereich sehen Sie eine Liste aller erfassten Frames, die Sie durchgehen können. Wenn Sie auf einen Frame klicken, wird im Screenshot oben der Status des <canvas>-Elements am Ende dieses Frames angezeigt. Wenn Sie mehrere <canvas>-Elemente haben, können Sie über das Menü direkt unter dem Screenshot auswählen, welches angezeigt werden soll.
Im Frame werden Zeichenbefehlgruppen angezeigt. Jede Zeichenbefehlgruppe enthält einen einzelnen Zeichenbefehl, der der letzte Aufruf in der Gruppe ist. Was ist ein Zeichenbefehl? Für einen 2D-Kontext wären das beispielsweise clearRect(), drawImage(), fill(), stroke(), putImageData() oder beliebige Text-Rendering-Funktionen. Für WebGL wären das clear(), drawArrays() oder drawElements(). Im Grunde ist das alles, was den Inhalt des aktuellen Zeichenpuffers ändern würde. (Wenn Sie sich nicht für Grafik interessieren, können Sie sich einen Puffer als Bitmap mit Pixeln vorstellen, die wir bearbeiten.)
Jetzt müssen Sie nur noch die Liste durchgehen. Das ist auf Frame-, Zeichenbefehlgruppen- oder Aufrufebene möglich. Unabhängig davon, wie Sie die Liste durchgehen (unter dem Screenshot finden Sie Schaltflächen, mit denen Sie schnell navigieren können), sehen Sie den Kontext an diesem Punkt. So können Sie Fehler schnell finden und beheben, sobald sie auftreten.
Finde den Unterschied
Eine weitere nützliche Funktion ist die Möglichkeit, zu sehen, welche Properties und Variablen sich zwischen zwei Aufrufen geändert haben.
Klicken Sie dazu einfach auf die Schaltfläche in der Seitenleiste (
). Es wird eine neue Ansicht eingeblendet. Wenn Sie die Zeichenbefehle durchgehen, sehen Sie die aktualisierten Eigenschaften. Wenn Sie den Mauszeiger auf einen Puffer oder ein Array bewegen, wird der Inhalt angezeigt.
Lass dich hören!
Jetzt wissen Sie, wie Sie Ihre Canvas-Arbeit in den Chrome-Entwicklertools debuggen können. Wenn Sie Feedback zum Canvas Profiler-Tool haben, melden Sie bitte einen Fehler oder posten Sie in der Chrome-Entwicklertools-Gruppe. Teilt uns mit, wenn ihr Fehler findet oder wenn ihr euch beim Prüfen eines <canvas>-Elements noch etwas anderes wünscht. Nur durch die Nutzung und das Feedback von Entwicklern können die Tools von Chrome verbessert werden.