Referenz zu Leistungsfunktionen

Auf dieser Seite finden Sie eine umfassende Referenz zu den Chrome-Entwicklertools-Funktionen, die sich auf die Leistungsanalyse beziehen.

Eine Anleitung zum Analysieren der Leistung einer Seite mit den Chrome-Entwicklertools finden Sie unter Laufzeitleistung analysieren.

Bildschirm mit Live-Messwerten

Wenn Sie das Steuerfeld Leistung zum ersten Mal öffnen, wird der Bildschirm „Live-Messwerte“ angezeigt. Dort finden Sie eine sofortige Leistungsübersicht der aktuellen Seite anhand der drei Core Web Vitals.

Die Messwerte werden aktualisiert, wenn Sie mit der Seite interagieren und neue Seiten aufrufen. Dazu gehören auch clientseitige Soft-Navigationsvorgänge in Single-Page-Anwendungen, die durch ein SOFT NAV-Badge gekennzeichnet sind. So lassen sich Leistungsprobleme gut erkennen, insbesondere bei INP und CLS, wenn sie nur unter bestimmten Umständen auftreten. Wenn ein Leistungsproblem wiederholt auftritt, können Sie einen Trace aufzeichnen, um weitere Details zum Debuggen des zugrunde liegenden Problems zu erhalten.

Funktionen des Bildschirms mit Live-Messwerten

Der Bildschirm Live-Messwerte bietet neben den Messwerten auch die folgenden Funktionen:

• Felddaten aus CrUX, wenn sie im Bereich Felddaten aktiviert sind.
• Eine Zusammenfassung aller nennenswerten Unterschiede zwischen den lokalen und den Feldmesswerten.
• Das LCP-Element, das durch Bewegen des Mauszeigers darauf auf der Seite hervorgehoben werden kann.
• Details zum CLS-Cluster und INP-Typ
• Weitere Informationen zum Bewegen des Mauszeigers auf die Messwerte (z. B. LCP- und INP-Unterkomponenten und Feldhistogramme)
• Die Bereiche Interaktionen und Layout-Shifts, in denen der Verlauf von Interaktionen und Layout-Shifts aufgezeichnet wird.
• Im Bereich Feldmesswerte können die CrUX-Daten aktiviert werden. Außerdem finden Sie dort Details zum Zeitraum der Daten und können zwischen Ursprungs- und URL-Daten (sofern verfügbar) sowie zwischen Desktop- und mobilen Daten wechseln.
• Ein Bereich Umgebungseinstellungen mit Hinweisen dazu, welche Geräte-, CPU- und Netzwerkdrosselung basierend auf CrUX-Daten verwendet werden sollte.

Weitere Informationen finden Sie im Blogpost Monitor your local and real-user Core Web Vitals performance in DevTools.

Leistung aufzeichnen

Sie können die Laufzeit- oder Ladeleistung mit den Schaltflächen oben links oder unten rechts auf dem Bildschirm aufzeichnen:

Laufzeitleistung aufzeichnen

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

1. Rufen Sie die Seite auf, die Sie analysieren möchten.
2. Klicken Sie in den DevTools auf den Tab Leistung.
3. Klicken Sie auf Aufnehmen .
4. Interagiere mit der Seite. DevTools zeichnet alle Seitenaktivitäten auf, die durch Ihre Interaktionen ausgelöst werden.
5. Klicken Sie noch einmal auf Aufnehmen oder auf Beenden, um die Aufnahme zu beenden.

Ladeleistung aufzeichnen

Mit „Ladeleistung aufzeichnen“ können Sie die Leistung einer Seite während des Ladens analysieren.

1. Rufen Sie die Seite auf, die Sie analysieren möchten.
2. Öffnen Sie in den Entwicklertools den Bereich Leistung.
3. Klicken Sie auf Aufzeichnen und neu laden . DevTools ruft zuerst about:blank auf, um alle verbleibenden Screenshots und Traces zu löschen. Anschließend zeichnen die Entwicklertools Leistungsmesswerte auf, während die Seite neu geladen wird. Die Aufzeichnung wird einige Sekunden nach Abschluss des Ladevorgangs automatisch beendet.

Die DevTools zoomen automatisch auf den Teil der Aufzeichnung, in dem die meisten Aktivitäten stattgefunden haben.

In diesem Beispiel zeigt das Steuerfeld Leistung die Aktivität während des Seitenaufbaus.

Screenshots während der Aufnahme erstellen

Aktivieren Sie das Kästchen Screenshots, um während der Aufzeichnung einen Screenshot von jedem Frame zu erstellen.

Wenn Sie die Genauigkeit der visuellen Aufzeichnung innerhalb des Speicherbudgets anpassen möchten, öffnen Sie die Aufnahmeeinstellungen und wählen Sie im Drop-down-Menü Screenshot-Aufnahme eine Voreinstellung für die Framegröße und die maximale Anzahl aus.

Weitere Informationen zum Interagieren mit Screenshots

Automatische Speicherbereinigung während der Aufnahme erzwingen

Klicken Sie während der Aufzeichnung einer Seite auf Collect garbage mop, um die Garbage Collection zu erzwingen.

Aufnahmeeinstellungen anzeigen

Klicken Sie auf Aufzeichnungseinstellungen , um weitere Einstellungen für die Leistungserfassung in DevTools aufzurufen.

JavaScript-Beispiele deaktivieren

Standardmäßig werden im Haupttrack 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 . Siehe Aufnahmeeinstellungen anzeigen.
2. Aktivieren Sie das Kästchen JavaScript-Stichproben deaktivieren.
3. Nehmen Sie die Seite auf.

Die folgenden Screenshots zeigen den Unterschied zwischen dem Deaktivieren und Aktivieren von JavaScript-Beispielen. Der Haupttrack der Aufzeichnung ist viel kürzer, wenn die Stichprobenerhebung deaktiviert ist, da alle JavaScript-Aufrufstacks weggelassen werden.

