Diese Seite wurde von der Cloud Translation API übersetzt.

Revolutionen bei den Chrome-Entwicklertools 2013

Arthur Evans

Tim Statler

Einführung

Mit der zunehmenden Komplexität und Funktionalität von Webanwendungen haben sich auch die Chrome-Entwicklertools weiterentwickelt. In dieser Zusammenfassung des Vortrags Chrome DevTools Revolutions 2013 von Paul Irish auf der Google I/O 2013 erhalten Sie einen Überblick über die neuesten Funktionen, die die Entwicklung und Prüfung von Webanwendungen revolutionieren.

Falls Sie Pauls Vortrag verpasst haben, können Sie ihn sich oben ansehen. Sie können auch direkt zur Zusammenfassung der neuen Funktionen springen:

In Workspaces können Sie DevTools als Quellcode-Editor verwenden.
Wenn Sie Sass verwenden, werden Sie die Möglichkeit lieben, Sass-Dateien (.scss) in DevTools in Echtzeit zu bearbeiten und die Änderungen sofort auf der Seite zu sehen.
Die Remote-Fehlerbehebung von Seiten in Chrome für Android ist schon seit einiger Zeit möglich. Mit der ADB-Erweiterung ist die Verbindung zu Android-Geräten jedoch einfacher. Mit der umgekehrten Portweiterleitung können Sie ganz einfach von Ihrem Gerät aus eine Verbindung zum Localhost auf Ihrem Entwicklungscomputer herstellen.
Die Leistung ist bei Webanwendungen immer ein wichtiges Thema. DevTools bietet eine Reihe neuer Funktionen, mit denen Sie Engpässe finden können, darunter die neue Flammendiagramm-Visualisierung für das CPU-Profiling und mehrere neue Tools zum Beheben von Leistungsproblemen im Zusammenhang mit Rendering und Speichernutzung.

Diese Funktionen sind in Chrome 28 verfügbar, das jetzt über den stabilen Update-Kanal installiert werden kann.

Arbeitsbereiche

In Arbeitsbereichen können Sie Ressourcen, die von einem lokalen Webserver bereitgestellt werden, Dateien auf dem Laufwerk zuordnen. So können Sie im Bereich „Quellen“ jede Art von Quelldatei bearbeiten und die Änderungen auf dem Laufwerk speichern. Änderungen, die Sie in Ihrem externen Editor vornehmen, werden ebenfalls sofort im Bereich „Quellen“ angezeigt.

Der folgende Screenshot zeigt ein Beispiel für Workspaces in der Praxis. Die Kalenderwebsite wurde über localhost geladen, während im Bereich „Quellen“ die Ansicht des lokalen Dateisystems des Stammordners der Website angezeigt wird. Änderungen an den Dateien in diesem Ordner werden auf dem Laufwerk gespeichert. Im folgenden Screenshot wurden einige nicht gespeicherte Änderungen an „Calendar.css“ vorgenommen. Daher ist neben dem Dateinamen ein Sternchen zu sehen.

Durch Drücken von Control+S oder Command+S werden die Änderungen auf dem Laufwerk gespeichert.

Änderungen, die Sie im Bereich „Elemente“ an den Stilen eines Elements vornehmen, werden sowohl im Bereich „Quellen“ als auch in Ihrem externen Editor übernommen. Hinweis:

DOM-Änderungen im Bereich „Elemente“ werden nicht gespeichert. Nur Stiländerungen im Bereich „Elemente“ werden gespeichert.
Nur Stile, die in einer externen CSS-Datei definiert sind, können geändert werden. Änderungen an „element.style“ oder an Inline-Stilen werden nicht auf dem Laufwerk gespeichert. Inline-Stile können im Bereich „Quellen“ geändert werden.
Stiländerungen im Bereich „Elemente“ werden sofort gespeichert. Sie müssen nicht auf Control+S oder Command+S drücken.

Arbeitsbereichsordner hinzufügen

Die Verwendung von Arbeitsbereichen besteht aus zwei Schritten: Sie müssen den Inhalt eines lokalen Ordners für DevTools verfügbar machen und diesen Ordner einer URL zuordnen.

So fügen Sie einen neuen Arbeitsbereichsordner hinzu:

