Referenz zu Leistungsfunktionen

Diese Seite enthält eine umfassende Referenz zu den Funktionen der Chrome-Entwicklertools für die Leistungsanalyse.

Unter Erste Schritte mit der Analyse der Laufzeitleistung finden Sie eine Anleitung zum Analysieren der Leistung einer Seite mithilfe der Chrome-Entwicklertools.

Leistung aufzeichnen

Sie können die Laufzeit aufzeichnen oder die Leistung laden.

Laufzeitleistung aufzeichnen

Zeichnen Sie die Laufzeitleistung auf, wenn Sie die Leistung einer Seite während der Ausführung und nicht beim Laden analysieren möchten.

1. Rufen Sie die Seite auf, die Sie analysieren möchten.
2. Klicke in den Entwicklertools auf den Tab Leistung.

3. Klicken Sie auf Aufzeichnen .

   

4. Interagieren Sie mit der Seite. Die Entwicklertools erfassen alle Seitenaktivitäten, die als Ergebnis Ihrer Interaktionen stattfinden.

5. Klicken Sie noch einmal auf Aufzeichnen oder auf Beenden, um die Aufzeichnung zu beenden.

Ladeleistung aufzeichnen

Zeichnen Sie die Ladeleistung auf, wenn Sie die Leistung einer Seite während des Ladens und nicht während des Laufens analysieren möchten.

1. Rufen Sie die Seite auf, die Sie analysieren möchten.
2. Öffnen Sie in den Entwicklertools den Bereich Leistung.

3. Klicken Sie auf Profilerstellung starten und Seite neu laden . In den Entwicklertools wird zuerst about:blank aufgerufen, um alle verbleibenden Screenshots und Traces zu löschen. Die Entwicklertools zeichnet die Leistungsmesswerte auf, während die Seite neu geladen wird, und stoppt die Aufzeichnung dann automatisch einige Sekunden nach Abschluss des Ladevorgangs.

   

Die Entwicklertools zoomen automatisch den Teil der Aufzeichnung heran, in dem die meiste Aktivität stattgefunden hat.

In diesem Beispiel wird im Bereich Leistung die Aktivität während des Seitenaufbaus angezeigt.

Screenshots während der Aufnahme erstellen

Klicken Sie das Kästchen Screenshots an, um einen Screenshot jedes Frames während der Aufnahme zu erstellen.

Unter Screenshots ansehen erfahren Sie, wie Sie mit Screenshots interagieren können.

Automatische Speicherbereinigung während der Aufnahme erzwingen

Klicken Sie während der Aufzeichnung einer Seite auf Save garbage mop (automatische Speicherbereinigung), um die automatische Speicherbereinigung zu erzwingen.

Aufnahmeeinstellungen anzeigen

Klicken Sie auf Aufnahmeeinstellungen , um weitere Einstellungen dazu aufzurufen, wie die Entwicklertools Leistungsaufzeichnungen erfassen.

JavaScript-Beispiele deaktivieren

Standardmäßig werden im Main-Track einer Aufzeichnung detaillierte Aufrufstacks von JavaScript-Funktionen angezeigt, die während der Aufzeichnung aufgerufen wurden. So deaktivieren Sie diese Aufrufstacks:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufzeichnungseinstellungen anzeigen.
2. Klicken Sie das Kästchen JavaScript-Beispiele deaktivieren an.
3. Machen Sie eine Aufnahme der Seite.

Die folgenden Screenshots zeigen den Unterschied zwischen dem Deaktivieren und Aktivieren von JavaScript-Beispielen. Der Haupt-Track der Aufzeichnung ist bei deaktiviertem Sampling viel kürzer, da alle JavaScript-Aufrufstacks weggelassen werden.

Dieses Beispiel zeigt eine Aufnahme mit deaktivierten JS-Beispielen.

Dieses Beispiel zeigt eine Aufnahme mit aktivierten JS-Beispielen.

Netzwerk während der Aufnahme drosseln

So drosseln Sie das Netzwerk während der Aufnahme:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufzeichnungseinstellungen anzeigen.
2. Stellen Sie das Netzwerk auf die ausgewählte Drosselungsstufe ein.

CPU während der Aufnahme drosseln

So drosseln Sie die CPU während der Aufnahme:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufzeichnungseinstellungen anzeigen.
2. Legen Sie für CPU die ausgewählte Drosselungsstufe fest.