In diesem Beispiel ist eine Aufzeichnung mit deaktivierten JS-Beispielen zu sehen.

Dieses Beispiel zeigt eine Aufzeichnung mit aktivierten JS-Stichproben.

Netzwerk während der Aufnahme drosseln

So drosseln Sie das Netzwerk während der Aufzeichnung:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Siehe Aufnahmeeinstellungen anzeigen.
2. Legen Sie für Netzwerk die gewünschte Drosselungsstufe fest.

Im Drop-down-Menü wird im Bereich Leistung möglicherweise auch eine Standardeinstellung für die Drosselung oder eine Voreinstellung empfohlen, die der Nutzererfahrung basierend auf Felddaten entspricht.

CPU während der Aufzeichnung drosseln

So drosseln Sie die CPU während der Aufzeichnung:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Siehe Aufnahmeeinstellungen anzeigen.
2. Legen Sie CPU auf die gewünschte Drosselungsstufe fest.

Die Drosselung hängt von den Funktionen Ihres Computers ab. Mit der Option 2x slowdown wird die CPU beispielsweise doppelt so langsam wie gewohnt ausgeführt. Die DevTools 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.

Im Drop-down-Menü wird im Bereich Leistung möglicherweise auch eine Standardeinstellung für die Drosselung oder eine Voreinstellung empfohlen, die der Nutzererfahrung basierend auf Felddaten entspricht.

CSS-Selektorstatistiken aktivieren

So rufen Sie die Statistiken Ihrer CSS-Regelselektoren während lang andauernder Stil neu berechnen-Ereignisse auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Siehe Aufnahmeeinstellungen anzeigen.
2. Setzen Sie ein Häkchen bei CSS-Selektorstatistiken aktivieren.

Weitere Informationen finden Sie unter Leistung von CSS-Selektoren während des Ereignisses „Recalculate Style“ analysieren.

Erweiterte Instrumentierung für das Rendern aktivieren

So rufen Sie detaillierte Informationen zur Paint-Instrumentierung auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Siehe Aufnahmeeinstellungen anzeigen.
2. Setzen Sie ein Häkchen bei Erweiterte Paint-Instrumentierung aktivieren.

Informationen zur Interaktion mit den Paint-Informationen finden Sie unter Ebenen ansehen und Paint-Profiler ansehen.

Benutzerdefinierte Tracks anzeigen

Ermöglicht benutzerdefinierte Tracks und Zusammenfassungen von benutzerdefinierten Trackgruppen in der Trace-Zusammenfassung, die mit der DevTools Extensibility API angepasst werden können.

Vorherige Aufnahme löschen

Nachdem Sie eine Aufnahme erstellt haben, drücken Sie Aufnahme löschen , um die Aufnahme aus dem Bereich Leistung zu entfernen.

Leistungsaufzeichnung analysieren

Nachdem Sie die Laufzeitleistung oder die Ladeleistung aufgezeichnet haben, finden Sie im Bereich Leistung viele Daten, mit denen Sie die Leistung der gerade ausgeführten Aktionen analysieren können.

Aufzeichnung mit Anmerkungen versehen und teilen

Weitere Informationen finden Sie unter Leistungsergebnisse kommentieren und teilen.

Umsetzbare Informationen abrufen

Der Bereich Leistung enthält Leistungsstatistiken, die auch in Lighthouse-Berichten angezeigt werden. Anhand dieser Statistiken können Sie die Leistung verbessern und eine geführte Analyse der folgenden Leistungsprobleme erhalten, z. B. LCP- und INP-Unterkomponenten, Probleme bei der Erkennung von LCP-Anfragen, Drittanbieter sowie veraltete und duplizierte JavaScript-Ressourcen. Eine vollständige Liste finden Sie in der Dokumentation zu Performance Insights.

Die Insights werden als „Bestanden“ angezeigt, wenn keine Probleme erkannt werden. Auf dem Tab Statistiken werden sie unten im minimierten Bereich Bestandene Insights aufgeführt. Die Statistiken, die nicht bestanden haben, werden in eigenen Abschnitten aufgeführt.

So nutzen Sie Statistiken:

1. Leistungsaufzeichnung erstellen
2. Öffnen Sie in der linken Seitenleiste des Bereichs Leistung den Tab Statistiken, maximieren Sie verschiedene Abschnitte und bewegen Sie den Mauszeiger auf Elemente und klicken Sie darauf. Im Bereich Leistung werden die entsprechenden Ereignisse im Trace hervorgehoben.

In der Aufnahme navigieren

Wenn Sie den Mauszeiger auf einen Leistungstrace bewegen, wird im Bereich Leistung Folgendes angezeigt:

• Zeigt eine vertikale Markierung an, die sich über den gesamten Leistungstrace erstreckt, wenn Sie den Mauszeiger auf die Zeitachsenübersicht bewegen.
• Hebt einen Bereich in der Zeitachsenübersicht hervor, wenn Sie den Mauszeiger auf Elemente im Haupttrack bewegen.

Wenn Sie Ihre Leistungsaufzeichnung genauer untersuchen möchten, können Sie einen Teil einer Aufzeichnung auswählen, in einem langen Flame-Diagramm scrollen, heran- und herauszoomen und mithilfe von Navigationspfaden zwischen Zoomstufen wechseln.

Tastenkombinationen verwenden

Wenn Sie Tastenkombinationen verwenden möchten, um schnell in der Aufzeichnung zu navigieren, müssen Sie zuerst die gewünschte Art der Tastaturnavigation auswählen.

Klicken Sie rechts oben im Bereich auf Hilfe Tastenkombinationen anzeigen und wählen Sie eine der folgenden Optionen aus:

• Klassisch: Zoomen mit dem Mausrad (Touchpad nach oben oder unten) und vertikales Scrollen mit Umschalttaste + Mausrad.
• Modern: Vertikales Scrollen mit dem Mausrad, horizontales Scrollen mit Umschalttaste + Mausrad und Zoomen mit Befehlstaste/Strg + Mausrad.