Klicken Sie in den Entwicklertools auf Einstellungen , um die Einstellungen der Entwicklertools zu öffnen.
Klicken Sie auf Arbeitsbereich.
Klicken Sie auf Ordner hinzufügen.
Rufen Sie den Ordner auf, der die Quelldateien Ihres Projekts enthält, und klicken Sie auf Auswählen.
Klicken Sie auf Zulassen, um den Entwicklertools vollen Zugriff auf den Ordner zu gewähren.

Im Bereich „Quellen“ wird der neue Arbeitsbereichsordner zusammen mit den über localhost geladenen Quellen angezeigt. Sie können Dateien jetzt direkt in Ihrem Arbeitsbereichsordner bearbeiten. Diese Änderungen werden auf dem Laufwerk gespeichert.

Im Bereich „Quellen“ werden sowohl localhost-Ressourcen als auch Arbeitsbereichsdateien angezeigt.

Ordner einer URL zuordnen

Nachdem Sie einen Arbeitsbereichsordner hinzugefügt haben, können Sie ihn einer URL zuordnen. Wenn Chrome die angegebene URL lädt, wird im Bereich „Quellen“ der Inhalt des Arbeitsordners anstelle des Inhalts des Netzwerkordners angezeigt.

So ordnen Sie einen Arbeitsbereichsordner einer URL zu:

Klicken Sie im Bereich „Quellen“ mit der rechten Maustaste oder Strg + Maustaste auf eine Datei in einem Arbeitsbereichsordner.
Wählen Sie Netzwerkressource zuordnen aus.
Wählen Sie auf der aktuell geladenen Seite die entsprechende Netzwerkressource aus.
Laden Sie die Seite in Chrome neu.

Im Bereich „Quellen“ sollte jetzt nur der Inhalt des lokalen Arbeitsbereichsordners Ihrer Website angezeigt werden, nicht die localhost-Quellen, wie unten dargestellt.

Es gibt noch zwei weitere Möglichkeiten, einen Netzwerkordner mit einem Arbeitsbereichsordner zu verknüpfen:

Klicken Sie mit der rechten Maustaste oder mit der Strg-Taste und der Maustaste auf eine Netzwerkressource und wählen Sie Zu Dateisystemressource zuordnen aus.
Sie können Zuordnungen manuell im Dialogfeld „DevTools-Einstellungen“ auf dem Tab „Arbeitsbereich“ hinzufügen.

Sass-/CSS-Quellzuordnung – Fehlerbehebung

Beim Sass-Debugging (CSS-Quellkarte) können Sie Sass-Dateien (.scss) im Bereich „Quellen“ live bearbeiten und die Ergebnisse ansehen, ohne die DevTools verlassen oder die Seite aktualisieren zu müssen. Wenn Sie ein Element untersuchen, dessen Stile aus einer mit Sass generierten CSS-Datei stammen, wird im Bereich „Elemente“ ein Link zur .scss-Datei angezeigt, nicht zur generierten .css-Datei.

Wenn Sie auf den Link klicken, wird die bearbeitbare SCSS-Datei im Bereich „Quellen“ geöffnet. Sie können an dieser Datei beliebige Änderungen vornehmen.

Wenn Sie Änderungen an einer SCSS-Datei speichern (in den DevTools oder anderswo), generiert der Sass-Compiler die CSS-Dateien neu. Anschließend wird die neu generierte CSS-Datei in den DevTools neu geladen.

Sass-Debugging verwenden

Wenn Sie Sass-Debugging in Chrome verwenden möchten, benötigen Sie die Pre-Release-Version des Sass-Compilers. Dies ist die einzige Version, die derzeit die Generierung von Quellkarten unterstützt.

gem install sass -v '>=3.3.0alpha' --pre

Außerdem müssen Sie die Sass-Debugging-Funktion in DevTools-Tests aktivieren:

Öffnen Sie in Chrome about:flags.
Aktivieren Sie Entwicklertools-Tests aktivieren.
Starten Sie Chrome neu.
Öffnen Sie die Einstellungen der Entwicklertools und klicken Sie auf Tests.
Aktivieren Sie die Option Unterstützung für Sass (oder Sass-Stylesheet-Debugging, je nach verwendeter Browserversion).

Nachdem Sass installiert ist, starten Sie den Sass-Compiler, um Änderungen an Ihren Sass-Quelldateien zu überwachen und für jede generierte CSS-Datei Quellkartendateien zu erstellen, z. B.:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Wenn Sie Compass verwenden, beachten Sie, dass Compass die Pre-Release-Version von Sass noch nicht unterstützt. Sie können das Sass-Debugging also nicht mit Compass verwenden.