Die Drosselung hängt von den Funktionen Ihres Computers ab. Die Option 2-facher Verlangsamung führt beispielsweise dazu, dass Ihre CPU zweimal langsamer arbeitet als üblich. Die Entwicklertools können die CPUs von Mobilgeräten nicht wirklich simulieren, da sich die Architektur von Mobilgeräten stark von der von Computern und Laptops unterscheidet.

Erweiterte Paint-Instrumentierung aktivieren

So rufen Sie die detaillierte Paint-Instrumentierung auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufzeichnungseinstellungen anzeigen.
2. Klicken Sie auf das Kästchen Erweiterte Paint-Instrumentierung aktivieren.

Informationen zum Umgang mit den Paint-Informationen finden Sie unter Ebenen ansehen und Color-Profiler ansehen.

Hardware-Nebenläufigkeit emulieren

Wenn Sie die Anwendungsleistung mit einer unterschiedlichen Anzahl von Prozessorkernen testen möchten, können Sie den vom Attribut navigator.hardwareConcurrency gemeldeten Wert konfigurieren. Einige Anwendungen verwenden diese Eigenschaft, um den Grad der Parallelität ihrer Anwendung zu steuern, z. B. die Größe des pthread-Pools in Emscripten.

So emulieren Sie Hardware-Nebenläufigkeit:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufzeichnungseinstellungen anzeigen.
2. Klicken Sie das Kästchen Hardware-Parallelität an und legen Sie die Anzahl der Kerne im Eingabefeld fest.

In den Entwicklertools wird neben dem Tab Leistung ein Warnsymbol angezeigt, um dich daran zu erinnern, dass die Hardware-Nebenläufigkeitsemulation aktiviert ist.

Um zum Standardwert von 10 zurückzukehren, klicken Sie auf die Schaltfläche Rückgängig machen .

Aufzeichnung speichern

Klicken Sie zum Speichern einer Aufnahme mit der rechten Maustaste und wählen Sie Profil speichern aus.

Aufnahme laden

Klicken Sie zum Laden einer Aufzeichnung mit der rechten Maustaste und wählen Sie Load Profile (Profil laden) aus.

Vorherige Aufnahme löschen

Klicken Sie nach dem Aufzeichnen auf Aufzeichnung löschen , um die Aufzeichnung im Steuerfeld Leistung zu löschen.

Leistungsaufzeichnung analysieren

Nachdem Sie die Laufzeitleistung aufgezeichnet oder die Ladeleistung aufgezeichnet haben, enthält der Bereich Leistung eine Vielzahl von Daten zum Analysieren der Leistung, was gerade passiert ist.

In der Aufzeichnung navigieren

Wenn Sie die Leistungsaufzeichnung genauer untersuchen möchten, können Sie einen Teil einer Aufzeichnung auswählen, durch ein langes Flammendiagramm scrollen, heran- und herauszoomen sowie mithilfe von Navigationspfaden zwischen den Zoomstufen wechseln.

Einen Teil der Aufnahme auswählen

Unter der Aktionsleiste im Bereich Leistung und oben in der Aufzeichnung sehen Sie den Bereich Zeitachsenübersicht mit den CPU- und NET-Diagrammen.

Wenn Sie einen Teil einer Aufnahme auswählen möchten, klicken und halten Sie die Maustaste gedrückt und ziehen Sie sie dann nach links oder rechts über die Zeitachsenübersicht.

So wählen Sie einen Teil mit der Tastatur aus:

1. Fokus auf den Haupt-Track oder einen seiner Nachbarn verschieben.
2. Mit den Tasten W, A, S und D können Sie heran- bzw. herauszoomen bzw. nach links bzw. nach rechts verschieben.

So wählen Sie einen Abschnitt mit einem Touchpad aus:

1. Bewege den Mauszeiger auf den Abschnitt Zeitachsenübersicht oder einen der Tracks (Main und die benachbarten Tracks).
2. Wischen Sie mit zwei Fingern nach oben, um herauszuzoomen, nach links, um nach links zu scrollen, wischen Sie nach unten, um heranzuzoomen, und nach rechts, um sie nach rechts, zu verschieben.

Navigationspfade erstellen und zwischen Zoomstufen wechseln

In der Zeitachsenübersicht können Sie mehrere verschachtelte Navigationspfade erstellen, die Zoomstufen erhöhen und dann zur ausgewählten Ebene springen.

