Referenz zu Leistungsfeatures

Diese Seite ist eine umfassende Referenz zu DevTools-Features, die sich auf die Analyse der Leistung beziehen.

Ein schritt-für-Schritt-Tutorial zum Analysieren der Leistung einer Seite mit dem Leistungstool finden Sie unter Analysieren der Laufzeitleistung (Tutorial).

Die Bilder auf dieser Seite zeigen DevTools, die in einem eigenen, dedizierten Fenster abgedockt wurden. Weitere Informationen zum Ausdocken von DevTools finden Sie unter Ausdocken von DevTools in ein separates Fenster unter Ändern der DevTools-Platzierung (Ausdocken, Andocken nach unten, Andocken nach links).

Ausführlicher Inhalt:

• Öffnen des Leistungstools
• Leistung aufzeichnen
  • Aufzeichnen der Laufzeitleistung
  • Aufzeichnen der Ladeleistung
  • Erfassen von Screenshots während der Aufzeichnung
  • Erzwingen der Garbage Collection während der Aufzeichnung
  • Aufzeichnungseinstellungen anzeigen
  • Deaktivieren von JavaScript-Beispielen
  • Drosseln des Netzwerks während der Aufzeichnung
  • Drosseln der CPU während der Aufzeichnung
  • Aktivieren von CSS-Selektorstatistiken
  • Aktivieren der erweiterten Farbinstrumentierung
• Kommentieren und Freigeben einer Aufzeichnung
  • Speichern und Freigeben einer Aufzeichnung
  • Laden einer Aufzeichnung
• Löschen der vorherigen Aufzeichnung
• Analysieren einer Leistungsaufzeichnung
  • Abrufen von umsetzbaren Erkenntnissen
  • Navigieren in der Aufzeichnung
    • Verwenden von Tastenkombinationen zum Navigieren
    • Auswählen eines Teils einer Aufzeichnung
    • Zoomen von Teilen einer Aufzeichnung und Wechseln zwischen Zoomstufen
    • Scrollen eines langen Flammendiagramms
  • Suchaktivitäten
  • Ändern der Reihenfolge der Spuren und Ausblenden der Spuren
  • Anzeigen Standard Threadaktivität
  • Lesen des Flammendiagramms
  • Nachverfolgen von Ereignisinitiatoren
  • Ausblenden von Funktionen und deren untergeordneten Elementen im Flammendiagramm
    • Skripts im Flammendiagramm ignorieren
  • Anzeigen von Aktivitäten in einer Tabelle
    • Stammaktivitäten
    • Registerkarte "Unten nach oben"
    • Die Registerkarte "Aufrufstruktur"
    • Registerkarte "Ereignisprotokoll"
  • Anzeigen von Leistungsmarkern
  • Anzeigen benutzerdefinierter Zeitangaben
  • Anzeigen von Interaktionen
  • Ansichtslayoutverschiebungen
  • Animationen anzeigen
  • Anzeigen der GPU-Aktivität
  • Rasteraktivität anzeigen
  • Analysieren von Frames pro Sekunde (FPS)
    • Der Abschnitt "Frames"
  • Anzeigen von Netzwerkanforderungen
  • Anzeigen von Speichermetriken
  • Anzeigen der Dauer eines Teils einer Aufzeichnung
  • Screenshot anzeigen
  • Anzeigen von Ebeneninformationen
  • Anzeigen des Farbprofilers
  • Anzeigen von CSS-Selektorstatistiken
  • Anzeigen von Nachrichten zwischen Fenstern, iFrames und dedizierten Workern
• Analysieren der Renderingleistung mit dem Renderingtool
  • Anzeigen von Frames pro Sekunde in Echtzeit mit der FPS-Verbrauchseinheit
  • Anzeigen von Malereignissen in Echtzeit mit Paint Flashing
  • Anzeigen einer Überlagerung von Ebenen mit Ebenenrahmen
  • Ermitteln von Problemen mit der Scrollleistung in Echtzeit
  • Deaktivieren lokaler Schriftarten
• Visualisieren von Speicherverlusten (Leistungstool: Kontrollkästchen "Arbeitsspeicher")

Öffnen des Leistungstools

Um die Abschnitte auf dieser Seite zu verwenden, öffnen Sie das Leistungstool in DevTools:

1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Überprüfen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

2. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Leistung aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ().

Leistung aufzeichnen

In den folgenden Abschnitten wird beschrieben, wie Sie die Leistung einer Webseite in DevTools aufzeichnen.

Aufzeichnen der Laufzeitleistung

So analysieren Sie die Leistung einer Webseite, während sie ausgeführt wird (und nicht während des Ladens):

1. Wechseln Sie zu der Webseite, die Sie analysieren möchten, z. B. zur Fotogalerie-Demo.

2. Öffnen Sie in DevTools das Leistungstool .

3. Klicken Sie auf die Schaltfläche Datensatz ().

   

4. Interagieren Sie für eine Weile mit der Seite. DevTools zeichnet alle Seitenaktivitäten auf, die als Ergebnis Ihrer Interaktionen auftreten.

5. Klicken Sie erneut auf Aufzeichnen . Oder klicken Sie auf Beenden , um die Aufzeichnung zu beenden.

   Das Leistungstool zeigt die Aufzeichnung an.

Aufzeichnen der Ladeleistung

So analysieren Sie die Leistung einer Webseite während des Ladens (und nicht während der Ausführung):

1. Wechseln Sie zu der Webseite, die Sie analysieren möchten, z. B. zur Fotogalerie-Demo.

2. Öffnen Sie in DevTools das Leistungstool .

3. Klicken Sie auf die Schaltfläche Seite aktualisieren ():

   

   DevTools zeichnet Leistungsmetriken auf, während die Seite aktualisiert wird, und beendet dann die Aufzeichnung einige Sekunden nach Abschluss des Ladevorgangs automatisch. Anschließend zeigt DevTools die Aufzeichnung an und vergrößert automatisch den Teil der Aufzeichnung, in dem die meisten Aktivitäten aufgetreten sind:

   

Erfassen von Screenshots während der Aufzeichnung

Um einen Screenshot jedes Frames während der Aufzeichnung zu erfassen, aktivieren Sie das Kontrollkästchen Screenshots :

Informationen zur Interaktion mit Screenshots finden Sie weiter unten unter Anzeigen eines Screenshots.

Erzwingen der Garbage Collection während der Aufzeichnung

