Diese Seite wurde von der Cloud Translation API übersetzt.

Revolutionen bei den Chrome-Entwicklertools 2013

Arthur Evans

Twitter GitHub

Tim Statler

Twitter

Einführung

Mit der Komplexität und dem Funktionsumfang von Webanwendungen wächst auch die Anzahl der Chrome-Entwicklertools. In dieser Zusammenfassung des Gesprächs von Paul Irish auf der Google I/O 2013 zu Chrome DevTools Revolutions 2013 stellen wir die neuesten Funktionen vor, die das Erstellen und Testen von Webanwendungen revolutionieren.

Wenn Sie Pauls Vortrag verpasst haben, können Sie sich den Vortrag oben ansehen (bitte warten Sie!) oder direkt zur Zusammenfassung der Funktion wechseln:

Mit Workspaces können Sie Entwicklertools als Quellcode-Editor verwenden.
Wenn Sie SASS verwenden, werden Sie von der Live-Bearbeitung von SASS-Dateien (.scss) in den Entwicklertools begeistert sein. Ihre Änderungen werden sofort auf der Seite angezeigt.
Die Remote-Fehlerbehebung von Seiten in Chrome für Android war schon eine Weile möglich, aber die ADB-Erweiterung erleichtert die Verbindung mit Android-Geräten. Mit der umgekehrten Portweiterleitung können Sie auf Ihrem Entwicklungscomputer ganz einfach von Ihrem Gerät aus eine Verbindung zu localhost herstellen.
Leistung ist bei Webanwendungen immer ein wichtiger Aspekt. DevTools bietet eine Reihe neuer Funktionen, mit denen Sie Engpässe aufspüren können. Dazu gehören die neue Flame-Diagramm-Visualisierung für die CPU-Profilerstellung und mehrere neue Tools zur Behebung von Leistungsproblemen im Zusammenhang mit Rendering und Speichernutzung.

Diese Funktionen sind in Chrome 28 und jetzt über die stabile Updateversion verfügbar.

Arbeitsbereiche

Mit Arbeitsbereichen können Sie Ressourcen, die von einem lokalen Webserver bereitgestellt werden, Dateien auf der Festplatte zuordnen. So können Sie jede Art von Quelldatei im Bereich „Quellen“ bearbeiten und diese Änderungen auf der Festplatte speichern. Ebenso werden Änderungen, die Sie in Ihrem externen Editor vornehmen, sofort im Steuerfeld „Quellen“ angezeigt.

Im Screenshot unten sehen Sie ein Beispiel für Arbeitsbereiche. Die Kalender-Website wurde über localhost geladen, während im Bereich „Quellen“ die lokale Dateisystemansicht des Stammordners der Website angezeigt wird. Änderungen, die Sie an den Dateien in diesem Ordner vornehmen, werden auf der Festplatte gespeichert. Im Screenshot unten wurden einige nicht gespeicherte Änderungen an „Calendar.css“ vorgenommen, sodass neben dem Dateinamen ein Sternchen steht.

Wenn Sie Control+S oder Command+S drücken, werden die Änderungen auf dem Laufwerk übernommen.

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

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

Arbeitsbereichsordner hinzufügen

Arbeitsbereiche werden in zwei Schritten verwendet: die Inhalte eines lokalen Ordners für die Entwicklertools 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 zu öffnen.
Klicken Sie auf Arbeitsbereich.
Klicken Sie auf Ordner hinzufügen.
Suchen Sie den Ordner, der die Quelldateien Ihres Projekts enthält, und klicken Sie auf Auswählen.
Wenn Sie dazu aufgefordert werden, klicken Sie auf Zulassen, um den Entwicklertools vollständigen 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 jetzt Dateien in Ihrem Arbeitsbereichsordner live bearbeiten. Diese Änderungen werden auf der Festplatte gespeichert.

Quellenbereich mit localhost-Ressourcen und Workspace-Dateien.

Ordner einer URL zuordnen

Nachdem Sie einen Arbeitsbereichsordner hinzugefügt haben, können Sie ihn einer URL zuordnen. Immer wenn Chrome die angegebene URL lädt, wird im Steuerfeld „Quellen“ anstelle des Netzwerkordnerinhalts der Inhalt des Arbeitsbereichsordners angezeigt.