Funktionsweise

Für jede verarbeitete SCSS-Quelldatei generiert der Sass-Compiler zusätzlich zum kompilierten CSS eine Quellmap (.map-Datei). Die Quellmap-Datei ist eine JSON-Datei, die die Zuordnungen zwischen der .scss-Datei und den .css-Dateien definiert. Jede CSS-Datei enthält eine Anmerkung, die die URL der zugehörigen Quellkartendatei angibt. Diese Anmerkung ist in einen speziellen Kommentar eingebettet:

/*# sourceMappingURL=<url>; */

Angenommen, Sie haben die folgende SCSS-Datei:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass generiert eine CSS-Datei wie diese mit der Anmerkung „sourceMappingURL“:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Unten sehen Sie eine Beispieldatei für eine Quellkarte:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Einfacheres Remote-Debugging in Chrome für Android

Mit einigen neuen Funktionen in den DevTools lässt sich das Remote-Debugging in Chrome für Android jetzt einfacher einrichten: die ADB-Erweiterung und die umgekehrte Portweiterleitung.

Die ADB-Chrome-Erweiterung vereinfacht die Einrichtung der Remote-Fehlerbehebung. Sie bietet folgende Vorteile:

Enthält die Android Debug Bridge (ADB), sodass Sie sie nicht installieren müssen.
Es ist keine Interaktion über die Befehlszeile erforderlich.
Benutzeroberfläche zum einfachen Starten und Beenden des ADB-Daemons und zum Ansehen verbundener Geräte.

Mit der umgekehrten Portweiterleitung können Sie Chrome auf Android-Geräten ganz einfach mit einem Webserver verbinden, der auf Ihrem Localhost ausgeführt wird. In einigen Netzwerkumgebungen ist dies ohne einige DNS-Tricks schwierig.

ADB-Erweiterung verwenden

Installieren Sie zuerst die ADB Chrome-Erweiterung aus dem Chrome Web Store. Klicken Sie auf Zu Chrome hinzufügen, um die Erweiterung zu installieren.

Nach der Installation wird in Chrome ein graues Android-Menüsymbol angezeigt. Klicken Sie zum Starten von ADB auf das Symbol und dann auf ADB starten.

Sobald ADB gestartet ist, wird das Menüsymbol grün und die Anzahl der derzeit verbundenen Geräte wird angezeigt, falls vorhanden.

Menü der ADB-Erweiterung mit verbundenen Geräten

Klicken Sie auf Geräte ansehen, um die Seite about:inspect zu öffnen. Dort werden alle verbundenen Geräte und ihre Tabs angezeigt. Wenn Sie einen Tab in den DevTools prüfen möchten, klicken Sie neben der URL auf den Link „Prüfen“.

about:inspect-Seite mit Links zu Geräte-Tabs

Wenn keine verbundenen Geräte angezeigt werden, prüfen Sie, ob Ihr Gerät über USB verbunden ist und die Option USB-Debugging in den Chrome für Android-Einstellungen aktiviert ist. Eine ausführlichere Anleitung und Schritte zur Fehlerbehebung finden Sie unter Remote-Debugging unter Android.

Reverse-Portweiterleitung (experimentell)

Normalerweise wird auf Ihrem lokalen Entwicklungscomputer ein Webserver ausgeführt und Sie möchten von Ihrem Gerät aus eine Verbindung zu dieser Website herstellen. Wenn sich der Entwicklungscomputer und das Gerät im selben Netzwerk befinden, ist das ganz einfach. In einigen Fällen, z. B. in eingeschränkten Unternehmensnetzwerken, ist dies jedoch möglicherweise nicht ohne einige clevere DNS-Tricks möglich. Mit der neuen Funktion Reverse-Port-Weiterleitung in Chrome für Android ist das ganz einfach. Dabei wird auf Ihrem Gerät ein TCP-Port erstellt, der den Traffic über USB an einen bestimmten TCP-Port auf Ihrem Entwicklungscomputer weiterleitet.

Für die Nutzung dieser Funktion benötigen Sie Folgendes:

Chrome 28 oder höher auf Ihrem Entwicklungscomputer installiert
Chrome for Android Beta auf Ihrem Gerät installiert
Android Debug Bridge (ADB Chrome-Erweiterung oder vollständiges Android SDK) auf Ihrem Entwicklungscomputer installiert

Wenn Sie die umgekehrte Portweiterleitung verwenden möchten, muss Ihr Gerät für die Remote-Fehlerbehebung verbunden sein, wie unter „ADB-Erweiterung verwenden“ beschrieben. Aktivieren Sie dann die umgekehrte Portweiterleitung und fügen Sie eine Portweiterleitungsregel für Ihre Anwendung hinzu.

Aktivieren Sie zuerst die umgekehrte Portweiterleitung:

Öffnen Sie Chrome auf Ihrem Entwicklungscomputer.
Aktivieren Sie unter about:flags die Option Enable Developer Tools experiments (Entwicklertools-Experimente aktivieren) und starten Sie Chrome neu.
Öffnen Sie about:inspect. Sie sollten Ihr Mobilgerät und eine Liste der geöffneten Tabs sehen.
Klicken Sie neben einer der aufgeführten Websites auf den Link „Prüfen“.
Öffnen Sie im geöffneten DevTools-Fenster den Bereich „Einstellungen“.
Aktivieren Sie unter „Tests“ die Option Reverse-Portweiterleitung aktivieren.
Schließen Sie das Fenster der Entwicklertools und kehren Sie zu about:inspect zurück.

Fügen Sie dann eine Portweiterleitungsregel hinzu:

Klicken Sie noch einmal auf den Link „Inspect“ (Prüfen), um die Entwicklertools zu öffnen, und öffnen Sie dann noch einmal die Entwicklertools-Einstellungen.
Klicken Sie auf den Tab Portweiterleitung.
Geben Sie im Feld Geräteport die Portnummer ein, über die Chrome auf Ihrem Android-Gerät eine Verbindung herstellen soll (Standardwert: 8080).
Fügen Sie im Feld Ziel die Portnummer an, unter der Ihre Webanwendung auf Ihrem Entwicklungscomputer ausgeführt wird.
Öffnen Sie in Chrome für Android localhost:, wobei der Wert ist, den Sie in das Feld Geräteport eingegeben haben (Standard: 8080).

Sie sollten die Inhalte sehen, die von Ihrem Entwicklungscomputer bereitgestellt werden.

Flammendiagrammvisualisierung für JavaScript-Profile

Die neue Flammendiagramm-Ansicht bietet eine visuelle Darstellung der JavaScript-Verarbeitung im Zeitverlauf, ähnlich wie in den Bereichen „Zeitachse“ und „Netzwerk“.

Die horizontale Achse ist die Zeitachse und die vertikale Achse ist der Aufrufstapel. Oben im Bereich wird eine Übersicht der gesamten Aufnahme angezeigt. Sie können einen Bereich der Übersicht durch Anklicken mit der Maus heranzoomen, wie unten gezeigt. Die Zeitachse in der Detailansicht wird entsprechend verkleinert.

In der Detailansicht wird ein Aufrufstapel als Stapel von Funktionsblöcken dargestellt. Ein Block, der über einem anderen liegt, wurde vom untergeordneten Funktionsblock aufgerufen. Wenn Sie den Mauszeiger auf einen bestimmten Block bewegen, werden der Funktionsname und die Zeitdaten angezeigt:

Name: Der Name der Funktion.
Eigenzeit: Die Zeit, die für die aktuelle Aufrufung der Funktion benötigt wurde. Hierbei werden nur die Anweisungen in der Funktion selbst berücksichtigt, nicht die von ihr aufgerufenen Funktionen.
Gesamtzeit: Die Zeit, die für den aktuellen Aufruf dieser Funktion und alle von ihr aufgerufenen Funktionen benötigt wurde.
Aggregierte Eigenzeit: Die Gesamtzeit für alle Aufrufe der Funktion in der Aufzeichnung, ohne von dieser Funktion aufgerufene Funktionen.
Aggregierte Gesamtzeit: Die Gesamtzeit für alle Aufrufe der Funktion, einschließlich der von dieser Funktion aufgerufenen Funktionen.

Wenn Sie auf einen Funktionsblock klicken, wird die zugehörige JavaScript-Datei im Bereich „Quellen“ in der Zeile geöffnet, in der die Funktion definiert ist.