So erstellen und verwenden Sie Navigationspfade:

1. Wählen Sie in der Zeitachsenübersicht einen Teil der Aufnahme aus.
2. Bewegen Sie den Mauszeiger auf die Auswahl und klicken Sie auf die Schaltfläche N ms zoom_in. Die Auswahl wird erweitert und füllt die Zeitachsenübersicht. Oberhalb der Zeitachsenübersicht wird eine Kette von Navigationspfaden erstellt.
3. Wiederholen Sie die beiden vorherigen Schritte, um einen weiteren verschachtelten Navigationspfad zu erstellen. Sie können Breadcrumbs weiter verschachteln, solange der Auswahlbereich größer als 5 Millisekunden ist.
4. Wenn Sie zu einer ausgewählten Zoomstufe wechseln möchten, klicken Sie auf den entsprechenden Navigationspfad in der Kette oben in der Zeitachsenübersicht.

Ein langes Flammendiagramm scrollen

Wenn Sie ein langes Flame-Diagramm im Haupt-Track oder in einem seiner Nachbarn scrollen möchten, klicken Sie darauf und halten Sie die Maustaste gedrückt und ziehen Sie sie in eine beliebige Richtung, bis das Gesuchte sichtbar wird.

Aktivitäten suchen

Drücken Sie zum Öffnen eines Suchfelds unten im Bereich Leistung eine der folgenden Tastenkombinationen:

• macOS: Befehlstaste + F
• Windows, Linux: Strg + F

Dieses Beispiel zeigt einen regulären Ausdruck im Suchfeld unten, mit dem alle Aktivitäten gefunden werden, die mit E beginnen.

So gehen Sie die Aktivitäten durch, die Ihrer Abfrage entsprechen:

• Klicken Sie auf die Schaltflächen expand_less Zurück oder expand_less Weiter.
• Drücken Sie Umschalttaste + Eingabetaste, um den vorherigen Text auszuwählen, oder die Eingabetaste, um den nächsten auszuwählen.

Im Bereich Leistung wird eine Kurzinfo zu der im Suchfeld ausgewählten Aktivität angezeigt.

So ändern Sie die Abfrageeinstellungen:

• Klicken Sie auf match_case Groß-/Kleinschreibung beachten, damit bei der Abfrage die Groß-/Kleinschreibung berücksichtigt wird.
• Klicken Sie auf regular_expression Regulärer Ausdruck, um in der Abfrage einen regulären Ausdruck zu verwenden.

Klicken Sie auf Abbrechen, um das Suchfeld auszublenden.

Aktivität des Hauptthreads ansehen

Im Haupt-Track können Sie sich die Aktivitäten im Hauptthread der Seite ansehen.

Klicken Sie auf ein Ereignis, um sich auf dem Tab Zusammenfassung weitere Informationen dazu anzeigen zu lassen. Im Steuerfeld Leistung wird das ausgewählte Ereignis blau dargestellt.

Dieses Beispiel enthält weitere Informationen zum Funktionsaufrufereignis get auf dem Tab Zusammenfassung.

Flammendiagramm lesen

Der Bereich Leistung stellt die Hauptthreadaktivität in einem Flame-Diagramm dar. Auf der X-Achse wird die Aufzeichnung im Zeitverlauf dargestellt. Die Y-Achse stellt den Aufrufstack dar. Die Ereignisse oben verursachen die folgenden Ereignisse.

Dieses Beispiel zeigt ein Flame-Diagramm im Main-Track. Ein click-Ereignis hat einen anonymen Funktionsaufruf verursacht. Diese Funktion wiederum heißt onEndpointClick_, handleClick_ heißt, und so weiter.

Im Steuerfeld Leistung werden Skripts Zufallsfarben zugewiesen, um das Flame-Diagramm aufzuschlüsseln und besser lesbar zu machen. Im vorherigen Beispiel sind Funktionsaufrufe von einem Skript hellblau. Anrufe von einem anderen Script werden hellrosa dargestellt. Das dunkle Gelb steht für Skriptaktivität, das violette Ereignis für die Rendering-Aktivität. Diese dunkelgelben und lilafarbenen Ereignisse sind in allen Aufzeichnungen konsistent.

Lange Aufgaben werden ebenfalls durch ein rotes Dreieck hervorgehoben und der Teil über 50 Millisekunden ist rot schattiert:

In diesem Beispiel dauerte die Aufgabe mehr als 400 Millisekunden. Der Teil, der die letzten 350 Millisekunden darstellt, ist rot schattiert, die ersten 50 Millisekunden nicht.

Darüber hinaus zeigt der Haupt-Track Informationen zu CPU-Profilen an, die mit den Konsolenfunktionen profile() und profileEnd() gestartet und beendet wurden.

Informationen zum Ausblenden des detaillierten Flame-Diagramms von JavaScript-Aufrufen finden Sie unter JavaScript-Beispiele deaktivieren. Wenn JS-Beispiele deaktiviert sind, werden nur übergeordnete Ereignisse wie Event (click) und Function Call angezeigt.

Ereignisinitiatoren verfolgen

Im Haupt-Track können Pfeile angezeigt werden, die die folgenden Initiatoren und die von ihnen verursachten Ereignisse verbinden:

• Stil- oder Layoutentwertung -> Stile neu berechnen oder Layout
• Animationsframe anfordern > Ausgelöste Animationsframe
• Callback bei Inaktivität anfordern -> Callback bei Inaktivität auslösen
• Timer installieren -> Timer ausgelöst
• Create WebSocket -> Send... (WebSocket erstellen) und Receive WebSocket Handshake (WebSocket-Handshake empfangen) oder WebSocket löschen

Um die Pfeile zu sehen, suchen Sie einen der Initiatoren im Flame-Diagramm und klicken Sie darauf.

Aktivitäten in einer Tabelle ansehen

Nachdem Sie eine Seite aufgezeichnet haben, müssen Sie sich zum Analysieren von Aktivitäten nicht nur auf den Haupt-Track verlassen. Die Entwicklertools bieten außerdem drei tabellarische Ansichten für die Analyse von Aktivitäten. Jede Ansicht gibt Ihnen eine andere Perspektive auf die Aktivitäten:

• Wenn Sie die Stammaktivitäten sehen möchten, die die meiste Arbeit verursachen, verwenden Sie den Tab Aufrufstruktur.
• Wenn Sie die Aktivitäten sehen möchten, bei denen Sie die meiste Zeit direkt verbracht haben, verwenden Sie den Tab Bottom-up.
• Wenn Sie die Aktivitäten in der Reihenfolge ansehen möchten, in der sie während der Aufzeichnung aufgetreten sind, verwenden Sie den Tab Ereignisprotokoll.

Auf allen drei Tabs gibt es neben der Filterleiste Schaltflächen zur erweiterten Filterung, damit Sie schneller finden, wonach Sie suchen:

• match_case: Groß-/Kleinschreibung beachten
• regular_expression Regulärer Ausdruck
• match_word: Übereinstimmung mit ganzem Wort

Jede tabellarische Ansicht im Bereich Leistung enthält Links für Aktivitäten wie Funktionsaufrufe. Für die Fehlerbehebung finden die Entwicklertools die entsprechenden Funktionsdeklarationen in den Quelldateien. Wenn die entsprechenden Quellkarten vorhanden und aktiviert sind, finden die Entwicklertools außerdem die Originaldateien automatisch.

Klicken Sie auf einen Link, um eine Quelldatei im Bereich Quellen zu öffnen.

Stammaktivitäten

Hier finden Sie eine Erläuterung des Konzepts der Stammaktivitäten, das in den Abschnitten Aufrufstruktur, Bottom-up und Ereignisprotokoll erwähnt wird.

Root-Aktivitäten führen dazu, dass der Browser einige Schritte ausführt. Wenn Sie beispielsweise auf eine Seite klicken, löst der Browser eine Event-Aktivität als Stammaktivität aus. Dieses Event kann dann die Ausführung eines Handlers auslösen.

Im Flame-Diagramm des Haupt-Tracks befinden sich die Stammaktivitäten oben im Diagramm. Auf den Tabs Aufrufbaum und Ereignisprotokoll sind Stammaktivitäten die Elemente der obersten Ebene.

Ein Beispiel für Root-Aktivitäten finden Sie auf dem Tab Aufrufstruktur.

Tab „Anrufstruktur“

Auf dem Tab Aufrufstruktur sehen Sie, welche Stammaktivitäten die meiste Arbeit verursachen.