So ordnen Sie einer URL einen Arbeitsbereichsordner zu:

Klicken Sie im Steuerfeld „Quellen“ mit der rechten Maustaste oder bei gedrückter Strg-Taste auf eine Datei in einem Arbeitsbereichsordner.
Wählen Sie Zu Netzwerkressource zuordnen aus.
Wählen Sie auf der aktuell geladenen Seite die entsprechende Netzwerkressource aus.
Aktualisieren Sie die Seite in Chrome.

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

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

Klicken Sie mit der rechten Maustaste (oder bei gedrückter Strg-Taste) auf eine Netzwerkressource und wählen Sie Zu Dateisystemressource zuordnen aus.
Sie können Zuordnungen auf dem Tab „Workspace“ des Dialogfelds „Einstellungen“ der Entwicklertools manuell hinzufügen.

Debugging von Sass/CSS-Quellkarten

Mit Sass (CSS Source Map)-Debugging können Sie Sass-Dateien (.scss) live im Quellenbereich bearbeiten und die Ergebnisse anzeigen, ohne die Entwicklertools verlassen oder die Seite aktualisieren zu müssen. Wenn Sie ein Element überprüfen, dessen Stile von einer von Sass generierten CSS-Datei bereitgestellt werden, wird im Steuerfeld Elemente ein Link zur SCSs-Datei angezeigt, nicht zur generierten CSS-Datei.

Steuerfeld „Elemente“ mit .scss-Stylesheet

Durch Klicken auf den Link wird die (bearbeitbare) SCSS-Datei im Feld „Quellen“ geöffnet. Sie können alle gewünschten Änderungen an dieser Datei vornehmen.

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

Sass-Debugging verwenden

Wenn Sie Sass-Debugging in Chrome verwenden möchten, benötigen Sie die Vorabveröffentlichung des Sass-Compilers. Das ist die einzige Version, die derzeit die Generierung von Source Maps 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 about:flags in Chrome.
Aktivieren Sie Tests der Entwicklertools 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-Fehlerbehebung, je nach verwendeter Browserversion).

Sobald Sass installiert ist, starten Sie den Sass-Compiler, um nach Änderungen an Ihren Sass-Quelldateien zu suchen und Source Map-Dateien für jede generierte CSS-Datei zu erstellen. Beispiel:

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

Wenn Sie Compass verwenden, beachten Sie, dass Compass die Vorabversion von Sass noch nicht unterstützt, sodass Sie die Sass-Fehlerbehebung mit Compass nicht verwenden können.

Funktionsweise

Für jede von ihm verarbeitete SCSS-Quelldatei generiert der Sass-Compiler zusätzlich zur kompilierten CSS eine Quelldatei (.map-Datei). Die Source Map-Datei ist eine JSON-Datei, die die Zuordnungen zwischen der .scss-Datei und den .css-Dateien definiert. Jede CSS-Datei enthält eine Annotation, die die URL ihrer Source Map-Datei angibt und in einen speziellen Kommentar eingebettet ist:

/*# sourceMappingURL=<url>; */

Angenommen, die folgende SCSS-Datei lautet:

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

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

Sass generiert eine CSS-Datei wie die folgende mit der Annotation sourceMappingURL:

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

Im Folgenden finden Sie ein Beispiel für eine Source Map-Datei:

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

Einfachere Remote-Debugging-Funktion in Chrome für Android

Einige neue Funktionen in den Entwicklertools erleichtern die Einrichtung des Remote-Debugging in Chrome für Android: die ADB-Erweiterung und die umgekehrte Portweiterleitung.

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

Bundle Android Debug Bridge (ADB), sodass Sie es nicht installieren müssen.
Keine Befehlszeileninteraktion erforderlich.
Benutzeroberfläche zum einfachen Starten und Beenden des ADB-Daemons und zum Anzeigen verbundener Geräte

Die umgekehrte Portweiterleitung erleichtert es, Chrome unter Android mit einem Webserver zu verbinden, der auf Ihrem localhost ausgeführt wird. Dies ist in einigen Netzwerkumgebungen ohne einige DNS-Tricks erschwert.

ADB-Erweiterung verwenden

Installieren Sie zuerst die ADB-Erweiterung für Chrome 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 auf das Symbol und dann auf ADB starten, um ADB zu starten.