Im Dialogfeld „Tastenkombinationen“ finden Sie auch eine Übersicht der verfügbaren Tastenkombinationen.

Abschnitt der Aufnahme auswählen

Unter der Aktionsleiste des Bereichs Leistung und oben in der Aufzeichnung sehen Sie den Bereich Zeitachse – Übersicht mit den Diagrammen CPU und NETZWERK.

Wenn du einen Teil einer Aufnahme auswählen möchtest, klicke und halte die Maustaste gedrückt und ziehe dann nach links oder rechts über die Zeitachsenübersicht.

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

1. Fokussieren Sie den Haupttrack oder einen seiner Nachbarn.
2. Verwenden Sie die Tasten W, A, S und D, um heranzuzoomen, nach links zu gehen, herauszuzoomen und nach rechts zu gehen.

So wählen Sie einen Teil mit einem Trackpad aus:

1. Bewegen Sie den Mauszeiger auf den Bereich Zeitachsenübersicht oder auf einen der Tracks (Haupttrack und die benachbarten Tracks).
2. Wischen Sie mit zwei Fingern nach oben, um herauszuzoomen, nach links, um sich nach links zu bewegen, nach unten, um heranzuzoomen, und nach rechts, um sich nach rechts zu bewegen.

Breadcrumbs erstellen und zwischen Zoomstufen wechseln

In der Zeitachsenübersicht können Sie mehrere verschachtelte Navigationspfade nacheinander erstellen, die Zoomstufen erhöhen und dann frei zwischen den Zoomstufen wechseln.

So erstellen und verwenden Sie Breadcrumbs:

1. Wählen Sie in der Zeitachse einen Teil der Aufzeichnung aus.
2. Bewegen Sie den Mauszeiger auf die Auswahl und klicken Sie auf den Button N ms zoom_in. Die Auswahl wird maximiert, um die Zeitachsenübersicht zu füllen. Oben in der Zeitachsenübersicht wird eine Navigationspfadkette erstellt.
3. Wiederholen Sie die beiden vorherigen Schritte, um eine weitere verschachtelte Navigationspfad-Komponente zu erstellen. Sie können die Breadcrumbs weiter verschachteln, solange der Auswahlbereich größer als 5 Millisekunden ist.
4. Wenn Sie zu einer bestimmten Zoomstufe springen möchten, klicken Sie oben in der Zeitachsenübersicht auf den entsprechenden Navigationspfad.

Wenn Sie die untergeordneten Elemente eines Navigationspfads entfernen möchten, rechtsklicken Sie auf den übergeordneten Navigationspfad und wählen Sie Untergeordnete Navigationspfade entfernen aus.

Langes Flame-Diagramm scrollen

Wenn Sie ein langes Flammen-Diagramm im Haupt-Track oder einem seiner Nachbartracks scrollen möchten, klicken Sie auf das Diagramm und halten Sie die Maustaste gedrückt. Ziehen Sie dann in eine beliebige Richtung, bis das, wonach Sie suchen, angezeigt wird.

Irrelevante Scripts im Flame-Diagramm ignorieren

Um sich besser auf Ihren Code zu konzentrieren, können Sie irrelevante Scripts der Ignorierliste hinzufügen.

Führen Sie einen der folgenden Schritte aus, um Skripts zu ignorieren:

• Klicken Sie in der oberen Aktionsleiste auf Komprimieren Dialogfeld für die Einstellung der Ignorierliste anzeigen und geben Sie einen regulären Ausdruck in das Eingabefeld ein. Die neue Regel wird während der Eingabe auf das Flame-Diagramm angewendet.
• Rechtsklicken Sie auf ein Script und wählen Sie Script zur Ignorierliste hinzufügen aus. Im Bereich Leistung wird dieses Script der Liste im Dialogfeld Dialogfeld für die Einstellung der Ignorierliste anzeigen für compress hinzugefügt.

Das Feld wird automatisch minimiert, wenn solche Scripts zu viele Verschachtelungen enthalten, und als On ignore list (REGULAR_EXPRESSION) gekennzeichnet.

Im Dialogfeld compress Dialogfeld für die Einstellung der Ignorierliste anzeigen können Sie die Regeln der Ignorierliste aktivieren und deaktivieren.

Wenn Sie ein Script aus der Ignorierliste entfernen möchten, rechtsklicken Sie im Flame-Diagramm darauf und wählen Sie Script aus Ignorierliste entfernen aus. Alternativ können Sie im Dialogfeld Einstellungen für Ignorierliste anzeigen (Komprimieren) den Mauszeiger darauf bewegen und auf Entfernen (Löschen) klicken.

In den DevTools werden die Regeln für die Ignorierliste gespeichert, die Sie unter Einstellungen Einstellungen > Ignorierliste hinzufügen.

Wenn Sie sich nur auf eigene Skripts konzentrieren möchten, setzen Sie ein Häkchen bei check_box Drittanbieter-Skripts ausblenden. Im Bereich Leistung werden Drittanbieter-Scripts ausgegraut.

Suchaktivitäten

Sie können die Aktivitäten im Haupttrack und die Anfragen im Netzwerktrack durchsuchen.

So öffnen Sie ein Suchfeld unten im Bereich Leistung:

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

In diesem Beispiel wird ein regulärer Ausdruck im Suchfeld unten verwendet, um alle Aktivitäten zu finden, die mit E beginnen.

So durchlaufen Sie Aktivitäten, die Ihrer Anfrage entsprechen:

• Klicken Sie auf die Schaltflächen expand_less Zurück oder expand_more Weiter.
• Drücken Sie Umschalt + Eingabetaste, um die vorherige Option auszuwählen, oder Eingabetaste, um die nächste Option auszuwählen.

Im Bereich Leistung wird ein Kurzinfo-Text für die im Suchfeld ausgewählte 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 einen regulären Ausdruck in Ihrer Abfrage zu verwenden.