Funktionsdefinition im Bereich „Quellen“

So verwenden Sie das Flammendiagramm:

Klicken Sie in den DevTools auf den Tab Profile.
Wählen Sie JavaScript-CPU-Profil aufzeichnen aus und klicken Sie auf Starten.
Wenn Sie mit der Datenerhebung fertig sind, klicken Sie auf Beenden.
Wählen Sie in der Profilansicht die Visualisierung Feuerdiagramm aus.

Fünf wichtige Funktionen zur Leistungsmessung

Abgerundet wird diese Übersicht über die revolutionären Fortschritte in den DevTools durch mehrere neue Funktionen zur Untersuchung von Leistungsproblemen:

Modus für kontinuierliches Malen
Rechtecke und Ebenengrenzen für die Zeichenfunktion anzeigen
FPS-Messgerät
Erzwungene synchrone Layouts finden (Layout-Trashing)
Nachverfolgung der Objektzuweisung

Modus für kontinuierliches Malen

Der Modus für kontinuierliches Malen ist eine Option in den Einstellungen der Entwicklertools (Rendering > Continuous page repainting enable). Mit dieser Option können Sie die Renderingkosten einzelner Elemente oder CSS-Stile ermitteln.

Normalerweise wird in Chrome nur dann etwas auf dem Bildschirm dargestellt, wenn sich das Layout oder der Stil ändert, und nur in den Bereichen, die aktualisiert werden müssen. Wenn Sie die kontinuierliche Neumalerei der Seite aktivieren, wird der gesamte Bildschirm ständig neu gemalt. In einem Pop-up wird die Zeit angezeigt, die Chrome zum Rendern der Seite benötigt, sowie die Spanne der Zeiten und eine Grafik mit der Verteilung der letzten Renderzeiten. Die horizontale Linie im Histogramm gibt die 16,6 ms an.

Der Vorteil dabei ist, dass Sie im Bereich „Elemente“ die DOM-Baumstruktur durchgehen und einzelne Elemente ausblenden können (drücken Sie die Taste H, um das aktuell ausgewählte Element auszublenden) oder die CSS-Stile eines Elements deaktivieren können. Sie können sehen, wie viel Zeit ein Element oder Stil dem Seitenrendering hinzufügt, indem Sie Änderungen an der Zeit für das Ausmalen der Seite beobachten. Wenn sich die Renderzeit durch Ausblenden eines einzelnen Elements deutlich verringert, sollten Sie sich auf das Styling oder die Konstruktion dieses Elements konzentrieren.

So aktivieren Sie den Modus für kontinuierliches Malen:

Öffnen Sie die Einstellungen der Entwicklertools. 1.Aktivieren Sie auf dem Tab Allgemein unter Rendering die Option Continuous page repainting enable (Kontinuierliches Neuzeichnen der Seite aktivieren).

Weitere Informationen finden Sie unter Lange Zeichnenzeiten mit dem kontinuierlichen Zeichnen-Modus von DevTools erfassen.

Rechtecke für die Malerei und Ebenengrenzen anzeigen

Eine weitere Option in DevTools ist die Anzeige der rechteckigen Bereiche des Displays, in die gerendert wird. (Einstellungen > Rendering > Rechtecke für Malen anzeigen). Im Screenshot unten wird beispielsweise ein Rechteck über den Bereich gezeichnet, in dem ein CSS-Hover-Effekt auf die lila Grafik angewendet wurde. Das ist gut, da es sich um einen relativ kleinen Teil des Bildschirms handelt.

Website mit einem Rechteck für die Auswahl der Farbe

Sie sollten Design- und Entwicklungspraktiken vermeiden, die dazu führen, dass das gesamte Display neu gerendert wird. Im folgenden Screenshot scrollt der Nutzer beispielsweise auf der Seite. Ein Rechteck umschließt die Bildlaufleiste und ein weiteres den gesamten Rest der Seite. In diesem Fall ist das Hintergrundbild im Body-Element der Übeltäter. Die Bildposition ist in CSS auf „fixiert“ festgelegt, was dazu führt, dass Chrome bei jedem Scrollen die gesamte Seite neu zeichnen muss.

FPS-Messgerät

Der FPS-Messwert zeigt die aktuelle Framerate der Seite, die minimale und maximale Framerate, ein Balkendiagramm mit der Framerate im Zeitverlauf und ein Histogramm mit der Framerate-Variabilität an.