Sobald ADB gestartet wurde, wird das Menüsymbol grün und zeigt die Anzahl der derzeit verbundenen Geräte an (sofern vorhanden).

ADB-Erweiterungsmenü mit verbundenen Geräten.

Klicken Sie auf Geräte anzeigen, um die Seite about:Inspect zu öffnen, auf der alle verbundenen Geräte und die zugehörigen Tabs angezeigt werden. Um einen Tab in den Entwicklertools zu prüfen, klicke auf den Link „Inspect“ neben seiner URL.

about:Inspect-Seite mit Links für Geräte-Tabs

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

Umgekehrte Portweiterleitung (experimentell)

Normalerweise läuft auf Ihrem lokalen Entwicklungscomputer ein Webserver 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 dies unkompliziert. In einigen Fällen, z. B. in eingeschränkten Unternehmensnetzwerken, ist dies jedoch ohne ein paar clevere DNS-Tricks nicht möglich. Mit der neuen Funktion Umgekehrte Portweiterleitung in Chrome für Android ist dies ganz einfach. Sie erstellt einen überwachten TCP-Port auf Ihrem Gerät, der den Datenverkehr über USB an einen bestimmten TCP-Port auf Ihrem Entwicklungscomputer weiterleitet.

Für diese Funktion benötigen Sie Folgendes:

Chrome 28 oder höher auf Ihrem Entwicklungscomputer installiert
Chrome für Android Beta auf Ihrem Gerät installiert
Android Debug Bridge (ADB Chrome-Erweiterung oder vollständiges Android SDK), die auf Ihrem Entwicklungscomputer installiert ist

Damit Sie die umgekehrte Portweiterleitung verwenden können, muss Ihr Gerät für die Remote-Fehlerbehebung verbunden sein, wie unter Verwendung der ADB-Erweiterung beschrieben. Anschließend müssen Sie die umgekehrte Portweiterleitung aktivieren und eine Portweiterleitungsregel für Ihre Anwendung hinzufügen.

Aktivieren Sie zuerst die umgekehrte Portweiterleitung:

Öffnen Sie Chrome auf Ihrem Entwicklungscomputer.
Aktivieren Sie in about:flags die Option Experimente der Entwicklertools 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 Fenster „Entwicklertools“, das geöffnet wird, den Bereich „Einstellungen“.
Aktivieren Sie unter „Tests“ die Option Umgekehrte Portweiterleitung aktivieren.
Schließen Sie das Entwicklertools-Fenster und kehren Sie zu about:inspect zurück.

Fügen Sie dann eine Portweiterleitungsregel hinzu:

Klicken Sie noch einmal auf den Link „Inspect“, um die Entwicklertools zu öffnen. Öffnen Sie dann noch einmal die Einstellungen der Entwicklertools.
Klicken Sie auf den Tab Portweiterleitung.
Geben Sie im Feld Geräteport die Portnummer ein, mit der Chrome eine Verbindung auf Ihrem Android-Gerät herstellen soll (standardmäßig 8080).
Fügen Sie im Feld Ziel die Portnummer an, an der die 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 ist 8080).

Sie sollten den Inhalt sehen, der von Ihrem Entwicklungscomputer bereitgestellt wird.

Visualisierung des Flame-Diagramms für JavaScript-Profile

Das neue Flame-Diagramm zeigt eine visuelle Darstellung der JavaScript-Verarbeitung im Laufe der Zeit, ähnlich wie in den Steuerfeldern "Zeitachse" und "Netzwerk".

Die horizontale Achse ist die Zeit und die vertikale Achse der Aufrufstack. Oben im Bereich sehen Sie eine Übersicht, in der die gesamte Aufzeichnung zu sehen ist. Sie können einen Bereich der Übersicht vergrößern, indem Sie ihn wie unten dargestellt mit der Maus auswählen. Die Zeitskala in der Detailansicht wird entsprechend verkleinert.

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

Name: Der Name der Funktion.
Eigene Zeit – Wie lange es gedauert hat, bis der aktuelle Aufruf der Funktion abgeschlossen ist, einschließlich der Anweisungen in der Funktion selbst, ohne die von ihr aufgerufenen Funktionen.
Gesamtzeit: Die Zeit, die benötigt wurde, um den aktuellen Aufruf dieser Funktion und alle von ihr aufgerufenen Funktionen abzuschließen.
Aggregierte Eigenzeit: Aggregierte Zeit für alle Aufrufe der Funktion in der Aufzeichnung, ohne Funktionen, die von dieser Funktion aufgerufen werden.
Aggregierte Gesamtzeit: Aggregierte Gesamtzeit für alle Aufrufe der Funktion, einschließlich Funktionen, die von dieser Funktion aufgerufen werden.

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