Wenn Sie das Suchfeld ausblenden möchten, klicken Sie auf Abbrechen.

Reihenfolge von Tracks ändern und Tracks ausblenden

Wenn Sie den Leistungs-Trace übersichtlicher gestalten möchten, können Sie im Konfigurationsmodus für Tracks die Reihenfolge der Tracks ändern und irrelevante Tracks ausblenden.

So verschiebst und blendest du Tracks aus:

1. Um den Konfigurationsmodus aufzurufen, rechtsklicken Sie auf einen Tracknamen und wählen Sie Tracks konfigurieren aus.
2. Klicke auf den Aufwärtspfeil arrow_upward oder den Abwärtspfeil arrow_downward, um einen Titel nach oben oder unten zu verschieben. Klicken Sie auf visibility_off, um sie auszublenden.
3. Klicken Sie anschließend unten auf Konfiguration der Tracks abschließen, um den Konfigurationsmodus zu beenden.

Sehen Sie sich das Video an, um diesen Workflow in Aktion zu sehen.

Im Bereich Leistung wird die Spurkonfiguration für neue Traces gespeichert, aber nicht in den nächsten DevTools-Sitzungen.

Aktivität im Hauptthread ansehen

Verwenden Sie den Track Main, um die Aktivitäten im Hauptthread der Seite anzusehen.

Klicken Sie auf ein Ereignis, um auf dem Tab Zusammenfassung weitere Informationen dazu aufzurufen, einschließlich, aber nicht beschränkt auf: Dauer (und Selbstdauer), Link zur entsprechenden Zeile im Quellskript, Ursprungs-URL (mit einem Entitätsnamen, falls bekannt), Stacktrace, falls vorhanden, und Aufschlüsselung der Zeitangaben in einem Kreisdiagramm.

Im Bereich Leistung wird das ausgewählte Ereignis blau umrandet.

In diesem Beispiel werden auf dem Tab Zusammenfassung weitere Informationen zum Funktionsaufrufereignis get angezeigt.

Zwischen eigenen und Drittanbieterereignissen unterscheiden

Eine übermäßige Abhängigkeit von Code von Drittanbietern kann die Ladegeschwindigkeit beeinträchtigen. Im Bereich Leistung können Sie visuell zwischen eigenen und Drittanbieterereignissen im Trace unterscheiden. So können Sie fundiertere Entscheidungen treffen, ob Sie Drittanbietercode reduzieren oder den Ladevorgang zurückstellen möchten, um die Inhalte Ihrer Seite zu priorisieren.

So konzentrieren Sie sich nur auf die Leistung von selbst erhobenem Code:

1. Achten Sie darauf, dass im Leistungstrace oder auf dem Tab Statistiken nichts ausgewählt ist. Klicken Sie dazu auf einen leeren Bereich im Trace.
2. Klicken Sie in der Aktionsleiste oben auf das Kästchen check_box Drittanbieter dimmen. Im Bereich Leistung werden Ereignisse, die mit Drittanbietern zusammenhängen, im Leistungs-Trace ausgegraut. Nur die Ereignisse von Erstanbietern bleiben hervorgehoben.

Ereignisse mit der Tabelle „Eigene und von Drittanbietern“ hervorheben

Wenn Sie in der Zeitachse einen Bereich auswählen und keines der Ereignisse ausgewählt ist, wird auf dem Tab Zusammenfassung eine Tabelle Erstanbieter / Drittanbieter mit den jeweiligen Übertragungsgrößen und Hauptthread-Zeiten der folgenden Elemente angezeigt:

• Erstanbieter-Entität, die mit einem 1st party-Logo gekennzeichnet ist.
• Alle erkannten Drittanbieterentitäten im ausgewählten Bereich, nicht markiert.
• Erweiterungen, die mit Extension-Logos gekennzeichnet sind.
• Andere [unattributed]-Entitäten.

Wenn Sie den Mauszeiger auf die Entitäten in der Tabelle bewegen, werden die zugehörigen Ereignisse im Trace hervorgehoben und die restlichen ausgegraut. Wenn Sie die Ereignisse einer Einheit weiterhin hervorheben möchten, wählen Sie sie in der Tabelle aus. Wenn Sie die Hervorhebung entfernen möchten, klicken Sie auf einen leeren Bereich im Trace.

Wenn Sie Aktivitäten öffnen möchten, die nach dieser Einheit auf dem Tab Bottom-up gruppiert sind, bewegen Sie den Mauszeiger in der Tabelle auf die Einheit und klicken Sie daneben auf account_tree Bottom-up.

Flame-Diagramm lesen

Im Bereich Leistung wird die Aktivität des Hauptthreads in einem Flame-Diagramm dargestellt. Die x-Achse stellt die Aufzeichnung im Zeitverlauf dar. Die Y-Achse stellt den Aufrufstack dar. Die Ereignisse oben verursachen die Ereignisse unten.

In diesem Beispiel sehen Sie ein Flammen-Diagramm im Haupt-Track. Ein click-Ereignis hat einen anonymen Funktionsaufruf verursacht. Diese Funktion hat wiederum onEndpointClick_ aufgerufen, die handleClick_ aufgerufen hat usw.

Im Bereich Leistung werden Scripts zufällige Farben zugewiesen, um das Flame-Diagramm aufzuteilen und besser lesbar zu machen. Im vorherigen Beispiel sind Funktionsaufrufe aus einem Skript hellblau dargestellt. Aufrufe aus einem anderen Script sind hellrosa. Das dunklere Gelb steht für Scripting-Aktivitäten und das violette Ereignis für Rendering-Aktivitäten. Diese dunkelgelben und violetten Ereignisse sind in allen Aufnahmen konsistent.

Lange Aufgaben werden außerdem mit einem roten Dreieck hervorgehoben. Der Teil, der länger als 50 Millisekunden dauert, ist rot schattiert:

In diesem Beispiel hat die Aufgabe mehr als 400 Millisekunden gedauert. Daher ist der Teil, der die letzten 350 Millisekunden darstellt, rot schattiert, die ersten 50 Millisekunden jedoch nicht.

Außerdem werden im Main-Track Informationen zu CPU-Profilen angezeigt, die mit den Console-Funktionen profile() und profileEnd() gestartet und beendet wurden. Wenn Sie console.profileEnd() in Ihrem Code oder in der Konsole aufrufen, wird automatisch das Steuerfeld Leistung geöffnet und der aufgezeichnete Trace angezeigt.

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

Ereignisinitiatoren erfassen

Auf dem Hauptpfad können Pfeile angezeigt werden, die die folgenden Initiatoren und die von ihnen verursachten Ereignisse verbinden:

• Ungültigkeit von Stil oder Layout -> Stile neu berechnen oder Layout
• Animationsframe anfordern –> Animationsframe ausgelöst
• Callback bei Inaktivität anfordern -> Callback bei Inaktivität auslösen
• Timer installieren –> Timer ausgelöst
• WebSocket erstellen -> WebSocket-Handshake senden… und WebSocket-Handshake erhalten oder WebSocket schließen
• postTask planen –> postTask ausführen oder postTask abbrechen

Wenn Sie die Pfeile sehen möchten, suchen Sie im Flame-Diagramm nach einem Initiator oder dem von ihm verursachten Ereignis und wählen Sie ihn aus.

Wenn der Tab „Zusammenfassung“ ausgewählt ist, werden Links vom Typ Initiator für für Initiatoren und Links vom Typ Initiiert von für die von ihnen verursachten Ereignisse angezeigt. Klicke darauf, um zwischen den entsprechenden Ereignissen zu wechseln.

Funktionen und ihre untergeordneten Elemente im Flame-Diagramm ausblenden

Um das Flammen-Diagramm im Hauptthread übersichtlicher zu gestalten, können Sie ausgewählte Funktionen oder ihre untergeordneten Elemente ausblenden:

1. Klicken Sie im Haupttrack mit der rechten Maustaste auf eine Funktion und wählen Sie eine der folgenden Optionen aus oder drücken Sie die entsprechende Tastenkombination:

   • Funktion ausblenden (H)
   • Untergeordnete ausblenden (C)
   • Wiederkehrende untergeordnete Einträge ausblenden (R)
   • Untergeordnete Elemente zurücksetzen (U)
   • Trace zurücksetzen (T)
   • Script zur Ignorierliste hinzufügen (I)

   

   Neben dem Funktionsnamen mit ausgeblendeten untergeordneten Elementen wird ein Drop-down-Button arrow_drop_down angezeigt.

2. Wenn Sie die Anzahl der ausgeblendeten untergeordneten Elemente sehen möchten, bewegen Sie den Mauszeiger auf den Drop-down-Button arrow_drop_down.

   

3. Wenn Sie eine Funktion mit ausgeblendeten untergeordneten Elementen oder das gesamte Flammen-Diagramm zurücksetzen möchten, wählen Sie die Funktion aus und drücken Sie U oder rechtsklicken Sie auf eine beliebige Funktion und wählen Sie Trace zurücksetzen aus.

Skripts im Flame-Diagramm ignorieren

Wenn Sie ein Script zur Ignorierliste hinzufügen möchten, rechtsklicken Sie im Diagramm auf ein Script und wählen Sie Script zur Ignorierliste hinzufügen aus.

Im Diagramm werden ignorierte Scripts minimiert, als Auf der Ignorierliste gekennzeichnet und den Regeln für Benutzerdefinierte Ausschlüsse in den Einstellungen Einstellungen > Ignorierliste hinzugefügt. Ignorierte Scripts werden gespeichert, bis Sie sie entweder aus dem Trace oder aus den benutzerdefinierten Ausschlussregeln entfernen.

Aktivitäten in einer Tabelle ansehen

Nachdem Sie eine Seite aufgezeichnet haben, müssen Sie sich nicht nur auf den Haupttrack verlassen, um Aktivitäten zu analysieren. Die DevTools bieten außerdem drei Tabellenansichten zum Analysieren von Aktivitäten. Jede Ansicht bietet eine andere Perspektive auf die Aktivitäten:

• Wenn Sie die Stammaktivitäten sehen möchten, die die meiste Arbeit verursachen, verwenden Sie den Tab Aufrufbaum.
• Wenn Sie die Aktivitäten sehen möchten, für die am meisten Zeit aufgewendet wurde, verwenden Sie den Tab Bottom-up.
• Wenn Sie die Aktivitäten in der Reihenfolge sehen möchten, in der sie während der Aufzeichnung stattgefunden haben, verwenden Sie den Tab Ereignisprotokoll.

Sie können in einer der drei Tabellen (und in der Tabelle für eigene / Drittanbieterdaten auf dem Tab Zusammenfassung) auf ein Element klicken, um die entsprechenden Ereignisse im Trace hervorzuheben und die anderen Elemente abzudunkeln, während Sie den Leistungstrace durchsuchen.

Damit Sie schneller finden, wonach Sie suchen, gibt es auf allen drei Tabs neben der Filterleiste Schaltflächen für die erweiterte Filterung:

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

In jeder Tabellenansicht im Bereich Leistung werden Links für Aktivitäten wie Funktionsaufrufe angezeigt. Um Ihnen bei der Fehlersuche zu helfen, sucht DevTools nach den entsprechenden Funktionsdeklarationen in Quelldateien. Wenn die entsprechenden Source Maps vorhanden und aktiviert sind, finden die DevTools außerdem automatisch die Originaldateien.

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

Root-Aktivitäten

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

Root-Aktivitäten sind solche, die den Browser dazu veranlassen, etwas zu tun. Wenn Sie beispielsweise auf eine Seite klicken, löst der Browser eine Event-Aktivität als Stammaktivität aus. Das Event kann dann dazu führen, dass ein Handler ausgeführt wird.

