Canvas-Inspektion mit den Chrome-Entwicklertools

Paul Lewis

Einleitung

Es spielt keine Rolle, ob du einen 2D- oder WebGL-Kontext verwendest: Alle, die schon einmal mit dem <canvas>-Element gearbeitet haben, wissen, dass die Fehlerbehebung extrem schwierig sein kann. Bei der Arbeit mit einem Canvas ist in der Regel eine lange und schwer nachvollziehbare Liste von Aufrufen erforderlich:

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 eine Anleitung, die an einen Canvas-Kontext gesendet wurde, erfassen und Schritt für Schritt durchgehen. Glücklicherweise gibt es in den Entwicklertools von Chrome eine neue Canvas-Inspektion, mit der genau das möglich ist.

In diesem Artikel zeige ich Ihnen, wie Sie mit dieser Funktion Fehler in Canvas-Arbeiten beheben können. Der Inspector unterstützt sowohl 2D- als auch WebGL-Kontexte. Egal, welchen Kontext Sie verwenden, Sie sollten sofort nützliche Informationen zur Fehlerbehebung erhalten.

Erste Schritte

Um loszulegen, rufe in Chrome about:flags auf und aktiviere die Option "Entwickler-Tools-Experimente aktivieren".

Abbildung 1 – Tests der Entwicklertools in about:flags aktivieren

Rufen Sie als Nächstes die Entwicklertools auf und klicken Sie auf das Zahnradsymbol unten rechts. Klicken Sie dort auf Tests und aktivieren Sie die Canvas-Prüfung:

Abbildung 2 – Canvas-Prüfung in den Experimenten der Entwicklertools aktivieren

Damit die Änderungen wirksam werden, musst du die Entwicklertools schließen und wieder öffnen. Als praktische Alternative kannst du Alt+R oder Option+R verwenden.

Wenn die Entwicklertools wieder geöffnet werden, rufen Sie den Bereich „Profile“ auf. Dort finden Sie eine neue Canvas Profiler-Option.

Zunächst werden Sie feststellen, dass der Canvas Profiler deaktiviert ist. Wenn Sie eine Seite haben, die einen Canvas enthält, den Sie debuggen möchten, klicken Sie einfach auf Aktivieren. Die Seite wird neu geladen und kann die <canvas>-Aufrufe erfassen:

Abbildung 3 – Canvas Profiler aktivieren

Du musst entscheiden, ob du einen einzelnen Frame oder aufeinanderfolgende Frames erfassen möchtest, wobei ein Frame genau mit dem in der Zeitachse der Entwicklertools identisch ist.

Wichtiger Begriff : Ein Frame steht für einen einzelnen Durchlauf der Ereignisschleife Ihrer Seite. Dazu gehört die Ausführung von JavaScript, die Verarbeitung von Ereignissen, die Aktualisierung des DOM, die Stiländerungen, die Durchführung von Layout, die Malerei und die Zusammensetzung der Seite. Für eine flüssige Animation sollte jeder Frame weniger als 1/60stel einer Sekunde oder 16,6 ms dauern.

.

Mit Single Frame werden die Aufrufe bis zum Ende des aktuellen Frames erfasst und dann beendet. Bei Aufeinanderfolgende Frames werden dagegen alle Frames aller <canvas>-Elemente erfasst, bis Sie das Video anhalten. Welchen Modus Sie wählen, hängt davon ab, wie Sie das <canvas>-Element verwenden. Bei einer fortlaufenden Animation kann es sinnvoll sein, einen einzelnen Frame zu erfassen. Bei einer kurzen Animation, die als Reaktion auf ein Nutzerereignis stattfindet, müssen Sie unter Umständen aufeinanderfolgende Frames erfassen.

Abbildung 4 – Anzahl der zu erfassenden Frames auswählen

Damit sind wir fertig und können mit der Aufnahme beginnen.

Frames erfassen

Drücken Sie zum Aufnehmen einfach auf Start und interagieren Sie dann wie gewohnt mit Ihrer App. Kehre nach einiger Zeit zu den Entwicklertools zurück. Wenn du mehrere aufeinanderfolgende Aufnahmen machst, tippe auf Beenden.

Die Liste auf der linken Seite enthält jetzt ein nagelneues Profil mit der Anzahl der erfassten Kontextaufrufe für alle <canvas>-Elemente. Klicken Sie auf das Profil. Es wird ein Bildschirm angezeigt, der in etwa so aussieht:

Abbildung 5 – Ein Canvas-Profil in den Entwicklertools

Im unteren Bereich sehen Sie eine Liste aller aufgenommenen Frames, die Sie durchlaufen können. Wenn Sie auf einen Frame klicken, wird im Screenshot oben der Status des <canvas>-Elements am Ende des Frames angezeigt. Wenn du mehrere <canvas>-Elemente hast, kannst du im Menü direkt unter dem Screenshot auswählen, welches angezeigt werden soll.

Abbildung 6 – Canvas-Kontext auswählen

Innerhalb des Rahmens sehen Sie Anrufgruppen. Jede Aufrufgruppe enthält einen einzelnen Zeichenaufruf. Dieser ist der letzte Aufruf in der Gruppe. Was ist also ein „Drehen“-Aufruf? Für einen 2D-Kontext wie z. B. clearRect(), drawImage(), fill(), stroke(), putImageData() oder andere Text-Rendering-Funktionen. Für WebGL wäre das clear(), drawArrays() oder drawElements(). Es handelt sich im Grunde alles, das den Inhalt des aktuellen Zeichenpuffers ändern würde. Wenn Sie sich nicht für Grafiken interessieren, können Sie sich einen Puffer als Bitmap mit Pixeln vorstellen, die wir bearbeiten.

Jetzt müssen Sie nur noch die Liste durchgehen. Sie können dies auf Frame-Ebene tun, Anrufgruppen- oder Anrufebene zeichnen. Unabhängig davon, wie Sie die Liste durchgehen (und es befinden sich direkt unter dem Screenshot Schaltflächen für die schnelle Navigation), wird Ihnen der Kontext angezeigt. So können Sie Fehler schnell finden und beheben.

Abbildung 7 – Navigationsschaltflächen für das bequeme Wechseln zwischen Listen

Den Unterschied erkennen

Eine weitere nützliche Funktion ist die Möglichkeit zu sehen, welche Eigenschaften und Variablen sich zwischen zwei Aufrufen geändert haben.

Mit einem einfachen Klick auf die Seitenleisten-Schaltfläche () wird eine neue Ansicht geöffnet. Wenn Sie die Zeichenaufrufe nacheinander ausführen, sehen Sie die Eigenschaften, die aktualisiert wurden. Der Inhalt von Puffern oder Arrays wird angezeigt, wenn Sie den Mauszeiger darauf bewegen.

Gehört zu dir!

Jetzt wissen Sie, wie Sie mit den Entwicklertools von Chrome Fehler in Canvas-Arbeiten beheben. Wenn Sie Feedback zum Canvas Profiler-Tool haben, melden Sie einen Fehler oder posten Sie einen Beitrag in der Gruppe für Chrome-Entwicklertools. Bitte melde dich bei uns, wenn du Fehler findest oder dir bei der Prüfung eines <canvas> weitere Informationen wünschst. Denn dies ist wirklich nur durch Entwickler und durch Feedback möglich, dass die Tools von Chrome besser werden.