So verwenden Sie das Flame-Diagramm:

Klicken Sie in den Entwicklertools 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 Flame-Diagramm aus.

Fünf wichtige Funktionen zur Leistungsmessung

Abgerundet wird diese Umfrage über revolutionäre Fortschritte in den Entwicklertools durch einige neue Funktionen zur Untersuchung von Leistungsproblemen:

Modus für das kontinuierliche Malen
Farbrechtecke und Ebenenränder anzeigen
fps-Messtool
Erzwungene synchrone Layouts finden (Layout-Drashing)
Objektzuweisungs-Tracking

Modus für das kontinuierliche Malen

Der Modus für kontinuierliches Malen ist eine Option in den Einstellungen der Entwicklertools (Rendering > Kontinuierliche Seitendarstellung aktivieren). Damit können Sie die Renderingkosten einzelner Elemente oder CSS-Stile ermitteln.

Normalerweise malt Chrome auf dem Bildschirm nur als Reaktion auf Layout- oder Stiländerungen und nur die Bereiche des Bildschirms, die aktualisiert werden müssen. Wenn Sie die kontinuierliche Darstellung von Seiten aktivieren, wird der gesamte Bildschirm fortlaufend neu erstellt. Auf einem Head-up-Display werden die Zeit, die Chrome zum Rendern der Seite benötigt, sowie der Zeitraum und ein Diagramm angezeigt, das die Verteilung der letzten Paint-Zeiten zeigt. Die horizontale Linie im Histogramm zeigt die Markierung von 16,6 ms an.

Dies hat den Vorteil, dass Sie im DOM-Baum im Steuerfeld „Elemente“ einzelne Elemente ausblenden (die H-Taste drücken, um das aktuell ausgewählte Element auszublenden) oder die CSS-Stile eines Elements deaktivieren. Sie können sehen, wie viel Zeit ein Element oder ein Stil zur Darstellung der Seite beiträgt (falls vorhanden), indem Sie Änderungen an der Seitendarstellungsdauer erkennen. Wenn das Ausblenden eines einzelnen Elements die Farbzeit erheblich reduziert, wissen Sie, dass Sie sich auf den Stil oder die Konstruktion dieses Elements konzentrieren müssen.

So aktivieren Sie den Modus für kontinuierliche Schmerzen:

Öffnen Sie die Entwicklertools-Einstellungen. 1.Aktivieren Sie auf dem Tab Allgemein unter Rendering die Option Kontinuierliche Seitendarstellung aktivieren.

Weitere Informationen finden Sie unter Profilerstellung für lange Paint-Zeiten mit dem Continuous Painting-Modus der Entwicklertools.

Farbrechtecke und Ebenenränder anzeigen

Eine weitere Option in den Entwicklertools besteht darin, anzuzeigen, in welche rechteckigen Bereiche der Anzeige dargestellt werden. (Einstellungen > Rendering > Farbrechtecke anzeigen). Im Screenshot unten wird beispielsweise ein Farbrechteck über den Bereich gezeichnet, in dem ein CSS-Hover-Effekt auf die lila Grafik angewendet wurde. Das ist gut, da es sich dabei um einen relativ kleinen Teil des Bildschirms handelt.

Sie sollten Design- und Entwicklungspraktiken vermeiden, die dazu führen, dass das gesamte Display neu gezeichnet wird. Im folgenden Screenshot scrollt der Nutzer beispielsweise auf der Seite. Ein Farbrechteck umgibt die Bildlaufleiste und ein anderes den gesamten Rest der Seite. In diesem Fall ist das Hintergrundbild des body-Elements die Ursache. In CSS ist die Bildposition auf „Fixed“ festgelegt. Dadurch muss Chrome bei jedem Scrollen die gesamte Seite neu darstellen.

fps-Messtool