Im Flammen-Diagramm des Haupt-Tracks befinden sich die Stammaktivitäten oben. Auf den Tabs Aufrufstruktur und Ereignisprotokoll sind Stammaktivitäten die Elemente auf oberster Ebene.

Ein Beispiel für Stammaktivitäten finden Sie auf dem Tab „Aufrufbaum“.

Tab „Baumansicht ‚Aufrufe‘“

Auf dem Tab Aufrufbaum können Sie sehen, welche Stammaktivitäten die meiste Arbeit verursachen.

Auf dem Tab Aufrufstruktur werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Informationen zum Auswählen von Teilen einer Aufnahme finden Sie unter Teil einer Aufnahme auswählen.

In diesem Beispiel sind die Elemente auf der obersten Ebene in der Spalte Aktivität, z. B. Event, Paint und Composite Layers, Stammaktivitäten. Die Schachtelung stellt den Aufrufstack dar. In diesem Beispiel hat die Event die Function Call verursacht, die button.addEventListener verursacht hat, die b verursacht hat usw.

Eigene Zeit gibt die Zeit an, die direkt für diese Aktivität aufgewendet wurde. Gesamtzeit steht für die Zeit, die für diese Aktivität oder eine ihrer untergeordneten Aktivitäten aufgewendet wurde.

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

Verwenden Sie das Feld Filter, um Ereignisse nach Aktivitätsnamen zu filtern.

Standardmäßig ist das Menü Gruppierung auf Keine Gruppierung festgelegt. Im Menü Gruppierung können Sie die Aktivitätstabelle nach verschiedenen Kriterien sortieren.

Tab „Bottom-up“

Auf dem Tab Bottom-up sehen Sie, welche Aktivitäten 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. Weitere Informationen zum Auswählen von Abschnitten finden Sie unter Abschnitt einer Aufnahme auswählen.

Im Flammen-Chart des Haupt-Tracks dieses Beispiels sehen Sie, dass fast die gesamte Zeit für die Ausführung der drei Aufrufe von wait() aufgewendet wurde. Die wichtigste Aktivität auf dem Tab Bottom-up ist daher wait. Im Flammen-Diagramm sind die gelben Bereiche unter den Aufrufen von wait tatsächlich Tausende von Minor GC-Aufrufen. Auf dem Tab Bottom-up ist die nächstteuerste Aktivität Minor GC.

Die Spalte Self Time (Eigenzeit) enthält die aggregierte Zeit, die direkt in dieser Aktivität verbracht wurde, über alle Vorkommen hinweg.

In der Spalte Gesamtzeit wird die aggregierte Zeit angezeigt, die für diese Aktivität oder eine ihrer untergeordneten Aktivitäten aufgewendet wurde.

Tabelle des umfangreichsten Stacks

Klicken Sie rechts auf den Tabs Aufrufbaum oder Bottom-up auf right_panel_open Schwersten Stack anzeigen, um die Tabelle Schwerster Stack einzublenden.

In dieser Tabelle sehen Sie, welche untergeordneten Elemente der ausgewählten Aktivität am längsten für die Ausführung gebraucht haben. Bewegen Sie den Mauszeiger auf ein Element in der Tabelle, um das entsprechende Ereignis im Haupttrack hervorzuheben. Die anderen Ereignisse werden dann abgeblendet.

So können Sie im Leistungs-Trace die verschachtelten Aktivitäten aus dem Aufrufstapel, die am meisten Zeit in Anspruch nehmen, visuell finden.

Tab „Ereignisprotokoll“

Auf dem Tab Ereignisprotokoll können Sie sich die Aktivitäten in der Reihenfolge ansehen, 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. Informationen zum Auswählen von Teilen einer Aufnahme finden Sie unter Teil einer Aufnahme auswählen.

Die Spalte Startzeit gibt den Zeitpunkt an, zu dem die Aktivität im Verhältnis zum Beginn der Aufzeichnung gestartet wurde. Die Startzeit 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 (Eigenzeit) gibt die Zeit an, die direkt für diese Aktivität aufgewendet wurde.

Die Spalte Gesamtzeit gibt die Zeit an, die direkt für diese Aktivität oder eine ihrer untergeordneten Aktivitäten aufgewendet wurde.

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

Verwenden Sie das Feld Filter, um Aktivitäten nach Namen zu filtern.

Über das Menü Dauer können Sie alle Aktivitäten herausfiltern, die weniger als 1 ms oder 15 ms gedauert haben. Standardmäßig ist das Menü Dauer auf Alle eingestellt, d. h. es werden alle Aktivitäten angezeigt.

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

Leistungsmarkierungen ansehen

In einem Overlay mit vertikalen Linien über dem Leistungsverlauf sehen Sie wichtige Leistungsmarkierungen, z. B.:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded-Ereignis (DCL)
• Onload-Ereignis (L)

Bewegen Sie den Mauszeiger auf die Markierungsnamen unten im Trace, um den Zeitstempel zu sehen.

Benutzerdefinierte Zeitangaben ansehen

Im Track Timings (Zeitangaben) finden Sie benutzerdefinierte Leistungsmarkierungen wie:

• performance.mark()-Anrufe. Unten sehen Sie eine einzelne Markierung mit Tooltip bei 813,44 ms, die mit Starting to run JavaScript gekennzeichnet ist.
• performance.measure()-Anrufe. Unten sehen Sie einen gelben Zeitraum mit der Bezeichnung Langsamer Aufruf.

Wählen Sie eine Markierung aus, um auf dem Tab Zusammenfassung weitere Details zu sehen, einschließlich Zeitstempel, Gesamtzeit, Eigenzeit und detail-Objekt. Bei performance.mark()- und performance.measure()-Aufrufen werden auf dem Tab auch Stacktraces angezeigt.

Interaktionen ansehen