Auf dem Tab Anrufstruktur werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Unter Einen Teil einer Aufnahme auswählen erfahren Sie, wie Sie Teile auswählen.

In diesem Beispiel sind die Elemente der obersten Ebene in der Spalte Aktivität, z. B. Event, Paint und Composite Layers, Stammaktivitäten. Die Verschachtelung stellt den Aufrufstack dar. In diesem Beispiel verursachte Event Function Call, was zu button.addEventListener und somit zu b geführt hat usw.

Eigene Zeit bezeichnet die Zeit, die direkt mit dieser Aktivität verbracht wird. Gesamtzeit steht für die Zeit, die mit dieser Aktivität oder einem ihrer untergeordneten Elemente verbracht wurde.

Klicken Sie auf Eigene Zeit, Gesamtzeit oder Aktivität, um die Tabelle nach dieser Spalte zu sortieren.

Mit dem Feld Filter können Sie Ereignisse nach Aktivitätsnamen filtern.

Die Standardeinstellung für das Menü Gruppierung ist Keine Gruppierung. Mit dem Menü Gruppierung können Sie die Aktivitätstabelle nach verschiedenen Kriterien sortieren.

Klicken Sie auf Schwersten Stapel anzeigen , um rechts neben der Tabelle Aktivität eine weitere Tabelle anzuzeigen. Klicken Sie auf eine Aktivität, um die Tabelle mit dem größten Stack zu füllen. In der Tabelle Schwerwiegender Stack sehen Sie, welche untergeordneten Elemente der ausgewählten Aktivität die längste Zeit in Anspruch genommen haben.

Der Bottom-up-Tab

Auf dem Tab Bottom-up sehen Sie, welche Aktivitäten insgesamt insgesamt die meiste Zeit in Anspruch genommen haben.

Auf dem Tab Bottom-up werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Unter Einen Teil einer Aufnahme auswählen erfahren Sie, wie Sie Teile auswählen.

Im Main-Flame-Diagramm dieses Beispiels sehen Sie, dass fast die gesamte Zeit für die Ausführung der drei Aufrufe von wait() aufgewendet wurde. Entsprechend ist die Top-Aktivität auf dem Tab Bottom-up wait. Im Flame-Diagramm entspricht das Gelb unter den Aufrufen von wait eigentlich Tausenden von Minor GC-Aufrufen. Dementsprechend können Sie auf dem Tab Bottom-up sehen, dass die nächsthöhere Aktivität Minor GC ist.

Die Spalte Self Time (Eigene Zeit) gibt die aggregierte Zeit wieder, die direkt für diese Aktivität über alle Vorkommen hinweg verbracht wurde.

Die Spalte Gesamtzeit gibt die Gesamtzeit an, die für diese Aktivität oder für ein untergeordnetes Element aufgewendet wurde.

Der Tab „Ereignisprotokoll“

Auf dem Tab Ereignisprotokoll sehen Sie Aktivitäten in der Reihenfolge, in der sie während der Aufzeichnung aufgetreten sind.

Auf dem Tab Ereignisprotokoll werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Unter Einen Teil einer Aufnahme auswählen erfahren Sie, wie Sie Teile auswählen.

Die Spalte Startzeit gibt den Zeitpunkt an, zu dem diese Aktivität begann, bezogen auf den Beginn der Aufzeichnung. Der Beginn von 1573.0 ms für das ausgewählte Element in diesem Beispiel bedeutet, dass die Aktivität 1.573 ms nach Beginn der Aufzeichnung gestartet wurde.

Die Spalte Self Time (Eigene Zeit) gibt die Zeit an, die direkt für diese Aktivität verbracht wurde.

Die Spalten Gesamtzeit geben die Zeit an, die direkt in dieser Aktivität oder in einem ihrer untergeordneten Elemente verbracht wurde.

Klicken Sie auf Startzeit, Eigene Zeit oder Gesamtzeit, um die Tabelle nach dieser Spalte zu sortieren.

Mit dem Feld Filter können Sie die Aktivitäten nach Namen filtern.

Verwenden Sie das Menü Dauer, um alle Aktivitäten herauszufiltern, die weniger als 1 ms oder 15 ms dauerten. Standardmäßig ist das Menü Dauer auf Alle gesetzt, d. h. alle Aktivitäten werden angezeigt.

Deaktivieren Sie die Kästchen Laden, Scripting, Rendering oder Malen, um alle Aktivitäten aus diesen Kategorien herauszufiltern.