Das FPS-Messtool zeigt die aktuelle Framerate der Seite, die minimale und maximale Framerate, ein Balkendiagramm mit der Framerate im Zeitverlauf und ein Histogramm mit Frameratevariabilität an.

So rufen Sie die FPS-Anzeige auf:

Öffnen Sie die Entwicklertools-Einstellungen.
Klicken Sie auf Allgemein.
Aktivieren Sie unter Rendering die Optionen Beschleunigtes Zusammensetzen erzwingen und FPS-Messtool anzeigen.

Sie können erzwingen, dass die FPS-Anzeige immer angezeigt wird. Öffnen Sie dazu about:flags, aktivieren Sie den FPS-Zähler und starten Sie Chrome neu.

Erzwungene synchrone Layouts finden (Layout-Drashing)

Um die Rendering-Leistung zu maximieren, fasst Chrome in der Regel Layoutänderungen, die von Ihrer Anwendung angefordert werden, in Batches zusammen und plant eine Layoutübergabe, um die angeforderten Änderungen asynchron zu berechnen und darzustellen. Wenn eine Anwendung jedoch den Wert einer assetabhängigen Eigenschaft anfordert (z. B. offsetHeight oder offsetWidth), wird Chrome gezwungen, ein Seitenlayout sofort und synchron auszuführen. Diese sogenannten erzwungenen synchronen Layouts können die Renderingleistung erheblich verringern, insbesondere wenn sie wiederholt in großen DOM-Baumstrukturen ausgeführt werden. Dieses Szenario wurde auch als „Layout Thrashing“ bezeichnet.

Eine Zeitachsenaufzeichnung warnt Sie, wenn ein erzwungenes synchrones Layout mit einem gelben Warnsymbol neben dem entsprechenden Zeitachseneintrag erkannt wird. Wenn Sie den Mauszeiger auf einen dieser Einträge bewegen, werden Stacktraces für den Code angezeigt, der das Layout ungültig gemacht hat, sowie den Code, der das Layout erzwungen hat.

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

In diesem Pop-up-Fenster werden auch die Anzahl der Knoten angezeigt, für die ein Layout erforderlich war, die Größe der Struktur für das Neulayout, den Layoutumfang und den Layoutstamm.

Weitere Informationen finden Sie unter Demo der Zeitachse: Diagnostizieren erzwungener synchroner Layouts.

Objektzuweisungs-Tracking

Die Verfolgung der Objektzuweisung ist ein neuer Speicherprofiltyp, der die Zuordnung im Zeitverlauf anzeigt. Wenn Sie mit dem Zuweisungs-Tracking beginnen, werden mit den Entwicklertools kontinuierlich Heap-Snapshots erstellt. Das Heap-Zuweisungsprofil zeigt, wo Objekte erstellt werden, und identifiziert den Beibehaltungspfad.

So verfolgen Sie Objektzuweisungen:

Klicken Sie in den Entwicklertools auf den Tab Profile.
Wählen Sie Heap-Zuweisungen aufzeichnen aus und klicken Sie auf Start.
Wenn Sie mit der Datenerfassung fertig sind, klicken Sie auf Aufzeichnung des Heap-Profils beenden (den roten Kreis links unten im Profilerstellungsbereich).

Canvas-Profiling (experimentell)

Hier ist eine experimentelle Funktion, die wir erst noch ausprobieren können. Mit der Canvas-Profilerstellung können Sie WebGL-Aufrufe für ein Canvas-Element aufzeichnen und wiedergeben. Sie können einzelne WebGL-Aufrufe oder Anrufgruppen Schritt für Schritt durchgehen und sich die gerenderten Ergebnisse ansehen. Außerdem sehen Sie, wie lange die Wiedergabe dieser Aufrufe gedauert hat.

So verwenden Sie die Canvas-Profilerstellung:

Aktivieren Sie in den Einstellungen der Entwicklertools auf dem Tab Tests die Funktion Canvas-Prüfung. Wenn Sie diesen Tab nicht sehen, öffnen Sie about:flags, aktivieren Sie Experimente der Entwicklertools aktivieren und starten Sie Chrome neu.
Klicken Sie auf den Tab Profile.
Wählen Sie Leinwandrahmen aufnehmen aus und klicken Sie auf Schnappschuss aufnehmen.
Sie können sich jetzt die Aufrufe ansehen, die zum Erstellen des Canvas-Frames verwendet wurden.