So blendest du das Messtool für FPS ein:

Öffnen Sie die Einstellungen der Entwicklertools.
Klicken Sie auf Allgemein.
Aktivieren Sie unter Rendering die Optionen Beschleunigtes Compositing erzwingen und Messtool für Bilder pro Sekunde (FPS) anzeigen.

Sie können das FPS-Messtool so einstellen, dass es immer angezeigt wird. Öffnen Sie dazu about:flags, aktivieren Sie den FPS-Zähler und starten Sie Chrome neu.

Erzwungene synchrone Layouts finden (Layout-Trashing)

Um die Renderingleistung zu maximieren, werden von Ihrer Anwendung angeforderte Layoutänderungen in Chrome normalerweise in einem Batch verarbeitet und ein Layout-Pass geplant, um die angeforderten Änderungen asynchron zu berechnen und zu rendern. Wenn eine Anwendung jedoch den Wert einer layoutabhängigen Eigenschaft anfordert (z. B. offsetHeight oder offsetWidth), muss Chrome sofort und synchron ein Seitenlayout ausführen. Diese sogenannten erzwungenen synchronen Layouts können die Renderingleistung erheblich beeinträchtigen, insbesondere wenn sie wiederholt auf großen DOM-Bäumen ausgeführt werden. Dieses Szenario wird auch als „Layout-Trashing“ bezeichnet.

Wenn ein Zeitachsen-Eintrags ein erzwungenes synchrones Layout erkennt, werden Sie durch ein gelbes Warnsymbol neben dem entsprechenden Zeitachsen-Eintrags benachrichtigt. Wenn Sie den Mauszeiger auf einen dieser Einträge bewegen, werden Stack-Traces für den Code angezeigt, der das Layout ungültig gemacht hat, und für den Code, der das Layout erzwungen hat.

Pop-up-Fenster für erzwungenes synchrones Layout in der Zeitachsenansicht

Außerdem sehen Sie dort die Anzahl der Knoten, für die ein Layout erforderlich war, die Größe des Layout-Baums für die Neuanordnung, den Layoutbereich und den Layout-Stamm.

Weitere Informationen finden Sie in der Zeitachse: Diagnostizieren von erzwungenen synchronen Layouts.

Nachverfolgung der Objektzuweisung

Das Objektzuweisungs-Tracking ist ein neuer Typ von Arbeitsspeicherprofil, der die Zuweisung im Zeitverlauf zeigt. Wenn Sie das Zuordnungs-Tracking starten, werden in DevTools kontinuierlich Heap-Snapshots erstellt. Das Heap-Allokationsprofil zeigt an, wo Objekte erstellt werden, und identifiziert den Speicherpfad.

So erfassen Sie Objektzuweisungen:

Klicken Sie in den DevTools auf den Tab Profile.
Wählen Sie Heap-Zuweisungen erfassen aus und klicken Sie auf Starten.
Wenn Sie mit der Datenerhebung fertig sind, klicken Sie auf Aufzeichnung des Heap-Profils beenden (roter Kreis in der linken unteren Ecke des Bereichs „Profilierung“).

Canvas-Profilierung (experimentell)

Abschließend möchten wir Ihnen eine völlig experimentelle Funktion vorstellen. Mit dem Canvas-Profiling können Sie WebGL-Aufrufe auf einem Canvas-Element aufzeichnen und wiedergeben. Sie können einzelne WebGL-Aufrufe oder Aufrufgruppen durchgehen und sich die gerenderten Ergebnisse ansehen. Außerdem sehen Sie, wie lange die Wiedergabe dieser Anrufe gedauert hat.

So verwenden Sie das Canvas-Profiling:

Aktivieren Sie die Funktion Canvas-Prüfung auf dem Tab Tests in den DevTools-Einstellungen. Wenn dieser Tab nicht angezeigt wird, öffnen Sie about:flags, aktivieren Sie Enable Developer Tools experiments (Entwicklertools-Experimente aktivieren) und starten Sie Chrome neu.
Klicken Sie auf den Tab Profile.
Wählen Sie Canvas-Frame erfassen aus und klicken Sie auf Schnappschuss aufnehmen.
Sie können sich jetzt die Aufrufe ansehen, die zum Erstellen des Canvas-Frames verwendet wurden.