Zeitplan ansehen

Im Track Timing sehen Sie wichtige Markierungen, z. B.:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded-Ereignis (DCL)
• Onload-Ereignis (L)
• Ihre benutzerdefinierten performance.mark()-Aufrufe. Unten wird bei 813, 44 ms eine einzelne Markierung mit einer Kurzinfo mit der Bezeichnung Ausführung von JavaScript wird gestartet angezeigt.
• Ihre benutzerdefinierten performance.measure()-Aufrufe. Unten ist ein gelber Bereich mit der Bezeichnung Langsame Interaktion zu sehen.

Wählen Sie eine Markierung aus, um auf dem Tab Zusammenfassung weitere Details zu sehen. Um den Zeitstempel der Markierung zu sehen, bewegen Sie im Track Timing den Mauszeiger darauf.

Interaktionen ansehen

Sehen Sie sich Nutzerinteraktionen im Track Interaktionen an, um mögliche Reaktionsprobleme aufzuspüren.

So rufen Sie Interaktionen auf:

1. Öffne die Entwicklertools, z. B. auf dieser Demoseite.
2. Öffnen Sie den Bereich Leistung und starten Sie eine Aufzeichnung.
3. Klicken Sie auf ein Element (Kaffee) und beenden Sie die Aufzeichnung.
4. Suchen Sie in der Zeitachse nach dem Track Interaktionen.

In diesem Beispiel zeigt der Track Interactions die Interaktion vom Typ Pointer. Interaktionen haben Schnurrhaare, die Eingabe- und Präsentationsverzögerungen an den Verarbeitungszeitgrenzen anzeigen. Bewegen Sie den Mauszeiger auf die Interaktion, um eine Kurzinfo mit Eingabeverzögerung, Verarbeitungszeit und Präsentationsverzögerung zu sehen.

Im Track Interaktionen werden auf dem Tab Zusammenfassung sowie in einer Kurzinfo, wenn der Mauszeiger auf den Punkt bewegt wird, außerdem Warnungen zu Interaktionen mit nächstem Paint (INP) für Interaktionen angezeigt, die länger als 200 Millisekunden dauern:

Der Track Interaktionen markiert die Interaktionen über 200 Millisekunden mit einem roten Dreieck in der oberen rechten Ecke.

GPU-Aktivität ansehen

Sehen Sie sich im Bereich GPU die GPU-Aktivität an.

Rasteraktivität ansehen

Sehen Sie sich im Abschnitt Raster die Rasteraktivität an.

Bilder pro Sekunde (fps) analysieren

Die Entwicklertools bieten zahlreiche Möglichkeiten, Bilder pro Sekunde zu analysieren:

• Im Bereich Frames sehen Sie, wie lange ein bestimmter Frame gedauert hat.
• Mit dem Messtool für die fps können Sie die fps während der Seite in Echtzeit einschätzen. Weitere Informationen finden Sie unter Bilder pro Sekunde mit dem FPS-Messtool in Echtzeit ansehen.

Der Bereich „Frames“

Im Bereich Frames sehen Sie genau, wie lange ein bestimmter Frame gedauert hat.

Bewegen Sie den Mauszeiger auf einen Frame, um eine Kurzinfo mit weiteren Informationen aufzurufen.

In diesem Beispiel wird eine Kurzinfo angezeigt, wenn Sie den Mauszeiger auf einen Frame bewegen.

Im Bereich Frames können vier Arten von Frames angezeigt werden:

1. Inaktiver Frame (weiß): Keine Änderungen
2. Frame (grün): Wird wie erwartet und rechtzeitig gerendert.
3. Teilweise dargestellter Frame (gelb mit einem spärlichen breiten Strichlinienmuster). Chrome war bestrebt, zumindest einige visuelle Updates rechtzeitig zu rendern. Zum Beispiel, wenn die Arbeit des Hauptthreads des Renderer-Prozesses (Canvas-Animation) sich verzögert, der Compositor-Thread (Scrollen) aber im Zeitablauf ist.
4. Gesetzter Frame (rot mit einem dichten durchgehenden Linienmuster): Chrome kann den Frame nicht in einer angemessenen Zeit rendern.

In diesem Beispiel sehen Sie eine Kurzinfo, wenn Sie den Mauszeiger auf einen nur teilweise dargestellten Frame bewegen.