Sehen Sie sich die Nutzerinteraktionen im Track Interaktionen an, um potenzielle Probleme mit der Reaktionsfähigkeit zu finden.

So rufen Sie Interaktionen auf:

1. Öffnen Sie 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 wird im Track Interaktionen die Interaktion Pointer angezeigt. Interaktionen haben Antennen, die Eingabe- und Präsentationsverzögerungen an den Verarbeitungsgrenzen angeben. Bewegen Sie den Mauszeiger auf die Interaktion, um eine Kurzinfo mit der Eingabeverzögerung, der Verarbeitungszeit und der Präsentationsverzögerung aufzurufen.

Im Track Interaktionen werden auch Warnungen zu Interaction to Next Paint (INP) für Interaktionen angezeigt, die länger als 200 Millisekunden dauern. Diese Warnungen finden Sie auf dem Tab Zusammenfassung und in einer Kurzinfo, wenn Sie den Mauszeiger darauf bewegen:

Im Track Interaktionen werden Interaktionen, die länger als 200 Millisekunden dauern, mit einem roten Dreieck in der oberen rechten Ecke markiert.

Layoutverschiebungen ansehen

Layoutverschiebungen im Track Layoutverschiebungen ansehen Verschiebungen werden als violette Rauten dargestellt und basierend auf ihrer Nähe auf der Zeitachse in Clustern (violette Linien) gruppiert.

Wenn Sie ein Element hervorheben möchten, das eine Layoutverschiebung im Darstellungsbereich verursacht hat, bewegen Sie den Mauszeiger auf das entsprechende Diamantsymbol.

Wenn Sie weitere Informationen zu einem oder mehreren Layoutverschiebungen auf dem Tab Zusammenfassung mit Zeitangaben, Werten, Elementen und potenziellen Ursachen sehen möchten, klicken Sie auf das entsprechende Diamantsymbol oder den entsprechenden Cluster.

Weitere Informationen finden Sie unter Cumulative Layout Shift (CLS).

Animationen ansehen

Animationen auf dem Track Animationen ansehen. Animationen werden nach den entsprechenden CSS-Eigenschaften oder -Elementen benannt, z. B. transform oder my-element. Nicht zusammengesetzte Animationen sind oben rechts mit roten Dreiecken gekennzeichnet.

Wählen Sie eine Animation aus, um auf dem Tab Zusammenfassung weitere Details aufzurufen, einschließlich der Gründe für Compositing-Fehler.

GPU-Aktivität ansehen

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

Rasteraktivität ansehen

Rasteraktivitäten können Sie im Bereich Thread-Pool ansehen.

Bilder pro Sekunde (FPS) analysieren

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

• Im Bereich Frames sehen Sie, wie lange ein bestimmter Frame gedauert hat.
• Mit dem FPS-Zähler können Sie die FPS in Echtzeit schätzen, während die Seite ausgeführt wird. Weitere Informationen finden Sie unter Bilder pro Sekunde in Echtzeit mit dem FPS-Zähler ansehen.

Abschnitt „Frames“

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

Bewegen Sie den Mauszeiger auf einen Frame, um eine Kurzinfo mit weiteren Informationen dazu 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. Rahmen (grün) Wurde wie erwartet und rechtzeitig gerendert.
3. Teilweise angezeigter Frame (gelb mit einem spärlichen, breiten Strichmuster): Chrome hat sein Bestes getan, um zumindest einige visuelle Aktualisierungen rechtzeitig zu rendern. Beispielsweise, wenn die Arbeit des Hauptthreads des Renderer-Prozesses (Canvas-Animation) verspätet ist, der Compositor-Thread (Scrollen) aber rechtzeitig ist.
4. Verworfener Frame (rot mit einem dichten Muster aus durchgezogenen Linien): Chrome kann den Frame nicht in angemessener Zeit rendern.

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

Klicken Sie auf einen Frame, um auf dem Tab Zusammenfassung weitere Informationen zu diesem Frame aufzurufen. In den Entwicklertools wird der ausgewählte Frame blau umrandet.

Netzwerkanfragen ansehen

Maximieren Sie den Bereich Netzwerk, um ein Wasserfalldiagramm der Netzwerkanfragen zu sehen, die während der Leistungsaufzeichnung aufgetreten sind.

Neben dem Namen des Tracks Network (Netzwerk) befindet sich eine Legende mit farblich gekennzeichneten Anfragetypen.

Anfragen, die das Rendering blockieren, sind oben rechts mit einem roten Dreieck gekennzeichnet.

Bewegen Sie den Mauszeiger auf eine Anfrage, um eine Kurzinfo mit folgenden Informationen aufzurufen:

• Die URL der Anfrage und die Gesamtzeit, die für die Ausführung benötigt wurde.
• Priorität oder eine Änderung der Priorität, z. B. Medium -> High.
• Gibt an, ob die Anfrage Render-blocking ist oder nicht.
• Eine Aufschlüsselung der Anfragezeiten, die später beschrieben wird.

Wenn Sie auf eine Anfrage klicken, wird im Netzwerk-Track ein Pfeil vom Initiator zur Anfrage gezeichnet.

Außerdem wird im Bereich Leistung der Tab Zusammenfassung mit weiteren Informationen zur Anfrage angezeigt, einschließlich der Felder Anfangspriorität und (endgültige) Priorität. Wenn sich die Werte unterscheiden, hat sich die Abrufpriorität der Anfrage während der Aufzeichnung geändert. Weitere Informationen finden Sie unter Ressourcenladevorgänge mit der Fetch Priority API optimieren.

Auf dem Tab Zusammenfassung wird auch eine Aufschlüsselung der Zeitangaben für die Anfrage angezeigt.

In diesem 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 einem hellen Teil und eine Linie auf der rechten Seite (–|) dargestellt.

Falls vorhanden, wird auf dem Tab Zusammenfassung auch eine Aufschlüsselung der Serverzeiten für Netzwerkanfragen angezeigt, die serverseitige Rendering-Technologien implementieren. Für diese Anfragen werden die Daten im Bereich Leistung aus dem Server-Timing-Antwortheader übernommen.