Um die Garbage Collection zu erzwingen, während Sie eine Seite aufzeichnen, klicken Sie auf die Schaltfläche Garbage Sammeln ("):

Aufzeichnungseinstellungen anzeigen

Um weitere Einstellungen im Zusammenhang mit der Erfassung von Leistungsaufzeichnungen durch DevTools verfügbar zu machen, klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (). Kontrollkästchen und Dropdownlisten werden oben im Leistungstool angezeigt:

Deaktivieren von JavaScript-Beispielen

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

1. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen ().

2. Aktivieren Sie das Kontrollkästchen JavaScript-Beispiele deaktivieren .

3. Nehmen Sie eine Aufzeichnung der Seite auf.

Die folgenden beiden Abbildungen zeigen den Unterschied zwischen dem Deaktivieren und Aktivieren von JavaScript-Beispielen. Der Hauptabschnitt der Aufzeichnung ist viel kürzer, wenn die JavaScript-Stichprobenerstellung deaktiviert ist, da die Aufzeichnung die JavaScript-Aufruflisten auslässt.

Beispiel für eine Aufzeichnung, wenn JS-Beispiele deaktiviert sind:

Beispiel für eine Aufzeichnung, wenn JS-Beispiele aktiviert sind:

Drosseln des Netzwerks während der Aufzeichnung

So drosseln Sie das Netzwerk während der Aufzeichnung:

1. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (). Weitere Informationen finden Sie oben unter Anzeigen von Aufzeichnungseinstellungen.

2. Legen Sie Network auf die gewünschte Drosselungsebene fest.

   Auf der Registerkarte des Netzwerktools wird ein Warnsymbol angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

Drosseln der CPU während der Aufzeichnung

So drosseln Sie die CPU während der Aufzeichnung:

1. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (). Weitere Informationen finden Sie oben unter Anzeigen von Aufzeichnungseinstellungen.

2. Legen Sie die CPU auf die gewünschte Drosselungsebene fest.

   Auf der Registerkarte Leistungstool wird ein Warnsymbol angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

Die Drosselung ist relativ zu den Funktionen Ihres Computers. Die Option 2-fache Verlangsamung führt beispielsweise dazu, dass Ihre CPU doppelt so langsam wie normal arbeitet. DevTools simulieren die CPUs mobiler Geräte nicht wirklich, da sich die Architektur mobiler Geräte stark von der Architektur von Desktops und Laptops unterscheidet.

Aktivieren von CSS-Selektorstatistiken

So zeigen Sie die Statistiken Ihrer CSS-Regelselektoren während zeitintensiver Neuberechnungsformatereignisse an:

1. Klicken Sie auf die Schaltfläche Einstellungen erfassen (). Weitere Informationen finden Sie oben unter Anzeigen von Aufzeichnungseinstellungen.

2. Aktivieren Sie das Kontrollkästchen CSS-Auswahlstatistik aktivieren .

Weitere Informationen finden Sie unter Analysieren der CSS-Selektorleistung während der Neuberechnung von Formatvorlagenereignissen.

Aktivieren der erweiterten Farbinstrumentierung

So zeigen Sie eine detaillierte Farbinstrumentierung an:

1. Klicken Sie auf die Schaltfläche Einstellungen erfassen (). Weitere Informationen finden Sie oben unter Anzeigen von Aufzeichnungseinstellungen.

2. Aktivieren Sie das Kontrollkästchen Erweiterte Farbinstrumentierung (langsam) aktivieren.

Informationen zur Interaktion mit den Farbinformationen finden Sie unter Anzeigen von Ebeneninformationen unten und Ansicht des Farbprofilers weiter unten.

Kommentieren und Freigeben einer Aufzeichnung

Sobald eine Leistungsablaufverfolgung aufgezeichnet wurde, können Sie sie analysieren und kommentieren, um Ihre Ergebnisse zu teilen.

Um eine Aufzeichnung mit Anmerkungen zu versehen, öffnen Sie die Registerkarte Anmerkungen in der Randleiste des Leistungstools . Wenn die Randleiste nicht sichtbar ist, klicken Sie auf die Schaltfläche Randleiste anzeigen (").

Die Registerkarte Anmerkungen in der Randleiste enthält anfänglich Anweisungen zum Hinzufügen von Anmerkungen. Nachdem Sie Anmerkungen erstellt haben, wie unten gezeigt, werden auf der Registerkarte Ihre vorhandenen Anmerkungen aufgelistet, und Sie können sie löschen.

Es gibt mehrere Möglichkeiten, eine Anmerkung hinzuzufügen:

• Beschriften eines Elements: Um ein Element in der Leistungsablaufverfolgung zu bezeichnen, doppelklicken Sie auf das Element, geben Sie die Bezeichnung in das Textfeld ein, und drücken Sie dann die EINGABETASTE.

• Verbinden sie zwei Elemente: Um einen Pfeil zwischen zwei Elementen in der Leistungsablaufverfolgung zu zeichnen, doppelklicken Sie auf das erste Element, klicken Sie auf das Pfeilsymbol daneben, und klicken Sie dann auf das zweite Element.

• Beschriften eines Zeitbereichs: Um einen beliebigen Zeitbereich in der Leistungsablaufverfolgung zu zeichnen und zu bezeichnen, halten Sie die UMSCHALTTASTE gedrückt, ziehen Sie vom Anfang eines Zeitbereichs bis zum Ende, geben Sie die Bezeichnung in das angezeigte Textfeld ein, und drücken Sie dann die EINGABETASTE.

Öffnen Sie beispielsweise die Webseite Aktivitätsregisterkarten-Demo in einem neuen Fenster oder einer neuen Registerkarte, erstellen Sie eine Leistungsaufzeichnung, und führen Sie dann die drei oben genannten Aktionen aus. Ergebnis:

In diesem Beispiel gibt es Folgendes:

• Drei Anmerkungen.
• Eine Pfeilanmerkung, die zwei Anmerkungen verbindet.
• Ein mit Anmerkungen versehener, rosa hervorgehobener Zeitbereich.

Auf der Registerkarte Anmerkungen wird die Anzahl der Anmerkungen neben dem Namen der Registerkarte angezeigt. in diesem Beispiel 5.

Um eine Anmerkung zu löschen, zeigen Sie auf der Registerkarte Anmerkungen darauf, und klicken Sie dann daneben auf die Schaltfläche Löschen .

Wählen Sie zum Ausblenden von Anmerkungen aus der Leistungsablaufverfolgung unten auf der Registerkarte Anmerkungen die Option Anmerkungen ausblenden aus.

Speichern und Freigeben einer Aufzeichnung

Wenn Sie eine Aufzeichnung als Datei auf Ihrem Gerät speichern und später für Ihre kommentierten Leistungsergebnisse freigeben möchten, klicken Sie in der Aktionsleiste oben im Leistungstool auf die Schaltfläche Profil speichern (), und wählen Sie dann Ablaufverfolgung speichern aus.

Wählen Sie alternativ Ablaufverfolgung ohne Anmerkungen speichern aus.

Anstatt oben auf die Schaltfläche Profil speichern () zu klicken, können Sie mit der rechten Maustaste auf einen Titel einer Aufzeichnung klicken und dann Profil speichern auswählen:

Laden einer Aufzeichnung

Um eine Aufzeichnung aus einer Datei zu laden, klicken Sie in der Aktionsleiste oben im Leistungstool auf die Schaltfläche Profil laden ().

Das Leistungstool zeigt Anmerkungen an, wenn sie in der Ablaufverfolgung vorhanden sind.

Oder klicken Sie mit der rechten Maustaste auf das Leistungstool , und wählen Sie dann Profil laden aus:

Sie können mit der rechten Maustaste auf eine vorhandene Aufzeichnung oder auf den Bildschirm klicken, der im Leistungstool angezeigt wird, wenn keine Aufzeichnungen vorhanden sind.

Löschen der vorherigen Aufzeichnung

Klicken Sie nach dem Erstellen einer Aufzeichnung auf die Schaltfläche Aufzeichnung löschen (), um diese Aufzeichnung aus dem Leistungstool zu entfernen:

Analysieren einer Leistungsaufzeichnung

Nachdem Sie die Laufzeitleistung oder die Auslastung aufgezeichnet haben, zeigt das Leistungstool viele Daten zur Aufzeichnung an. Verwenden Sie die aufgezeichneten Daten, um die Leistung Ihrer Webseite zu analysieren.

Abrufen von umsetzbaren Erkenntnissen

Das Leistungstool extrahiert verwertbare Erkenntnisse aus den aufgezeichneten Leistungsdaten. Diese Erkenntnisse sind Möglichkeiten, die Leistung Ihrer Website zu verbessern. Zu den Erkenntnissen gehören:

• INP nach Phase
• LCP nach Phase
• LCP-Anforderungsermittlung
• Täter für Layoutverschiebungen
• Rendern einer Blockierungsanforderung
• Netzwerkabhängigkeitsstruktur
• Verbessern der Bildbereitstellung
• Dokumentanforderungslatenz
• Schriftanzeige
• Optimieren des Viewports für Mobilgeräte
• Optimieren der DOM-Größe
• 3. Parteien
• CSS-Selektorkosten
• Erzwungener Reflow
• Verwenden einer effizienten Cachelebensdauer

Die Erkenntnisse konzentrieren sich auf die Verbesserung der Core Web Vitals-Metriken und auf die Optimierung, wie schnell die Webseite geladen und gerendert wird.

Nachdem Sie ein Profil im Leistungstool aufgezeichnet haben, wird auf der Registerkarte Erkenntnisse in der Randleiste die Liste der umsetzbaren Erkenntnisse angezeigt, die für die aufgezeichneten Leistungsdaten gelten. Informationen zum Anzeigen der Liste der Erkenntnisse, die nicht für das Profil gelten, finden Sie im Abschnitt Übergebene Erkenntnisse .

So verwenden Sie die Erkenntnisse:

1. Erstellen Sie oben eine Leistungsaufzeichnung pro Datensatzleistung.

2. Wählen Sie in der linken Randleiste des Leistungstools die Registerkarte Erkenntnisse aus, erweitern Sie verschiedene Abschnitte, und zeigen Sie auf Elemente, und klicken Sie darauf. Das Leistungstool hebt die entsprechenden Ereignisse in der Ablaufverfolgung hervor:

   

   Wenn die Randleiste und die Registerkarte Erkenntnisse nicht sichtbar sind, klicken Sie auf die Schaltfläche Seitenleiste anzeigen (").

Navigieren in der Aufzeichnung

Um Ihre Leistungsaufzeichnung genau zu überprüfen, können Sie einen Teil einer Aufzeichnung auswählen, in einem langen Flammendiagramm scrollen, vergrößern und verkleineren und breadcrumbs verwenden, um zwischen Zoomstufen zu springen.

Verwenden von Tastenkombinationen zum Navigieren

Wenn Sie tastenkombinationen verwenden möchten, um schnell in der Aufzeichnung zu navigieren, wählen Sie zunächst Ihren bevorzugten Stil der Tastaturnavigation aus.

Klicken Sie in der oberen rechten Ecke des Leistungstools auf die Schaltfläche Verknüpfungen anzeigen (), und wählen Sie dann die Optionsschaltfläche Modern oder Klassisch aus. Im Dialogfeld Tastenkombinationen werden die verfügbaren Tastenkombinationen für die ausgewählte Zuordnungsoption angezeigt.

Wenn die Optionsschaltfläche Modern ausgewählt ist:

• Zum Zoomen: BEFEHL/STRG +Mausrad.
• Zum vertikalen Scrollen: Mausrad.
• Zum horizontalen Scrollen: UMSCHALT +Mausrad.

Mit ausgewählter Optionsschaltfläche "Klassisch ":

• Zum Zoomen: Mausrad oder Touchpad nach oben oder unten.
• Zum vertikalen Bildlauf: UMSCHALT +Mausrad.
• Horizontaler Bildlauf:NACH-LINKS-TASTE|NACH-RECHTS +

Sie können auch nach links und rechts schwenken, indem Sie die A - und D-Taste drücken und durch Drücken der W - oder S-Taste zoomen.

Siehe auch:

• Leistungsbereich: Aktivieren Sie einen Wechsel zu einer alternativen Zeitleiste Navigationsoption in Experimentelle Features in Microsoft Edge DevTools.

Auswählen eines Teils einer Aufzeichnung

Oben in der Aufzeichnung wird der Abschnitt Zeitachsenübersicht angezeigt, einschließlich der CPU- und NET-Diagramme (auf der rechten Seite angezeigt):

Um einen Teil einer Aufzeichnung auszuwählen, klicken und ziehen Sie in der Zeitachsenübersicht horizontal:

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

1. Konzentrieren Sie den Hauptpfad oder einen seiner Nachbarn.

2. Verwenden Sie die Tasten W, A, S, D , um zu vergrößern, nach links zu bewegen, zu verkleineren bzw. nach rechts zu bewegen.

So wählen Sie einen Teil mithilfe eines Trackpads aus:

1. Zeigen Sie auf den Abschnitt Übersicht der Zeitachse oder auf einen der Spuren (Main und seine Nachbarn).

2. Wischen Sie mit zwei Fingern nach oben, um zu verkleinern, wischen Sie nach links, um nach links zu navigieren, wischen Sie zum Vergrößern nach unten, und wischen Sie nach rechts, um nach rechts zu navigieren.

Sie können einen Teil einer Aufzeichnung mit einer Maus, Tastatur oder einem Trackpad auswählen.

Maus:

So wählen Sie einen Teil einer Aufzeichnung mit der Maus aus:

• Ziehen Sie die Maus nach links oder rechts über die Übersicht. Die Übersicht ist der Abschnitt, der die CPU- und NET-Diagramme enthält:

Um ein langes Flammendiagramm im Hauptabschnitt oder in einem der benachbarten Abschnitte zu scrollen, klicken und halten Sie, während Sie nach oben und unten ziehen. Ziehen Sie nach links oder rechts, um zu verschieben, welcher Teil der Aufzeichnung ausgewählt ist.

Tastatur:

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

1. Wählen Sie den Hintergrund des Hauptabschnitts aus, oder wählen Sie den Hintergrund eines Abschnitts aus, der sich neben dem Hauptabschnitt befindet, z. B. Interaktionen, Netzwerk oder GPU. Dieser Tastaturworkflow funktioniert nur, wenn einer dieser Abschnitte den Fokus hat.

2. Drücken W Sie oder S , um zu vergrößern oder zu verkleineren. Drücken A Sie oder D , um nach links oder rechts zu navigieren.

Trackpad:

So wählen Sie einen Teil einer Aufzeichnung mithilfe eines Trackpads aus:

1. Zeigen Sie auf den Abschnitt Übersicht oder details . Der Abschnitt Übersicht ist der Bereich, der die FPS-, CPU- und NET-Diagramme enthält. Der Abschnitt Details ist der Bereich, der den Hauptabschnitt und den Abschnitt Interaktionen enthält.

2. Wischen Sie mit zwei Fingern nach oben, um zu verkleinern, oder zum Vergrößern nach unten. Wischen Sie mit zwei Fingern nach links, um nach links zu navigieren, oder nach rechts, um nach rechts zu navigieren.

Zoomen von Teilen einer Aufzeichnung und Wechseln zwischen Zoomstufen

In der Zeitachsenübersicht können Sie teile Ihrer Aufzeichnung nacheinander vergrößern und bei jedem Schritt Breadcrumbs erstellen, sodass Sie dann zwischen diesen Zoomstufen wechseln können.

So zoomen Sie einen Teil ihrer Aufzeichnung und verwenden Breadcrumbs:

1. Wählen Sie in der Zeitachsenübersichteinen Teil der Aufzeichnung aus (oben).

2. Zeigen Sie auf die Auswahl, und klicken Sie dann auf die Schaltfläche N ms ():

   

   Die Auswahl wird erweitert, um die Zeitachsenübersicht auszufüllen. Eine Kette von Breadcrumbs wird am Anfang der Übersicht über die Zeitachse erstellt.

3. Wiederholen Sie die beiden vorherigen Schritte, um eine weitere geschachtelte Breadcrumb zu erstellen. Sie können Breadcrumbs weiterhin schachteln, solange der Auswahlbereich größer als 5 Millisekunden ist.

4. Um zu einer ausgewählten Zoomstufe zu springen, klicken Sie oben in der Zeitachsenübersicht auf das entsprechende Breadcrumb in der Kette.

Um die untergeordneten Elemente eines Breadcrumb zu entfernen, klicken Sie mit der rechten Maustaste auf das übergeordnete Breadcrumb, und wählen Sie dann Untergeordnete Breadcrumbs entfernen aus:

Scrollen eines langen Flammendiagramms

Um ein langes Flammendiagramm auf der Hauptspur oder einem seiner Nachbarn zu scrollen, klicken und halten Sie es gedrückt, und ziehen Sie dann in eine beliebige Richtung, bis das gesuchte Element angezeigt wird.

Suchaktivitäten

Sie können die Aktivitäten in der Hauptspur und Anforderungen in der Netzwerkspur durchsuchen.

So öffnen Sie das Suchfeld am unteren Rand des Leistungstools :

1. Drücken Sie STRG+F (Windows, Linux) oder BEFEHL+F (macOS).

   Das Feld Suchen wird unten im Leistungstool angezeigt:

   

2. Geben Sie im Feld Suchen eine Abfrage ein, z. B. "Stil neu berechnen".

   Die übereinstimmenden Aktivitäten werden während der Eingabe im Hauptabschnitt hervorgehoben, und die Gesamtzahl der Übereinstimmungen wird im Suchfeld angezeigt. Die erste übereinstimmende Aktivität ist ausgewählt, blau umrandet:

   

So navigieren Sie zwischen den Aktivitäten, die Ihrer Abfrage entsprechen:

• Um die nächste Aktivität auszuwählen, drücken Sie die EINGABETASTE , oder klicken Sie auf die Schaltfläche Weiter ().

• Um die vorherige Aktivität auszuwählen, drücken Sie UMSCHALT+EINGABETASTE , oder klicken Sie auf die Schaltfläche Zurück ().

Das Leistungstool zeigt eine QuickInfo für die Aktivität an, die im Suchfeld ausgewählt ist.

So ändern Sie die Abfrageeinstellungen:

• Wenn Sie einen regulären Ausdruck in Ihrer Abfrage verwenden möchten, klicken Sie auf die Schaltfläche Reguläre Ausdrücke aktivieren ( Wenn Sie die Schaltfläche Regex auswählen und dann eingeben ^E.* , findet jede Aktivität, die mit dem Buchstaben E beginnt.

• Um die Groß-/Kleinschreibung bei der Abfrage zu berücksichtigen, klicken Sie auf die Schaltfläche Suche zwischen Groß- und Kleinschreibung aktivieren (

Um das Suchfeld auszublenden, klicken Sie auf die Schaltfläche Abbrechen .

Ändern der Reihenfolge der Spuren und Ausblenden der Spuren

Um die Leistungsablaufverfolgung zu entrümpen, können Sie die Reihenfolge der Spuren ändern und die irrelevanten spuren im Nachverfolgungskonfigurationsmodus ausblenden.

So verschieben sie Spuren und blenden sie aus:

1. Um in den Konfigurationsmodus zu wechseln, klicken Sie mit der rechten Maustaste auf einen Titelnamen, und wählen Sie dann Titel konfigurieren aus.

2. Klicken Sie auf die Schaltfläche Nachverfolgung nach oben () oder auf die Schaltfläche Nachverfolgen nach unten verschieben ( verschieben), um eine Spur nach oben oder unten zu verschieben. Klicken Sie auf die Schaltfläche Spur ausblenden ("), um sie auszublenden.

3. Klicken Sie mit der rechten Maustaste auf den Titel, und wählen Sie dann Konfiguration abschließen aus.

Das Leistungstool wendet Ihre Nachverfolgungskonfiguration auch auf neue Ablaufverfolgungen an, es sei denn, Sie schließen DevTools und öffnen sie dann erneut.

Anzeigen Standard Threadaktivität

Verwenden Sie den Hauptabschnitt, um die Aktivität anzuzeigen, die im Standard Thread der Seite aufgetreten ist:

Wählen Sie ein Ereignis aus, um weitere Informationen dazu auf der Registerkarte Zusammenfassung anzuzeigen. DevTools beschreibt das ausgewählte Ereignis:

DevTools stellt Standard Threadaktivität mit einem Flammendiagramm dar:

Die x-Achse stellt die Aufzeichnung im Zeitverlauf dar. Die y-Achse stellt die Aufrufliste dar. Ein Ereignis, das sich in der Nähe des oberen Bereichs befindet, verursacht die Ereignisse, die sich darunter befinden. In der vorherigen Abbildung hat z. B. ein input -Ereignis ausgelöstFunction Call, das eine anonyme Funktion ausgeführt hat, die und dann populateGalleryaufruftfilterByCamera. Die populateGallery Funktion hat dann DOM-Änderungen vorgenommen, indem sie aufruft set innerHTML.

DevTools weist Skripts zufällige Farben zu. In der vorherigen Abbildung sind Funktionsanforderungen von einem Skript fuchsia (violett-rosa) gefärbt. Das dunkle gelb steht für die Skriptaktivität, und das violette Ereignis stellt die Renderingaktivität dar. Diese dunkleren gelben und violetten Ereignisse sind für alle Aufzeichnungen konsistent.

Wenn Sie das ausführliche Flammendiagramm von JavaScript-Anforderungen ausblenden möchten, finden Sie oben weitere Informationen unter Deaktivieren von JavaScript-Beispielen. Wenn JavaScript-Beispiele deaktiviert sind, werden nur allgemeine Ereignisse angezeigt, z Event: input . B. und Function Call aus der vorherigen Abbildung.

Lesen des Flammendiagramms

Das Leistungstool stellt Standard Threadaktivität in einem Flammendiagramm dar. Die x-Achse stellt die Aufzeichnung im Zeitverlauf dar. Die y-Achse stellt die Aufrufliste dar. Die Ereignisse oben verursachen die folgenden Ereignisse.

Das Leistungstool weist Skripts zufällige Farben zu, um das Flammendiagramm aufzuschlüsseln und besser lesbar zu machen.

Lange Aufgaben sind auch mit einem roten Dreieck hervorgehoben, und der Teil über 50 Millisekunden ist rot schattiert.

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

Informationen zum Ausblenden des ausführlichen Flammendiagramms von JavaScript-Aufrufen finden Sie unter Deaktivieren von JavaScript-Beispielen. Wenn JS-Beispiele deaktiviert sind, werden nur die allgemeinen Ereignisse wie Event (click) und Function Callangezeigt.

Nachverfolgen von Ereignisinitiatoren

Die Hauptspur kann Pfeile anzeigen, die die folgenden Initiatoren und die von ihnen verursachten Ereignisse verbinden:

• Stil- oder Layoutinvalidierung :> Formatvorlagen oder Layoutneu berechnen
• Anfordern eines Animationsframes ->Animationsframe ausgelöst
• Anforderungs-Idle Callback ->Fire Idle Callback
• Installieren des Timers –>Timer ausgelöst
• WebSocket ->Send... erstellen und WebSocket-Handshake empfangen oder WebSocket zerstören
• Schedule postTask ->Fire postTask or Abort postTask

Um die Pfeile anzuzeigen, suchen Sie entweder einen Initiator oder das von diesem verursachte Ereignis im Flammendiagramm, und wählen Sie ihn aus.

Wenn diese Option ausgewählt ist, zeigt die Registerkarte ZusammenfassungInitiator für Links für Initiatoren und Initiiert von Links für die von ihnen verursachten Ereignisse an. Klicken Sie darauf, um zwischen den entsprechenden Ereignissen zu springen.

Ausblenden von Funktionen und deren untergeordneten Elementen im Flammendiagramm

Um das Flammendiagramm im Hauptthread zu entrümten, können Sie ausgewählte Funktionen oder deren untergeordnete Elemente ausblenden:

1. Klicken Sie in der Hauptspur mit der rechten Maustaste auf eine Funktion, und wählen Sie eine der folgenden Optionen aus, oder drücken Sie die entsprechende Verknüpfung:

   • Funktion ausblenden (H)
   • Untergeordnete Elemente ausblenden (C)
   • Sich wiederholende untergeordnete Elemente ausblenden (R)
   • Untergeordnete Elemente zurücksetzen (U)
   • Ablaufverfolgung zurücksetzen (T)
   • Hinzufügen eines Skripts zum Ignorieren der Liste (I)

   Neben dem Funktionsnamen mit ausgeblendeten untergeordneten Elementen wird eine Dropdownschaltfläche "Zahl ausgeblendet " () angezeigt.

2. Um die Anzahl der ausgeblendeten untergeordneten Elemente anzuzeigen, zeigen Sie auf die Dropdownschaltfläche Zahl ausgeblendet ().

3. Um eine Funktion mit ausgeblendeten untergeordneten Elementen oder dem gesamten Flammendiagramm zurückzusetzen, wählen Sie die Funktion aus, und drücken Sie U , oder klicken Sie mit der rechten Maustaste auf eine beliebige Funktion, und wählen Sie Ablaufverfolgung zurücksetzen bzw. zurücksetzen aus.

Skripts im Flammendiagramm ignorieren

Um der Ignorierenliste ein Skript hinzuzufügen, klicken Sie mit der rechten Maustaste auf ein Skript im Diagramm, und wählen Sie Add script to ignore list (Skript zum Ignorieren hinzufügen) aus.

Das Diagramm reduziert ignorierte Skripts, markiert sie als Liste "Ein ignorieren" und fügt sie der Liste "Benutzerdefinierte Ausschlussregeln " unter Anpassen und Steuern von DevTools () >Einstellungen>Ignorieren hinzu. Ignorierte Skripts werden gespeichert, bis Sie sie entweder aus der Ablaufverfolgung oder aus den benutzerdefinierten Ausschlussregeln entfernen.

Anzeigen von Aktivitäten in einer Tabelle

Nach dem Aufzeichnen einer Seite stellt DevTools zusätzlich zum Hauptabschnitt zum Analysieren von Aktivitäten auch drei tabellarische Ansichten zum Analysieren von Aktivitäten bereit. Jede Ansicht bietet Ihnen eine andere Perspektive auf die Aktivitäten:

• Um die Aktivitäten anzuzeigen, für die die meiste Zeit direkt aufgewendet wurde, verwenden Sie die Registerkarte Bottom-up .

• Um die Stammaktivitäten anzuzeigen, die die meisten Arbeit verursachen, verwenden Sie die Registerkarte Aufrufstruktur .

• Um die Aktivitäten in der Reihenfolge anzuzeigen, in der sie während der Aufzeichnung aufgetreten sind, verwenden Sie die Registerkarte Ereignisprotokoll .

Damit Sie das Gesuchte schneller finden können, verfügen alle drei Registerkarten neben der Filterleiste über Schaltflächen für erweiterte Filterung:

• Die Schaltfläche Reguläre Ausdrücke aktivieren (

• Die Schaltfläche Suche zwischen Groß- und Kleinschreibung aktivieren (

Jede tabellarische Ansicht im Leistungstool zeigt Links für Aktivitäten wie Funktionsaufrufe an. Um Ihnen das Debuggen zu erleichtern, sucht DevTools die entsprechenden Funktionsdeklarationen in Quelldateien. Wenn die entsprechenden Quellzuordnungen vorhanden und aktiviert sind, findet DevTools außerdem automatisch die ursprünglichen Dateien.

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

Die nächsten drei Abschnitte beziehen sich alle auf dieselbe Demo. Sie können die Demo selbst unter Demo zu Aktivitätsregistern ausführen und die Quelle unter MicrosoftEdge / Demos > /devtools-performance-activitytabs/ anzeigen.

Stammaktivitäten

Im Folgenden finden Sie eine Erläuterung des Stammaktivitätenkonzepts, das in den Abschnitten Aufrufstruktur , Bottom-Up und Ereignisprotokoll beschrieben wird.

Stammaktivitäten sind Aktivitäten, die dazu führen, dass der Browser etwas arbeite. Wenn Sie beispielsweise auf eine Webseite klicken, führt der Browser eine Event Aktivität als Stammaktivität aus. Diese Event Aktivität kann dazu führen, dass andere Aktivitäten ausgeführt werden, z. B. ein Handler.

Im Flammendiagramm des Hauptabschnitts befinden sich Stammaktivitäten oben im Diagramm. Auf den Registerkarten Aufrufstruktur und Ereignisprotokoll sind Stammaktivitäten die Elemente der obersten Ebene.

Ein Beispiel für Stammaktivitäten finden Sie unten unter Die Registerkarte Aufrufstruktur.

Die Registerkarte "Aufrufstruktur"

Verwenden Sie die Registerkarte Aufrufstruktur , um anzuzeigen, welche Stammaktivitäten die meisten Arbeit verursachen.

Auf der Registerkarte Anrufstruktur werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Informationen zum Auswählen eines Teils einer Aufzeichnung finden Sie oben unter Auswählen eines Teils einer Aufzeichnung.

In der vorherigen Abbildung sind die Elemente der obersten Ebene in der Spalte Aktivität , z Event Timing. B. , Stammaktivitäten. Die Schachtelung stellt die Aufrufliste dar. In der vorherigen Abbildung haben Sie z. B. verursachtEvent: mouseup, Event Timing was verursacht hatFunction Call, was usw. verursacht (anonymous)hat.

Selbstzeit stellt die Zeit dar, die direkt mit dieser Aktivität verbracht wurde. Gesamtzeit stellt die Zeit dar, die für diese Aktivität oder eine der untergeordneten Elemente aufgewendet wurde.

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

Verwenden Sie das Textfeld Filter , um Ereignisse nach Aktivitätsname zu filtern.

Standardmäßig ist das Menü Gruppierung auf Keine Gruppierung festgelegt. Verwenden Sie das Menü Gruppierung , um die Aktivitätstabelle nach verschiedenen Kriterien zu sortieren.

Klicken Sie auf Schwerster Stapel anzeigen (), um rechts neben der Tabelle Aktivität eine weitere Tabelle anzuzeigen. Klicken Sie auf eine Aktivität, um die Tabelle "Schwererster Stapel " aufzufüllen. In der Tabelle Schwererster Stapel wird angezeigt, welche untergeordneten Elemente der ausgewählten Aktivität am längsten ausgeführt wurden.

Registerkarte "Unten nach oben"

Verwenden Sie die Registerkarte Bottom-up , um anzuzeigen, welche Aktivitäten aggregat die meiste Zeit in Anspruch genommen haben.

Auf der Registerkarte Unten nach oben werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Informationen zum Auswählen eines Teils einer Aufzeichnung finden Sie oben unter Auswählen eines Teils einer Aufzeichnung.

Im Flammendiagramm des Hauptabschnitts der vorherigen Abbildung wurde fast die gesamte Zeit für die Ausführung der aFunktionen , bund c aufgewendet. Die obersten Aktivitäten auf der Registerkarte Unten nach oben der vorherigen Abbildung sind auch a, bund c. Auf der Registerkarte Bottom-up ist Minor GCdie nächstte teuerste Aktivität .

Die Spalte Selbstzeit stellt die aggregierte Zeit dar, die direkt in dieser Aktivität für alle Vorkommen aufgewendet wurde.

Die Spalte Gesamtzeit stellt die aggregierte Zeit dar, die für diese Aktivität oder eine der untergeordneten Elemente aufgewendet wurde.

Registerkarte "Ereignisprotokoll"

Verwenden Sie die Registerkarte Ereignisprotokoll , um Aktivitäten in der Reihenfolge anzuzeigen, in der sie während der Aufzeichnung aufgetreten sind.

Auf der Registerkarte Ereignisprotokoll werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Informationen zum Auswählen eines Teils einer Aufzeichnung finden Sie oben unter Auswählen eines Teils einer Aufzeichnung.

Die Spalte Startzeit stellt den Zeitpunkt dar, an dem diese Aktivität gestartet wurde, relativ zum Beginn der Aufzeichnung. Beispielsweise bedeutet die Startzeit von 925.0 ms für das ausgewählte Element in der vorherigen Abbildung, dass die Aktivität 925,0 ms nach dem Start der Aufzeichnung gestartet wurde.

Die Spalte Selbstzeit stellt die Zeit dar, die direkt für diese Aktivität aufgewendet wurde.

Die Spalte Gesamtzeit stellt die Zeit dar, die direkt in dieser Aktivität oder in einer der untergeordneten Elemente verbracht wurde.

Klicken Sie auf die Spaltenüberschrift Startzeit, Selbstzeit oder Gesamtzeit , um die Tabelle nach dieser Spalte zu sortieren.

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

Verwenden Sie das Menü Dauer , um alle Aktivitäten herauszufiltern, die weniger als 1 ms oder 15 ms gedauert haben. Standardmäßig ist das Menü Dauer auf Alle festgelegt, was bedeutet, dass alle Aktivitäten angezeigt werden.

Deaktivieren Sie die Kontrollkästchen Laden, Skripterstellung, Rendern oder Zeichnen , um alle Aktivitäten aus diesen Kategorien herauszufiltern.

Anzeigen von Leistungsmarkern

In einer Überlagerung mit vertikalen Linien über die Leistungsablaufverfolgung können Sie wichtige Leistungsmarker sehen, z. B.:

• First Paint (FP)
• First Contentful Paint (FCP)
• Größter inhaltsbehafteter Paint (LCP)
• DOMContentLoaded-Ereignis (DCL)
• Onload-Ereignis (L)

Zeigen Sie auf einen Markernamen am Ende der Ablaufverfolgung, um den Zeitstempel anzuzeigen.

Anzeigen benutzerdefinierter Zeitangaben

Zeigen Sie auf der Spur Zeitangaben Ihre benutzerdefinierten Leistungsmarker an, z. B.:

• performance.mark() Anrufe.

• performance.measure() Anrufe.

Wählen Sie einen Marker aus, um weitere Details auf der Registerkarte Zusammenfassung anzuzeigen, einschließlich des Zeitstempels, der Gesamtzeit, der Selbstzeit und des detail Objekts. Für performance.mark() - und performance.measure() -Aufrufe werden auf der Registerkarte auch Stapelablaufverfolgungen angezeigt.

Anzeigen von Interaktionen

Verwenden Sie den Abschnitt Interaktionen , um Benutzerinteraktionen zu finden und zu analysieren, die während der Aufzeichnung aufgetreten sind:

Eine rote Linie am unteren Rand einer Interaktion stellt die Zeit dar, die auf den Standard Thread gewartet wird.

Klicken Sie auf eine Interaktion, um weitere Informationen dazu auf der Registerkarte Zusammenfassung anzuzeigen.

Ansichtslayoutverschiebungen

Ansichtslayoutverschiebungen auf der Spur "Layoutverschiebungen". Schichten werden als violette Diamanten angezeigt und basierend auf ihrer Nähe am Zeitleiste in Clustern (violette Linien) gruppiert. Informationen zu Clustern finden Sie unter Entwickeln der CLS-Metrik bei web.dev.

Um ein Element hervorzuheben, das eine Layoutverschiebung im Viewport verursacht hat, zeigen Sie auf die entsprechende Raute.

Klicken Sie auf die entsprechende Raute oder den Cluster, um weitere Informationen zu einer Layoutverschiebung oder zu Verschiebungen auf der Registerkarte Zusammenfassung mit Zeitangaben, Bewertungen, Elementen und potenziellen Tätern anzuzeigen.

Weitere Informationen finden Sie unter Kumulative Layoutverschiebung (CLS) bei web.dev.

Animationen anzeigen

Zeigen Sie Animationen auf dem Animationstitel an. Animationen werden als entsprechende CSS-Eigenschaften oder -Elemente benannt, falls vorhanden, z. B transform . oder my-element. Nicht kompositing-Animationen sind mit roten Dreiecken in der oberen rechten Ecke gekennzeichnet.

Wählen Sie eine Animation aus, um weitere Details auf der Registerkarte Zusammenfassung anzuzeigen, einschließlich der Gründe für Kompositingfehler.

Anzeigen der GPU-Aktivität

Zeigen Sie die GPU-Aktivität im Abschnitt GPU des Leistungstools an:

Rasteraktivität anzeigen

Zeigen Sie die Rasteraktivität im Abschnitt Threadpool an.

Analysieren von Frames pro Sekunde (FPS)

DevTools bietet zwei Möglichkeiten zum Analysieren von Frames pro Sekunde:

• Verwenden Sie den Abschnitt Frames , um anzuzeigen, wie lange ein bestimmter Frame gedauert hat. Weitere Informationen finden Sie weiter unten im Abschnitt Frames.

• Verwenden Sie die FPS-Verbrauchseinheit für eine Echtzeitschätzung von FPS während der Seitenausführung. Weitere Informationen finden Sie weiter unten unter Anzeigen von Frames pro Sekunde in Echtzeit mit der FPS-Verbrauchseinheit.

Der Abschnitt "Frames"

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

Zeigen Sie auf einen Frame, um eine QuickInfo mit weiteren Informationen anzuzeigen:

Das obige Beispiel zeigt eine QuickInfo, wenn Sie mit dem Mauszeiger auf einen Frame zeigen.

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

• Leerlaufrahmen (weiß). Keine Änderungen.

• Rahmen (grün). Wird wie erwartet und rechtzeitig gerendert.

• Teilweise dargestellter Rahmen (gelb mit einem dünnen breiten Strichmuster). Microsoft Edge hat sein Bestes getan, um zumindest einige visuelle Updates rechtzeitig zu rendern. Für den Fall, dass die Arbeit des Standard Thread des Rendererprozesses (Canvasanimation) zu spät ist, aber der Komppositorthread (Bildlauf) in der Zeit ist.

• Verworfener Rahmen (rot mit einem dichten Einfarbigen Linienmuster). Microsoft Edge kann den Frame nicht in angemessener Zeit rendern.

Klicken Sie auf einen Frame, um weitere Informationen zum Frame auf der Registerkarte Zusammenfassung am unteren Rand des Leistungstools anzuzeigen. DevTools umreißt den ausgewählten Rahmen blau:

Anzeigen von Netzwerkanforderungen

Erweitern Sie den Abschnitt Netzwerk , um einen Wasserfall von Netzwerkanforderungen anzuzeigen, die während der Aufzeichnung aufgetreten sind:

Klicken Sie auf eine Anforderung, um weitere Informationen dazu auf der Registerkarte Zusammenfassung anzuzeigen:

Anforderungen im Abschnitt Netzwerk sind wie folgt farbcodiert:

• Blauer Hintergrund: HTML-Anforderung.
• Violetter Hintergrund: CSS-Anforderung.
• Dunkelgelber Hintergrund: JS-Anforderung.
• Grüner Hintergrund: Bildanforderung.

Anforderungen haben Quadrate in der oberen linken Ecke:

• Ein dunkelblaues Quadrat oben links in einer Anforderung bedeutet, dass es sich um eine Anforderung mit höherer Priorität handelt.
• Ein helleres blaues Quadrat bedeutet eine niedrigere Priorität.

In der vorherigen Abbildung hat beispielsweise die Fotogalerieanforderung in der oberen linken Ecke des Abschnitts Netzwerk eine höhere Priorität.

Anforderungen können links und rechts Linien aufweisen, und ihre Balken können in zwei Farben aufgeteilt werden. Diese Linien und Farben stellen folgendes dar:

• Die linke Zeile ist bis zur Connection Start Gruppe von Ereignissen einschließlich. Mit anderen Worten, es ist alles vor Request Sent, exklusiv.

• Der helle Teil des Balkens ist Request Sent und Waiting (TTFB) für die Serverantwort.

• Der dunkle Teil des Balkens ist Content Download.

• Die richtige Zeile ist im Wesentlichen die Zeit, die auf den Standard Thread gewartet wird. Dies wird auf der Registerkarte Zeitsteuerung nicht dargestellt.

Anzeigen von Speichermetriken

Aktivieren Sie das Kontrollkästchen Arbeitsspeicher , um Speichermetriken in einer Leistungsaufzeichnung anzuzeigen:

DevTools zeigt ein Speicherdiagramm über der Registerkarte Zusammenfassung an. Unter dem NET-Diagramm befindet sich auch ein Diagramm mit dem Namen HEAP. Das HEAP-Diagramm enthält die gleichen Informationen wie die JS-Heaplinie im Speicherdiagramm :

Die farbigen Linien im Diagramm werden den farbigen Kontrollkästchen oberhalb des Diagramms zugeordnet. Deaktivieren Sie ein Kontrollkästchen, um diese Kategorie im Diagramm auszublenden.

Das Diagramm zeigt nur den Aktuell ausgewählten Bereich der Aufzeichnung an. In der vorherigen Abbildung zeigt das Diagramm Arbeitsspeicher beispielsweise nur die Speicherauslastung von etwa 3600 ms bis zur 6200 ms-Marke an.

Siehe auch:

• Visualisieren von Speicherverlusten (Leistungstool: Kontrollkästchen "Arbeitsspeicher") unten.

Anzeigen der Dauer eines Teils einer Aufzeichnung

Wenn Sie einen Abschnitt wie Network oder Main analysieren, 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 nach links oder rechts, um einen Teil der Aufzeichnung auszuwählen. Am unteren Rand Ihrer Auswahl zeigt DevTools an, wie lange dieser Teil gedauert hat:

Screenshot anzeigen

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

Um einen Screenshot der Seite in diesem Moment der Aufzeichnung anzuzeigen, zeigen Sie auf die Übersicht. Die Übersicht ist der Abschnitt, der die CPU- und NET-Diagramme enthält:

Sie können auch Screenshots anzeigen, indem Sie im Abschnitt Frames einen Frame auswählen. DevTools zeigt eine kleine Version des Screenshots auf der Registerkarte Zusammenfassung an:

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

Anzeigen von Ebeneninformationen

So zeigen Sie Informationen zu erweiterten Ebenen zu einem Frame an:

1. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (), und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation (langsam) aktivieren .

2. Wählen Sie im Abschnitt Frames einen Frame aus. DevTools zeigt Informationen zu den Ebenen auf der Registerkarte Ebenen am unteren Rand des Leistungstools an:

   

Die Registerkarte Ebenen funktioniert wie die Registerkarte Zusammengesetzte Ebenen im Tool 3D-Ansicht . Informationen zur Interaktion mit der Registerkarte Ebenen finden Sie unter Navigieren in Webseitenebenen, Z-Index und DOM mithilfe des Tools 3D-Ansicht.

Anzeigen des Farbprofilers

So zeigen Sie erweiterte Informationen zu einem Paint-Ereignis an:

1. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (), und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation (langsam) aktivieren .

2. Wählen Sie im Hauptabschnitt ein Paint-Ereignis aus. DevTools zeigt Informationen zum Paint-Ereignis auf der Registerkarte Paint Profiler an:

   

Anzeigen von CSS-Selektorstatistiken

So zeigen Sie Statistiken zu den Selektoren der CSS-Regeln an, die während einer Leistungsaufzeichnung neu berechnet wurden:

• Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen (), und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation (langsam) aktivieren .

  DevTools zeigt aggregierte Informationen zu den Selektoren der CSS-Regeln an, die während der Aufzeichnung auf der Registerkarte Selector Stats neu berechnet wurden:

  

1. Wählen Sie im Abschnitt Haupt das Ereignis Format neu berechnen aus. Auf der Registerkarte Selector Stats zeigt DevTools Informationen zu den Selektoren der CSS-Regeln an, die während dieses Ereignisses neu berechnet wurden.

Siehe auch:

• Analysieren der CSS-Selektorleistung während der Neuberechnung von Formatvorlagenereignissen

Anzeigen von Nachrichten zwischen Fenstern, iFrames und dedizierten Workern

Das DevTools-Experiment Leistungsbereich: PostMessage-Verteilung und -Verarbeitung von Datenflüssen anzeigen verbessert den Hauptabschnitt des Leistungstools, sodass Sie Ereignisse und Handler schnell identifizieren postMessage können, indem Ereignisse, die von der postMessage -Methode ausgelöst werden, von anderen Ereignissen unterschieden werden, die im Leistungstool angezeigt werden. Dieses Experiment hilft Ihnen bei der Untersuchung von Leistungsproblemen, die sich auf das Veröffentlichen von Nachrichten über verschiedene Threads einer Anwendung beziehen.

Ohne dieses Experiment werden Ereignisse, die durch das Verteilen und Behandeln von Nachrichten zwischen Threads einer Anwendung ausgelöst werden, als generische Skriptfunktionsaufrufereignisse angezeigt. Wenn dieses Experiment aktiviert ist:

• postMessage dispatch-Ereignisse werden als Schedule postMessage angezeigt.
• postMessage Handlerereignisse werden als On Message angezeigt:

Mit diesem Experiment können Sie untersuchen, wann ein postMessage Aufruf stattgefunden hat und wie lange die Nachricht in die Warteschlange eingereiht wurde, bevor der postMessage Handler gestartet wird. Die Dispatchereignisse werden mit Handlerereignissen durch Initiatorpfeile verknüpft, die angezeigt werden, wenn Sie auf einen der Ereignistypen klicken:

Um dieses Feature zu verwenden, wählen Sie in DevTools die Option DevTools anpassen und steuern () >Einstellungen>Experimente aus, aktivieren Sie das Kontrollkästchen Leistungsbereich: postMessage dispatch and handling flows anzeigen, klicken Sie auf die Schaltfläche Schließen (X), und klicken Sie dann auf die Schaltfläche DevTools neu laden .

Siehe auch:

• Referenz zu Leistungsaufzeichnungsereignissen
• Demo zu postMessage-Ablaufverfolgungsereignissen (gerendert)
• Demo zu postMessage-Ablaufverfolgungsereignissen (Quellcode)

Analysieren der Renderingleistung mit dem Renderingtool

Verwenden Sie das Renderingtool , um die Renderingleistung Ihrer Seite zu visualisieren. Das Renderingtool ist ein Tool für die Schnellansicht . Wenn Sie es über das Befehlsmenü öffnen, wird es unten in DevTools geöffnet.

So öffnen Sie das Renderingtool

1. Klicken Sie mit der rechten Maustaste auf eine Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

2. Klicken Sie auf der Aktivitätsleiste (oder Schnellansicht) auf die Schaltfläche Weitere Tools (), und wählen Sie dann Rendering aus.

   Das Renderingtool wird geöffnet:

   

Siehe auch:

• Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder Sehfehlern aussieht

Anzeigen von Frames pro Sekunde in Echtzeit mit der FPS-Verbrauchseinheit

Die FPS-Messung ist eine Überlagerung, die in der linken oberen Ecke der gerenderten Webseite angezeigt wird. Es bietet eine Echtzeitschätzung der FPS, während die Seite ausgeführt wird. So öffnen Sie die FPS-Verbrauchseinheit:

1. Öffnen Sie das Renderingtool . Siehe Analysieren der Renderingleistung mit dem Renderingtool weiter oben.

2. Aktivieren Sie das Kontrollkästchen Frame Rendering Stats ( Frame Rendering Stats ). Die Überlagerung der FPS-Verbrauchseinheit wird auf der gerenderten Webseite angezeigt:

   

Anzeigen von Malereignissen in Echtzeit mit Paint Flashing

Verwenden Sie Paint Flashing, um eine Echtzeitansicht aller Paint-Ereignisse auf der Seite zu erhalten. Wenn ein Teil der Seite neu gezeichnet wird, umrandet DevTools diesen Abschnitt grün.

So aktivieren Sie Paint Flashing:

1. Öffnen Sie das Renderingtool . Siehe Analysieren der Renderingleistung mit dem Renderingtool weiter oben.

2. Aktivieren Sie das Kontrollkästchen Paint Flashing . Auf der gerenderten Webseite werden grüne Konturen angezeigt:

   

Anzeigen einer Überlagerung von Ebenen mit Ebenenrahmen

So zeigen Sie eine Überlagerung von Ebenenrahmen und Kacheln oben auf der Seite an:

1. Öffnen Sie das Renderingtool , wie oben unter Analysieren der Renderingleistung mit dem Renderingtool beschrieben.

2. Aktivieren Sie das Kontrollkästchen Ebenenrahmen . Ebenenrahmen werden auf der gerenderten Webseite angezeigt:

   

Eine Erläuterung der Farbcodierungen finden Sie in den Kommentaren in debug_colors.cc .

Ermitteln von Problemen mit der Scrollleistung in Echtzeit

Verwenden Sie das Kontrollkästchen Leistungsprobleme beim Scrollen , um Elemente der Seite zu identifizieren, die Ereignislistener im Zusammenhang mit dem Bildlauf haben, die die Leistung der Seite beeinträchtigen können. DevTools beschreibt die potenziell problematischen Elemente in Teal.

So zeigen Sie Probleme mit der Bildlaufleistung an:

1. Öffnen Sie das Renderingtool , wie oben unter Analysieren der Renderingleistung mit dem Renderingtool beschrieben.

2. Aktivieren Sie das Kontrollkästchen Leistungsprobleme beim Scrollen . Potenziell problematische Elemente werden beschrieben:

   

Siehe auch:

• Langsame Bildlauf-Rects (Kontrollkästchen) in Navigieren in Webseitenebenen, Z-Index und DOM mithilfe des Tools 3D-Ansicht.

Deaktivieren lokaler Schriftarten

Verwenden Sie im Renderingtool das Kontrollkästchen Lokale Schriftarten deaktivieren , um fehlende local() Quellen in @font-face Regeln zu emulieren.

Wenn beispielsweise die Schriftart Rubik auf Ihrem Gerät installiert ist und die @font-face src Regel sie als local() Schriftart verwendet, verwendet Microsoft Edge die lokale Schriftartdatei von Ihrem Gerät.

Wenn Lokale Schriftarten deaktivieren ausgewählt ist, ignoriert DevTools die local() Schriftarten und ruft jede Schriftart aus dem Netzwerk ab:

Dieses Feature ist nützlich, wenn Sie während der Entwicklung zwei verschiedene Kopien derselben Schriftart verwenden, z. B.:

• Eine lokale Schriftart für Ihre Designtools.
• Eine Webschriftart für Ihren Code.

Verwenden Sie Lokale Schriftarten deaktivieren , um Folgendes zu vereinfachen:

• Debuggen und Messen der Ladeleistung und Optimierung von Webschriftarten.
• Überprüfen Sie die Genauigkeit Ihrer CSS-Regeln @font-face .
• Entdecken Sie die Unterschiede zwischen lokalen Versionen, die auf Ihrem Gerät installiert sind, und einer Webschriftart.

Visualisieren von Speicherverlusten (Leistungstool: Kontrollkästchen "Arbeitsspeicher")

Verwenden Sie als Ausgangspunkt für die Untersuchung der Arbeitsspeicherauslastung der Webseite das Kontrollkästchen Arbeitsspeicher des Leistungstools. (Oder überwachen Sie die Speichernutzung in Echtzeit (Task-Manager des Microsoft Edge-Browsers).)

Mit dem Leistungstool können Sie die Speichernutzung einer Seite im Laufe der Zeit visualisieren.

1. Öffnen Sie in DevTools das Leistungstool .

2. Aktivieren Sie das Kontrollkästchen Arbeitsspeicher .

3. Erstellen Sie oben eine Aufzeichnung pro Datensatzleistung.

Es empfiehlt sich, ihre Aufzeichnung mit einer erzwungenen Garbage Collection zu starten und zu beenden. Um die Garbage Collection zu erzwingen, klicken Sie während der Aufzeichnung auf die Schaltfläche sammeln.

Beachten Sie den folgenden Code, um Speicheraufzeichnungen zu veranschaulichen:

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Jedes Mal, wenn auf die Schaltfläche, auf die im Code verwiesen wird, geklickt wird, werden 10.000 div Knoten an den Dokumenttext angefügt, und eine Zeichenfolge mit 1.000.000 x Zeichen wird auf das x Array übertragen. Wenn Sie den vorherigen Code ausführen, wird eine Aufzeichnung im Leistungstool erzeugt:

Zunächst eine Erläuterung der Benutzeroberfläche. Das HEAP-Diagramm im Bereich Übersicht (unter NET) stellt den JS-Heap dar. Unterhalb des Bereichs Übersicht befindet sich der Bereich Counter . Die Speicherauslastung wird nach JS-Heap (wie heap im Bereich Übersicht ), Dokumenten, DOM-Knoten, Listenern und GPU-Arbeitsspeicher aufgeschlüsselt. Deaktivieren Sie ein Kontrollkästchen, um es im Diagramm auszublenden.

Nun eine Analyse des Codes im Vergleich zur vorherigen Abbildung. Wenn Sie den Knotenzähler (das grüne Diagramm) überprüfen, stimmt er ordnungsgemäß mit dem Code überein. Die Knotenanzahl erhöht sich in einzelnen Schritten. Sie können davon ausgehen, dass jede Erhöhung der Knotenanzahl ein Aufruf von grow()ist.

Das JS-Heapdiagramm (das blaue Diagramm) ist nicht so einfach. Gemäß bewährten Methoden ist der erste Schritt tatsächlich eine erzwungene Garbage Collection (klicken Sie auf die Schaltfläche Garbage sammeln).

Im Verlauf der Aufzeichnung werden die JS-Heapgrößenspitzen angezeigt. Dies ist natürlich und erwartet: Der JavaScript-Code erstellt die DOM-Knoten auf jeder Schaltfläche, auf die Sie klicken, und macht viel Arbeit, wenn die Zeichenfolge mit einer Million Zeichen erstellt wird.

Der Schlüssel ist hier die Tatsache, dass der JS-Heap höher endet als er begonnen hat (der "Anfang" hier ist der Punkt nach der erzwungenen Garbage Collection). Wenn Sie in der Praxis dieses Muster der Erhöhung der JS-Heap- oder Knotengröße sehen, deutet dies möglicherweise auf einen Speicherverlust hin.

Siehe auch:

• Anzeigen von Arbeitsspeichermetriken, oben.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.