Klicken Sie auf einen Frame, um auf dem Tab Summary (Zusammenfassung) weitere Informationen über diesen Frame aufzurufen. Entwicklertools zeichnen den ausgewählten Frame in Blau.

Netzwerkanfragen ansehen

Maximieren Sie den Abschnitt Netzwerk, um eine Abfolge der Netzwerkanfragen zu sehen, die während der Aufzeichnung aufgetreten sind.

Anfragen sind wie folgt farblich gekennzeichnet:

• HTML: Blau
• CSS: Lila
• JS: Gelb
• Bilder: Grün

Klicken Sie auf eine Anfrage, um weitere Informationen dazu auf dem Tab Zusammenfassung zu sehen. Im Beispiel oben werden auf dem Tab Zusammenfassung Informationen zur ausgewählten grünen Anfrage angezeigt.

Ein dunkelblaues Quadrat oben links in einer Anfrage bedeutet, dass es sich um eine Anfrage mit höherer Priorität handelt. Ein hellblaues Quadrat bedeutet, dass die Priorität niedriger ist. Im vorherigen Beispiel hat die ausgewählte Anfrage eine hohe Priorität und die blaue Anfrage darüber hat die höchste Priorität.

Der Abschnitt Zusammenfassung enthält die Felder Anfängliche Priorität und (endgültige) Priorität. Wenn sich ihre Werte unterscheiden, hat sich die Abrufpriorität der Anfrage während der Aufzeichnung geändert. Weitere Informationen finden Sie unter Das Laden von Ressourcen mit der Fetch Priority API optimieren.

Im vorherigen Beispiel wird die Anfrage für www.google.com durch eine Linie auf der linken Seite, einen Balken in der Mitte mit einem dunklen und einen hellen Teil und eine Linie auf der rechten Seite dargestellt. Im nächsten Screenshot ist die entsprechende Darstellung derselben Anfrage im Bereich Netzwerk auf dem Tab Timing zu sehen. So werden diese beiden Darstellungen einander gegenübergestellt:

• Die linke Zeile enthält alle Ereignisse bis zur Ereignisgruppe Connection Start (einschließlich). Mit anderen Worten: Es ist alles vor Request Sent, exklusiv.
• Der helle Teil des Balkens ist Request Sent und Waiting (TTFB).
• Der dunkle Teil des Balkens ist Content Download.
• In der rechten Zeile steht im Grunde, wie lange auf den Hauptthread gewartet wurde. Dies wird auf dem Tab Timing nicht angezeigt.

Dieses Beispiel zeigt die Balkendarstellung der www.google.com-Anfrage.

Dieses Beispiel zeigt die Darstellung der www.google.com-Anfrage auf dem Tab Timing.

Arbeitsspeichermesswerte ansehen

Klicken Sie das Kästchen Arbeitsspeicher an, um die Arbeitsspeichermesswerte der letzten Aufnahme aufzurufen.

In den Entwicklertools wird über dem Tab Zusammenfassung ein neues Arbeitsspeicher-Diagramm angezeigt. Unter dem NET-Diagramm befindet sich außerdem ein neues Diagramm namens HEAP. Das HEAP-Diagramm enthält dieselben Informationen wie die Zeile JS Heap im Arbeitsspeicher-Diagramm.

In diesem Beispiel sehen Sie Arbeitsspeichermesswerte über dem Tab Zusammenfassung.

Die farbigen Linien im Diagramm entsprechen den farbigen Kontrollkästchen über dem Diagramm. Deaktivieren Sie ein Kästchen, um diese Kategorie aus dem Diagramm auszublenden.

Im Diagramm wird nur die ausgewählte Region der Aufzeichnung angezeigt. Im vorherigen Beispiel zeigt das Diagramm Arbeitsspeicher nur die Arbeitsspeichernutzung für den Beginn der Aufzeichnung bis etwa 1.000 ms an.

Dauer eines Ausschnitts einer Aufnahme ansehen

Bei der Analyse eines Abschnitts wie Netzwerk oder Hauptbereich benötigen Sie manchmal eine genauere Schätzung, wie lange bestimmte Ereignisse gedauert haben. Halten Sie die Umschalttaste gedrückt, klicken und halten Sie sie gedrückt und ziehen Sie sie nach links oder rechts, um einen Teil der Aufnahme auszuwählen. Unten in deiner Auswahl wird in den Entwicklertools angezeigt, wie lange dieser Teil gedauert hat.