Eine weitere Aufschlüsselung der Zeitangaben finden Sie auf dem Tab Netzwerk. Klicken Sie mit der rechten Maustaste auf die Anfrage im Track Netzwerk oder auf die URL auf dem Tab Zusammenfassung und dann auf Im Netzwerkbereich anzeigen. Die Entwicklertools leiten Sie zum Bereich Netzwerk weiter und wählen die entsprechende Anfrage aus. Öffnen Sie den Tab Timing.

So lassen sich die beiden Aufschlüsselungen einander zuordnen:

• Die linke Linie (|–) umfasst alles bis einschließlich der Ereignisgruppe Connection start. Mit anderen Worten: alles vor Request Sent.
• Der helle Teil des Balkens ist Request sent und Waiting for server response.
• Der dunkle Teil des Balkens ist Content download.
• Die rechte Linie (–|) gibt die Zeit an, die mit Warten auf den Hauptthread verbracht wurde. Auf dem Tab Netzwerk > Timing wird sie nicht angezeigt.

Speichermesswerte ansehen

Aktivieren Sie das Kästchen Arbeitsspeicher, um Arbeitsspeichermesswerte aus der letzten Aufzeichnung aufzurufen.

In den Entwicklertools wird über dem Tab Zusammenfassung ein neues Diagramm Arbeitsspeicher angezeigt. Unter dem NET-Diagramm gibt es auch ein neues Diagramm namens HEAP. Das HEAP-Diagramm enthält dieselben Informationen wie die JS-Heap-Linie im Arbeitsspeicher-Diagramm.

In diesem Beispiel werden Arbeitsspeichermesswerte über dem Tab Zusammenfassung angezeigt.

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

Im Diagramm wird nur der ausgewählte Bereich der Aufnahme angezeigt. Im vorherigen Beispiel wird im Diagramm Arbeitsspeicher nur die Arbeitsspeichernutzung für den Beginn der Aufzeichnung bis etwa zur Marke von 1.000 ms angezeigt.

Dauer eines Teils einer Aufnahme ansehen

Bei der Analyse eines Bereichs wie Netzwerk oder Main benötigen Sie manchmal eine genauere Schätzung der Dauer bestimmter Ereignisse. Halten Sie die Umschalttaste gedrückt, klicken Sie und halten Sie die Maustaste gedrückt und ziehen Sie nach links oder rechts, um einen Teil der Aufnahme auszuwählen. Unten in der Auswahl wird angezeigt, wie lange dieser Teil gedauert hat.

In diesem Beispiel gibt der Zeitstempel 488.53ms unten im ausgewählten Bereich an, wie lange dieser Bereich gedauert hat.

Screenshot ansehen

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

Bewegen Sie den Mauszeiger auf die Zeitachsenübersicht, um einen Screenshot der Seite zu sehen, wie sie zu diesem Zeitpunkt der Aufzeichnung aussah. Die Zeitachse enthält die Diagramme CPU, FPS und NET.

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

In diesem Beispiel wird der Screenshot für den 195.5ms-Frame auf dem Tab Zusammenfassung angezeigt, wenn Sie im Bereich Frames darauf klicken.

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

In diesem Beispiel sehen Sie einen vergrößerten Screenshot, nachdem Sie auf dem Tab Zusammenfassung auf die entsprechende Miniaturansicht geklickt haben.

Ebeneninformationen aufrufen

So rufen Sie erweiterte Ebeneninformationen zu einem Frame auf:

1. Erweiterte Paint-Instrumentierung aktivieren.
2. Wählen Sie im Bereich Frames einen Frame aus. In den DevTools werden Informationen zu den Ebenen auf dem neuen Tab Ebenen neben dem Tab Ereignisprotokoll angezeigt.

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

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

So verschieben Sie das Diagramm:

• Klicken Sie auf Schwenkmodus , um sich entlang der X- und Y-Achse zu bewegen.
• Klicken Sie auf Rotationsmodus , um das Modell entlang der Z-Achse zu drehen.
• Klicken Sie auf Transformation zurücksetzen , um das Diagramm auf seine ursprüngliche Position zurückzusetzen.

So funktioniert die Ebenenanalyse:

Farbprofiler ansehen

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

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

Rendering-Leistung mit dem Tab „Rendering“ analysieren

Mit den Funktionen auf dem Tab Rendering können Sie die Rendering-Leistung Ihrer Seite visualisieren.

Öffnen Sie den Tab Rendering.

Mit dem FPS-Zähler die Bilder pro Sekunde in Echtzeit anzeigen lassen

Die Statistiken zum Rendern von Frames sind ein Overlay, das oben rechts im Viewport angezeigt wird. Sie bietet eine Echtzeitschätzung der FPS während der Ausführung der Seite.

Weitere Informationen finden Sie unter Frame-Rendering-Statistiken.

Malereignisse in Echtzeit mit „Farbe blinken lassen“ ansehen

Mit Paint Flashing können Sie alle Paint-Ereignisse auf der Seite in Echtzeit sehen.

Weitere Informationen finden Sie unter Farbe blinkt.

Überlagerung von Ebenen mit „Layer Borders“ ansehen

Mit Layer Borders (Ebenenränder) können Sie ein Overlay mit Ebenenrändern und Kacheln auf der Seite anzeigen lassen.

Weitere Informationen finden Sie unter Ebenengrenzen.

Probleme mit der Scrollleistung in Echtzeit finden

Verwenden Sie Scrolling Performance Issues (Probleme mit der Scrollleistung), um Elemente der Seite zu identifizieren, die Event-Listener im Zusammenhang mit dem Scrollen haben, die die Leistung der Seite beeinträchtigen können. In den Entwicklertools werden die potenziell problematischen Elemente in Türkis dargestellt.

Weitere Informationen finden Sie unter Probleme mit der Scrollleistung.