In diesem Beispiel gibt der Zeitstempel 488.53ms am unteren Rand des ausgewählten Teils an, wie lange dieser Teil gedauert hat.

Screenshot ansehen

Informationen zum Aktivieren von Screenshots finden Sie unter Screenshots während der Aufnahme erstellen.

Bewegen Sie den Mauszeiger auf die Zeitachsenübersicht, um einen Screenshot zu sehen, der zeigt, wie die Seite während der Aufnahme aussah. Die Zeitachsenübersicht ist der Abschnitt mit den Diagrammen CPU, FPS und NET.

Sie können sich auch Screenshots ansehen, indem Sie im Bereich Frames auf einen Frame klicken. In den Entwicklertools wird auf dem Tab Zusammenfassung eine kleine Version des Screenshots angezeigt.

Dieses Beispiel zeigt den Screenshot für den 195.5ms-Frame auf dem Tab Summary (Zusammenfassung), wenn Sie im Bereich Frames darauf klicken.

Klicken Sie auf dem Tab Zusammenfassung auf die Miniaturansicht, um den Screenshot zu vergrößern.

Im folgenden Beispiel wird ein vergrößerter Screenshot angezeigt, nachdem Sie auf dem Tab Zusammenfassung auf die entsprechende Miniaturansicht geklickt haben.

Ebeneninformationen ansehen

So rufen Sie Informationen zu erweiterten Ebenen für einen Frame auf:

1. Erweiterte Paint-Instrumentierung aktivieren
2. Wählen Sie im Bereich Frames einen Frame aus. Entwicklertools zeigen Informationen zu seinen Ebenen auf dem neuen Tab Layers neben dem Tab Ereignisprotokoll an.

Bewegen Sie den Mauszeiger auf eine Ebene, um sie im Diagramm zu markieren.

In diesem Beispiel wird die Ebene #39 hervorgehoben, wenn Sie den Mauszeiger darauf bewegen.

So verschieben Sie das Diagramm:

• Klicken Sie auf Schwenkenmodus , um sich entlang der X- und Y-Achse zu bewegen.
• Klicken Sie auf Drehmodus , um eine Rotation entlang der Z-Achse vorzunehmen.
• Klicken Sie auf Transformation zurücksetzen , um das Diagramm in seine ursprüngliche Position zurückzusetzen.

Sehen Sie sich die Ebenenanalyse in Aktion an:

Paint-Profiler ansehen

So rufen Sie erweiterte Informationen zu einem Paint-Ereignis auf:

1. Erweiterte Paint-Instrumentierung aktivieren
2. Wählen Sie im Main-Track ein Paint-Ereignis aus.

Rendering-Leistung mit dem Tab „Rendering“ analysieren

Mithilfe der Funktionen des Tabs Rendering können Sie die Rendering-Leistung Ihrer Seite visualisieren.

Öffnen Sie den Tab Rendering.

Bilder pro Sekunde mit dem FPS-Messtool in Echtzeit ansehen

Die Statistik für das Frame-Rendering ist ein Overlay, das oben rechts im Darstellungsbereich angezeigt wird. Er liefert eine Echtzeitschätzung der fps, während die Seite ausgeführt wird.

Weitere Informationen finden Sie unter Frame-Rendering-Statistiken.

Malereiereignisse in Echtzeit mit Paint Flashing ansehen

Verwenden Sie Farbblinkung, um eine Echtzeitansicht aller Farbereignisse auf der Seite zu erhalten.

Siehe Farbblinken.

Overlay von Ebenen mit Ebenenrahmen ansehen

Verwenden Sie Rahmen der Ebene (Layer Borders), um ein Overlay von Ebenengrenzen und Kacheln über der Seite zu sehen.

Weitere Informationen finden Sie unter Ebenenrahmen.

Probleme mit der Scrollleistung in Echtzeit erkennen

Unter Probleme mit der Scrollleistung können Sie Seitenelemente mit Ereignis-Listenern im Zusammenhang mit Scrollen identifizieren, die möglicherweise die Leistung der Seite beeinträchtigen. Die Entwicklertools skizzieren potenziell problematische Elemente in blaugrünen

Weitere Informationen finden Sie unter Leistungsprobleme beim Scrollen.