Referenz zu Leistungsfeatures

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

Ein Schritt-für-Schritt-Tutorial zum Analysieren der Leistung einer Seite mithilfe des Leistungstools finden Sie unter Analysieren der Laufzeitleistung (Lernprogramm).

Die Bilder auf dieser Seite zeigen DevTools, das in einem eigenen, dedizierten Fenster ausgedockt ist. Weitere Informationen zum Abdocken von DevTools finden Sie unter Ausdocken von DevTools in ein separates Fenster unter Ändern der DevTools-Platzierung (Abdocken, Dock nach unten, Dock nach links).

Detaillierter Inhalt:

• Öffnen des Leistungstools
• Leistung aufzeichnen
  • Laufzeitleistung aufzeichnen
  • Ladeleistung aufzeichnen
  • Mitschreiben von Screenshots während der Aufzeichnung
  • Erzwingen der Garbage Collection während der Aufzeichnung
  • Aufzeichnungseinstellungen anzeigen
  • JavaScript-Beispiele deaktivieren
  • Netzwerk während der Aufzeichnung drosseln
  • CPU während der Aufzeichnung drosseln
  • CSS-Selektorstatistiken aktivieren
  • Erweiterte Paint-Instrumentierung aktivieren
• Kommentieren und Teilen einer Aufzeichnung
  • Speichern und Freigeben einer Aufzeichnung
  • Laden einer Aufzeichnung
• Löschen der vorherigen Aufzeichnung
• Analysieren einer Leistungsaufzeichnung
  • Erhalten Sie umsetzbare Erkenntnisse
  • Navigieren in der Aufzeichnung
    • Verwenden von Tastenkombinationen zum Navigieren
    • Auswählen eines Teils einer Aufzeichnung
    • Zoomen Sie auf Teile einer Aufzeichnung und wechseln Sie zwischen Zoomstufen
    • Scrollen eines langen Flammendiagramms
  • Nach Aktivitäten suchen
  • Ändern der Reihenfolge von Titeln und Ausblenden
  • Hauptthreadaktivität anzeigen
  • Lesen Sie das Flammendiagramm
  • Ereignisinitiatoren nachverfolgen
  • Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden
    • Skripte im Flammendiagramm ignorieren
  • Anzeigen von Aktivitäten in einer Tabelle
    • Stammaktivitäten
    • Die Registerkarte "Von unten nach oben"
    • Die Registerkarte "Aufrufstruktur"
    • Die Registerkarte "Ereignisprotokoll"
  • Anzeigen von Leistungsindikatoren
  • Benutzerdefinierte Anzeigedauern anzeigen
  • Interaktionen anzeigen
  • Layoutverschiebungen anzeigen
  • Anzeigen von Animationen
  • Anzeigen der GPU-Aktivität
  • Anzeigen von Raster-Aktivitäten
  • Analysieren von Frames pro Sekunde (FPS)
    • Der Abschnitt "Rahmen"
  • Netzwerkanforderungen anzeigen
  • Anzeigen von Arbeitsspeichermetriken
  • Anzeigen der Dauer eines Teils einer Aufzeichnung
  • Screenshot anzeigen
  • Anzeigen von Ebeneninformationen
  • Paint-Profiler anzeigen
  • Anzeigen von CSS-Selektorstatistiken
  • Anzeigen von Nachrichten zwischen Fenstern, iframes und dedizierten Workern
  • WebSocket-Nachrichten anzeigen
• Analysieren der Renderingleistung mit dem Renderingtool
  • Bilder pro Sekunde in Echtzeit mit dem FPS-Meter anzeigen
  • Malereignisse in Echtzeit mit Paint Flashing anzeigen
  • Anzeigen einer Überlagerung von Ebenen mit Ebenenrändern
  • Finden Sie Probleme mit der Bildlaufleistung in Echtzeit
  • Lokale Schriftarten deaktivieren
• Speicherverluste visualisieren (Leistungstool: Kontrollkästchen Speicher)

Öffnen des Leistungstools

So öffnen Sie das Leistungstool in DevTools:

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. 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.

Laufzeitleistung aufzeichnen

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

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

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in der Aktivitätsleiste das Tool Leistung () aus.

4. Klicken Sie auf die Schaltfläche Aufzeichnen ().

   

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

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

   Das Leistungstool zeigt die Aufzeichnung an.

Ladeleistung aufzeichnen

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. die Fotogalerie-Demo.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in der Aktivitätsleiste das Tool Leistung () aus.

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

   

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

   

Mitschreiben von Screenshots während der Aufzeichnung

Um während der Aufzeichnung einen Screenshot von jedem Frame aufzunehmen, aktivieren Sie das Kontrollkästchen Screenshots :

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

Erzwingen der Garbage Collection während der Aufzeichnung

Wenn Sie die Müllabfuhr während der Aufzeichnung einer Seite erzwingen möchten, klicken Sie auf die Schaltfläche Müll sammeln ():

Aufzeichnungseinstellungen anzeigen

So machen Sie weitere Einstellungen im Zusammenhang mit der Erfassung von Leistungsaufzeichnungen durch DevTools verfügbar:

• Klicken Sie im Leistungstool auf die Schaltfläche Mitschreiben Einstellungen ().

  Kontrollkästchen und Dropdownlisten werden oben im Leistungstool angezeigt:

  

JavaScript-Beispiele deaktivieren

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

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

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

3. Erstellen Sie eine Aufzeichnung der Seite.

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

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

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

Netzwerk während der Aufzeichnung drosseln

So drosseln Sie das Netzwerk während der Aufzeichnung:

1. Klicken Sie im Leistungstool auf die Schaltfläche Mitschreiben Einstellungen (). Siehe Aufzeichnungseinstellungen anzeigen, oben.

2. Setzen Sie das Netzwerk auf die gewünschte Drosselungsstufe.

   Auf der Registerkarte des Netzwerktools wird ein Warnsymbol angezeigt, das Sie daran erinnert, dass die Drosselung aktiviert ist.

CPU während der Aufzeichnung drosseln

So drosseln Sie die CPU während der Aufzeichnung:

1. Klicken Sie im Leistungstool auf die Schaltfläche Mitschreiben Einstellungen (). Siehe Aufzeichnungseinstellungen anzeigen, oben.

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

   Auf der Registerkarte des Leistungstools wird ein Warnsymbol angezeigt, das Sie daran erinnert, dass die Drosselung aktiviert ist.

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

CSS-Selektorstatistiken aktivieren

So zeigen Sie die Statistiken Ihrer CSS-Regelselektoren während zeitintensiver Ereignisse zum Neuberechnen von Formatvorlagen an:

1. Klicken Sie auf die Schaltfläche Einstellungen mitschreiben (). Siehe Aufzeichnungseinstellungen anzeigen, oben.

2. Aktivieren Sie das Kontrollkästchen CSS-Selektorstatistiken aktivieren (langsam).

Weitere Informationen finden Sie unter Analysieren der CSS-Selektorleistung während "Stil neu berechnen"-Ereignissen.

Erweiterte Paint-Instrumentierung aktivieren

So zeigen Sie detaillierte Paint-Instrumentierung an:

1. Klicken Sie auf die Schaltfläche Einstellungen mitschreiben (). Siehe Aufzeichnungseinstellungen anzeigen, oben.

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

Informationen zur Interaktion mit den Paint-Informationen finden Sie unter Anzeigen von Ebeneninformationen unten und Paint-Profiler unten anzeigen.

Kommentieren und Teilen einer Aufzeichnung

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

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

Die Registerkarte "Anmerkungen" in der Seitenleiste enthält zunächst 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:

• Bezeichnen 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.

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

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

In diesem Beispiel gibt es Folgendes:

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

Die Registerkarte Anmerkungen zeigt die Anzahl der Anmerkungen neben dem Namen der Registerkarte. In diesem Beispiel 5.

Um eine Anmerkung zu löschen, bewegen Sie den Mauszeiger auf der Registerkarte Anmerkungen darüber und klicken Sie dann daneben auf die Schaltfläche Löschen .

Um Anmerkungen aus der Leistungsablaufverfolgung auszublenden, wählen Sie unten auf der Registerkarte Anmerkungen die Option Anmerkungen ausblenden aus.

Speichern und Freigeben einer Aufzeichnung

Um eine Aufzeichnung als Datei auf Ihrem Gerät zu speichern und sie später mit Ihren kommentierten Leistungsergebnissen freizugeben, klicken Sie in der Aktionsleiste oben im Leistungstool auf die Schaltfläche Profil speichern () und wählen Sie dann Ablaufverfolgung speichern.

Alternativ können Sie Ablaufverfolgung ohne Anmerkungen speichern auswählen.

Anstatt oben auf die Schaltfläche "Profil speichern " (") zu klicken, können Sie mit der rechten Maustaste auf eine Audiospur klicken und dann "Profil speichern" auswählen:

Laden einer Aufzeichnung

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

Im Tool "Leistung " werden Anmerkungen angezeigt, wenn sie in der Ablaufverfolgung vorhanden sind.

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

Sie können mit der rechten Maustaste in eine vorhandene Aufzeichnung oder auf den Bildschirm klicken, der im Tool "Leistung " 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 Aufnahme aus dem Leistungstool zu entfernen:

Analysieren einer Leistungsaufzeichnung

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

Erhalten Sie umsetzbare Erkenntnisse

Das Leistungstool extrahiert umsetzbare Erkenntnisse aus den aufgezeichneten Leistungsdaten. Diese Erkenntnisse sind Möglichkeiten, wie Sie die Leistung Ihrer Website verbessern können. Die Erkenntnisse umfassen:

• INP nach Phase
• LCP nach Phase
• Ermittlung von LCP-Anforderungen
• Schuldige für Layoutverschiebung
• Anfrage zum Blockieren von Rendern
• Struktur der Netzwerkabhängigkeiten
• Verbessern der Bildbereitstellung
• Latenz bei Dokumentenanforderungen
• Anzeige von Schriftarten
• Optimieren des Viewports für Mobilgeräte
• Optimieren der DOM-Größe
• Drittanbieter
• Kosten für CSS-Selektor
• Erzwungener Umbruch
• Verwenden effizienter Cachelebensdauern

Die Erkenntnisse konzentrieren sich auf die Verbesserung der Core Web Vitals-Metriken und auf die Optimierung der Geschwindigkeit, mit der die Webseite lädt und rendert.

Nachdem Sie ein Profil im Leistungstool aufgezeichnet haben, zeigt die Registerkarte "Einblicke " in der Randleiste die Liste der umsetzbaren Erkenntnisse an, die für die aufgezeichneten Leistungsdaten gelten. Die Liste der Erkenntnisse, die nicht für das Profil gelten, finden Sie im Abschnitt Übergebene Erkenntnisse.

So verwenden Sie die Erkenntnisse:

1. Erstellen Sie eine Leistungsaufzeichnung gemäß oben unter "Leistung aufzeichnen".

2. Wählen Sie in der linken Randleiste des Leistungstools die Registerkarte "Einblicke " aus, erweitern Sie verschiedene Abschnitte, und fahren Sie mit der Maus über Elemente, und klicken Sie darauf. Das Leistungstool hebt die entsprechenden Ereignisse in der Ablaufverfolgung hervor:

   

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

Navigieren in der Aufzeichnung

Um Ihre Performance-Aufzeichnung genau zu untersuchen, können Sie einen Teil einer Aufnahme auswählen, ein langes Flammendiagramm scrollen, hinein- und herauszoomen und Breadcrumbs verwenden, um zwischen Zoomstufen zu wechseln.

Verwenden von Tastenkombinationen zum Navigieren

Um Tastenkombinationen zum schnellen Navigieren in der Aufzeichnung zu verwenden, wählen Sie zunächst wie folgt die gewünschte Art 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 Classic .

  Im Dialogfeld Tastenkombinationen werden die verfügbaren Tastenkombinationen für die ausgewählte Zuordnungsoption angezeigt.

Wenn die Optionsschaltfläche "Modern " ausgewählt ist:

• Zoomen: Befehl/Strg + Mausrad.
• Zum vertikalen Scrollen: Mausrad.
• Zum horizontalen Scrollen: Umschalt + Mausrad.

Wenn die klassische Optionsschaltfläche ausgewählt ist:

• Zoomen: Mausrad oder Touchpad nach oben oder unten.
• Zum vertikalen Scrollen: Umschalt + Mausrad.
• So scrollen Sie horizontal:UMSCHALT-NACH-LINKS-Taste| + Rechtspfeil

Weitere Tastenkombinationen:

• Zoomen Sie, indem Sie W oder S drücken.

• Schwenken Sie nach links und rechts, indem Sie A oder D drücken.

Auswählen eines Teils einer Aufzeichnung

Oben in der Aufzeichnung wird der Abschnitt "Zeitachsenübersicht" angezeigt, einschließlich der CPU- und NET-Diagramme (rechts dargestellt):

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

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

1. Konzentrieren Sie sich auf den Hauptgleis oder einen seiner Nachbarn.

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

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

1. Bewegen Sie den Mauszeiger über den Abschnitt "Zeitleistenübersicht" oder einen der Titel (Hauptspur und seine Nachbarn).

2. Wischen Sie mit zwei Fingern nach oben, um die Ansicht zu verkleinern, wischen Sie nach links, um nach links zu bewegen, wischen Sie nach unten, um zu vergrößern, und wischen Sie nach rechts, um nach rechts zu verschieben.

Sie können einen Teil einer Aufzeichnung mit einer Maus, einer 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 gedrückt, während Sie nach oben und unten ziehen. Ziehen Sie nach links oder rechts, um den ausgewählten Teil der Aufzeichnung zu verschieben.

Tastatur:

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

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

2. S Drücken oder W zum Vergrößern oder Verkleinern. Drücken Sie A ODERD, um nach links oder rechts zu bewegen.

Trackpad:

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

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

2. Wischen Sie mit zwei Fingern nach oben, um die Ansicht zu verkleinern, oder nach unten, um die Ansicht zu vergrößern. Wischen Sie mit zwei Fingern nach links, um nach links zu bewegen, oder nach rechts, um nach rechts zu bewegen.

Zoomen Sie auf Teile einer Aufzeichnung und wechseln Sie zwischen Zoomstufen

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

So zoomen Sie auf einen Teil Ihrer Aufzeichnung und verwenden Breadcrumbs:

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

2. Zeigen Sie mit der Maus 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 oben in der Zeitachsenübersicht erstellt.

3. Wiederholen Sie die beiden vorherigen Schritte, um einen weiteren geschachtelten 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 auf den entsprechenden Breadcrumb in der Kette oben in der Zeitachsenübersicht.

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

Scrollen eines langen Flammendiagramms

Um ein langes Flammendiagramm im Hauptgleis oder einem seiner Nachbarn zu scrollen, klicken und halten Sie und ziehen Sie dann in eine beliebige Richtung, bis das Gesuchte sichtbar wird.

Nach Aktivitäten suchen

Sie können die Aktivitäten im Haupttrack und die Anforderungen im Netzwerk-Track durchsuchen.

So öffnen Sie das Suchfeld unten im Leistungstool :

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

   Das Suchfeld wird unten im Leistungstool angezeigt:

   

2. Geben Sie im Suchfeld eine Abfrage ein, z. B. "Formatvorlage neu berechnen".

   Die Abgleichsaktivitäten werden während der Eingabe im Hauptabschnitt hervorgehoben, und die Gesamtanzahl der Übereinstimmungen wird im Suchfeld angezeigt. Die erste übereinstimmende Aktivität wird ausgewählt und 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+EINGABE, oder klicken Sie auf die Schaltfläche Zurück ().

Das Leistungstool zeigt eine QuickInfo über der 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 RegEx-Schaltfläche auswählen und dann eingeben ^E.* , findet sich jede Aktivität, die jede Aktivität, die mit dem Buchstaben E beginnt.

• Um die Abfrage zwischen Groß- und Kleinschreibung zu prüfen, klicken Sie auf die Schaltfläche Suche unter Berücksichtigung der Groß-/Kleinschreibung aktivieren ().

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

Ändern der Reihenfolge von Titeln und Ausblenden

Um die Leistungsablaufverfolgung aufzuräumen, können Sie die Reihenfolge der Titel ändern und die irrelevanten im Spurkonfigurationsmodus ausblenden.

So verschieben und blenden Sie Spuren aus:

1. Um den Konfigurationsmodus aufzurufen, klicken Sie mit der rechten Maustaste auf einen Titelnamen und wählen Sie dann Spuren konfigurieren.

2. Klicken Sie auf die Schaltfläche Track nach oben verschieben (") oder auf Track nach unten verschieben ("), um einen Track nach oben oder unten zu verschieben. Klicken Sie auf die Schaltfläche Titel ausblenden (), um ihn auszublenden.

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

Das Tool "Leistung" wendet Ihre Verfolgungskonfiguration auch auf neue Ablaufverfolgungen an, es sei denn, Sie schließen DevTools und öffnen es dann erneut.

Hauptthreadaktivität anzeigen

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

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

DevTools stellt die Hauptthreadaktivität mit einem Flammendiagramm dar:

Die x-Achse stellt die Aufzeichnung im Zeitverlauf dar. Die y-Achse stellt den Aufrufstapel dar. Ein Ereignis, das sich in der Nähe der Spitze befindet, verursacht die Ereignisse, die darunter liegen. In der vorherigen Abbildung verursachte ein input Ereignis beispielsweise ein Function Call, das eine anonyme Funktion ausführte, die und dann populateGalleryaufrieffilterByCamera. Die Funktion nahm dann DOM-Änderungen vor, indem sie populateGalleryset innerHTML.

DevTools weist Skripts zufällige Farben zu. In der vorherigen Abbildung sind Funktionsanforderungen von einem Skript fuchsia (lila-pink) gefärbt. Das dunklere Gelb stellt die Skriptaktivität dar, und das violette Ereignis stellt die Renderingaktivität dar. Diese dunkleren gelben und violetten Ereignisse sind in allen Aufzeichnungen konsistent.

Wenn Sie das detaillierte Flammendiagramm von JavaScript-Anforderungen ausblenden möchten, lesen Sie JavaScript-Beispiele weiter oben. Wenn JavaScript-Beispiele deaktiviert sind, werden nur Ereignisse auf hoher Ebene angezeigt, z. B Event: input . und Function Call aus der vorherigen Abbildung.

Lesen Sie das Flammendiagramm

Das Leistungstool stellt die Hauptthreadaktivität in einem Flammendiagramm dar. Die x-Achse stellt die Aufzeichnung im Zeitverlauf dar. Die y-Achse stellt den Aufrufstapel dar. Die Ereignisse oben verursachen die Ereignisse unten.

Das Leistungstool weist Skripten zufällige Farben zu, um das Flammendiagramm aufzulockern und besser lesbar zu machen.

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

Zusätzlich zeigt der Main-Track Informationen zu CPU-Profilen an, die mit und Konsolenfunktionen gestartet und gestoppt wurden profile()profileEnd() .

Informationen zum Ausblenden des detaillierten 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.

Ereignisinitiatoren nachverfolgen

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

• Formatvorlage oder Layout ungültig machen –> Formatvorlagen oder Layoutneu berechnen
• Animationsframe anfordern ->Animationsframe ausgelöst
• Idle-Rückruf anfordern ->Leerlaufrückruf auslösen
• Timer installieren ->Timer ausgelöst
• Erstellen von WebSocket -Send... und Empfangen von WebSocket-Handshake> oder WebSocket-Zerstörung
• Planen von postTask ->Auslösen von postTask oder Abbrechen von postTask

Um die Pfeile anzuzeigen, suchen Sie entweder nach einem Initiator oder dem von ihm verursachten Ereignis im Flammendiagramm, und wählen Sie es aus.

Wenn diese Option ausgewählt ist, werden auf der Registerkarte "Zusammenfassung " Initiator für Links für Initiatoren und Initiiert von Links für die von ihnen verursachten Ereignisse angezeigt. Klicken Sie darauf, um zwischen den entsprechenden Ereignissen zu springen.

Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden

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

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

   • Funktion ausblenden (H)
   • Untergeordnete Elemente ausblenden (C)
   • Wiederholte untergeordnete Elemente ausblenden (R)
   • Untergeordnete Elemente zurücksetzen (U)
   • Ablaufverfolgung zurücksetzen (T)
   • Skript zur Ignorierliste hinzufügen (I)

   Neben dem Funktionsnamen wird eine Schaltfläche "Ausgeblendete Zahl)" mit ausgeblendeten untergeordneten Elementen angezeigt.

2. Um die Anzahl der ausgeblendeten untergeordneten Elemente anzuzeigen, bewegen Sie den Mauszeiger über die Dropdownschaltfläche "Anzahl ausgeblendeter".

3. Um eine Funktion mit ausgeblendeten untergeordneten Elementen oder das gesamte 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 .

Skripte im Flammendiagramm ignorieren

Um der Ignorierliste ein Skript hinzuzufügen, klicken Sie mit der rechten Maustaste auf ein Skript im Diagramm und wählen Sie Skript zum Ignorieren hinzufügen aus.

Das Diagramm reduziert ignorierte Skripts, markiert sie als In der Ignorierliste und fügt sie den benutzerdefinierten Ausschlussregeln in Anpassen und Steuern der DevTools-Einstellungen () >Ignorieren>hinzu. Ignorierte Skripts werden so lange 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 bietet DevTools neben dem Hauptabschnitt zum Analysieren von Aktivitäten auch drei Tabellenansichten zum Analysieren von Aktivitäten. 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 meiste 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 schneller finden, was Sie suchen, verfügen alle drei Registerkarten neben der Filterleiste über Schaltflächen zum erweiterten Filtern:

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

• Die Schaltfläche "Suche unter Berücksichtigung der Groß-/Kleinschreibung aktivieren " ().

Jede tabellarische Ansicht im Leistungstool enthält Links für Aktivitäten wie Funktionsaufrufe. Um Sie beim Debuggen zu unterstützen, sucht DevTools die entsprechenden Funktionsdeklarationen in Quelldateien. Wenn die entsprechenden Quellzuordnungen vorhanden und aktiviert sind, findet DevTools außerdem automatisch die Originaldateien.

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 Activity Tabs Demo ausführen und die Quelle unter MicrosoftEdge / Demos > /devtools-performance-activitytabs/ anzeigen.

Stammaktivitäten

Hier ist eine Erläuterung des Konzepts der Stammaktivitäten, das in den Abschnitten " Anrufstruktur ", " Bottom-Up"- Registerkarte und "Ereignisprotokoll " erwähnt wird.

Stammaktivitäten sind Aktivitäten, die dazu führen, dass der Browser einige Aufgaben ausführt. 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 die Stammaktivitäten oben im Diagramm. Auf den Registerkarten "Anrufstruktur" und "Ereignisprotokoll " sind Stammaktivitäten die Elemente der obersten Ebene.

Ein Beispiel für Stammaktivitäten finden Sie unten auf der Registerkarte Aufrufstruktur.

Die Registerkarte "Aufrufstruktur"

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

Auf der Registerkarte "Anrufstruktur" werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Wie Sie einen Teil einer Aufzeichnung auswählen können, erfahren Sie oben unter Auswählen eines Teils einer Aufzeichnung.

In der vorherigen Abbildung sind die Elemente der obersten Ebene in der Spalte "Aktivitäten ", z. B Event Timing. , Stammaktivitäten. Die Schachtelung stellt den Aufrufstapel dar. Zum Beispiel in der vorherigen Abbildung verursachte Event: mouseup, die verursachteFunction Call, Event Timing welche Ursache (anonymous)und so weiter.

Die Selbstzeit stellt die Zeit dar, die direkt in dieser Aktivität verbracht wird. Die Gesamtzeit stellt die Zeit dar, die für diese Aktivität oder eines der Kinder 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ätsnamen zu filtern.

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

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

Die Registerkarte "Von unten nach oben"

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

Auf der Registerkarte "Bottom-up" werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Wie Sie einen Teil einer Aufzeichnung auswählen können, erfahren Sie oben unter Auswählen eines Teils einer Aufzeichnung.

Im Flammendiagramm des Hauptabschnitts der vorherigen Abbildung wurde fast die gesamte Zeit damit verbracht, die aFunktionen , bund c auszuführen. Die wichtigsten Aktivitäten auf der Registerkarte Von unten nach oben in der vorherigen Abbildung sind ebenfalls a, b, und c. Auf der Registerkarte Bottom-up ist Minor GCdie nächstteuerste Aktivität .

Die Spalte Selbstzeit stellt die aggregierte Zeit dar, die direkt in dieser Aktivität verbracht wurde, über alle Vorkommen hinweg.

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

Die 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 die Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Wie Sie einen Teil einer Aufzeichnung auswählen können, erfahren Sie oben unter Auswählen eines Teils einer Aufzeichnung.

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

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 für diese Aktivität oder für eines der untergeordneten Elemente aufgewendet 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 in Anspruch genommen haben. Standardmäßig ist das Menü "Dauer " auf "Alle" eingestellt, was bedeutet, dass alle Aktivitäten angezeigt werden.

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

Anzeigen von Leistungsindikatoren

In einer Überlagerung mit vertikalen Linien entlang der Leistungsablaufverfolgung können Sie wichtige Leistungsindikatoren sehen, z. B.:

• First Paint (FP)
  • First Paint (FP) im Glossar bei MDN.
• Erstes Contentful Paint (FCP)
  • First Contentful Paint (FCP) im Glossar bei MDN.
  • PerformancePaintTiming bei MDN.
• Largest Contentful Paint (LCP)
  • Largest Contentful Paint (LCP) in Glossary bei MDN.
  • LargestContentfulPaint bei MDN.
• DOMContentLoaded-Ereignis (DCL)
  • DOMContentLoaded-Ereignis (DCL) bei MDN.
• Onload-Ereignis (L)
  • Onload-Ereignis (L) bei MDN.

Zeigen Sie mit der Maus auf den Namen einer Markierung am unteren Rand der Ablaufverfolgung, um deren Zeitstempel anzuzeigen.

Benutzerdefinierte Anzeigedauern anzeigen

Sehen Sie sich auf der Spur "Timings " Ihre benutzerdefinierten Leistungsmarker an, z. B.:

• performance.mark() Anrufe erfordern.

• performance.measure() Anrufe erfordern.

Wählen Sie eine Markierung aus, um weitere Details auf der Registerkarte "Zusammenfassung " anzuzeigen, einschließlich Zeitstempel, Gesamtzeit, Selbstzeit und Objekt detail . Für performance.mark() und performance.measure() Aufrufe zeigt die Registerkarte auch Stapelüberwachungen an.

Interaktionen anzeigen

Verwenden Sie den Abschnitt Interaktionen , um Benutzerinteraktionen zu suchen und zu analysieren, die während der Aufzeichnung stattgefunden haben:

Eine rote Linie am unteren Rand einer Interaktion stellt die Zeit dar, die für das Warten auf den Hauptthread aufgewendet wurde.

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

Layoutverschiebungen anzeigen

Ansicht Layout verschiebt sich auf der Layout-Shifts-Spur. Verschiebungen werden als violette Rauten dargestellt und basierend auf ihrer Nähe auf der Zeitleiste in Clustern (violetten Linien) gruppiert.

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

Um weitere Informationen zu einer oder mehreren Layoutverschiebungen auf der Registerkarte "Zusammenfassung " mit Zeitangaben, Punktzahlen, Elementen und potenziellen Schuldigen anzuzeigen, klicke auf die entsprechende Raute oder den entsprechenden Cluster.

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

Anzeigen von Animationen

Anzeigen von Animationen auf der Animationsspur. Animationen werden beispielsweise als entsprechende CSS-Eigenschaften oder -Elemente benannt, falls vorhanden, transform oder my-element. Nicht-Compositing-Animationen sind mit roten Dreiecken in der oberen rechten Ecke gekennzeichnet.

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

Anzeigen der GPU-Aktivität

Anzeigen der GPU-Aktivität im Abschnitt GPUdes Leistungstools :

Anzeigen von Raster-Aktivitäten

Zeigen Sie Raster-Aktivitäten im Abschnitt Thread-Pool 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. Siehe den Abschnitt Rahmen weiter unten.

• Verwenden Sie das FPS-Messgerät für eine Echtzeitschätzung der FPS, während die Seite ausgeführt wird. Siehe Bilder pro Sekunde in Echtzeit mit dem FPS-Messgerät anzeigen, unten.

Der Abschnitt "Rahmen"

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

Bewegen Sie den Mauszeiger über einen Rahmen, um eine QuickInfo mit weiteren Informationen dazu anzuzeigen:

Das obige Beispiel zeigt eine QuickInfo, wenn Sie auf einen Rahmen zeigen.

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

• Leerlaufrahmen (weiß). Keine Änderungen.

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

• Teilweise dargestellter Rahmen (gelb mit einem spärlichen breiten Strichlinienmuster). Microsoft Edge hat sein Bestes getan, um zumindest einige visuelle Updates rechtzeitig zu rendern. Zum Beispiel, wenn die Arbeit des Hauptthreads des Renderer-Prozesses (Canvas-Animation) verspätet ist, der Compositor-Thread (Scrollen) jedoch rechtzeitig ist.

• Drop-Frame (rot mit einem dichten einfarbigen Linienmuster). Microsoft Edge kann den Frame nicht in angemessener Zeit rendern.

Klicken Sie auf einen Frame, um weitere Informationen über den Frame auf der Registerkarte "Zusammenfassung " unten im Tool "Leistung" anzuzeigen. DevTools umreißt den ausgewählten Frame blau:

Netzwerkanforderungen anzeigen

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:

Anfragen im Netzwerkabschnitt sind wie folgt farbcodiert:

• Blauer Hintergrund: HTML-Anforderung.
• Lila Hintergrund: CSS-Anfrage.
• Dunkelgelber Hintergrund: JS-Anfrage.
• Grüner Hintergrund: Bildanfrage.

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 Fotogalerie-Anfrage in der oberen linken Ecke des Abschnitts Netzwerk eine höhere Priorität.

Anforderungen können auf der linken und rechten Seite Linien aufweisen, und ihre Balken können in zwei Farben unterteilt sein. Hier ist, was diese Linien und Farben darstellen:

• Die linke Linie ist alles, was der Connection Start Gruppe der Ereignisse entspricht, einschließlich. Mit anderen Worten, es ist alles davor Request Sent, exklusiv.

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

• Der dunkle Teil der Leiste ist Content Download.

• Die richtige Zeile ist im Wesentlichen die Zeit, die für das Warten auf den Hauptthread aufgewendet wird. Dies wird auf der Registerkarte "Timing " nicht dargestellt.

Anzeigen von Arbeitsspeichermetriken

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

DevTools zeigt ein Speicherdiagramm oberhalb der Registerkarte "Zusammenfassung" an. Es gibt auch ein Diagramm unterhalb des NET-Diagramms mit dem Namen HEAP. Das HEAP-Diagramm enthält die gleichen Informationen wie die JS-Heaplinie im Speicherdiagramm :

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

Im Diagramm wird nur der Bereich der Aufzeichnung angezeigt, der aktuell ausgewählt ist. In der vorherigen Abbildung zeigt das Diagramm "Speicher" z. B. nur die Speicherauslastung zwischen etwa 3600 ms und 6200 ms.

Siehe auch:

• Visualisieren von Speicherverlusten (Leistungstool: Speicherkontrollkästchen) weiter unten.

Anzeigen der Dauer eines Teils einer Aufzeichnung

Bei der Analyse eines Abschnitts wie Netzwerk oder Main benötigen Sie manchmal eine genauere Schätzung, wie lange bestimmte Ereignisse gedauert haben. Halten Sie die UMSCHALTTASTE gedrückt, klicken und halten 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 Mitschreiben 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 Screenshots auch anzeigen, indem Sie im Abschnitt Rahmen einen Rahmen auswählen. DevTools zeigt eine kleine Version des Screenshots auf der Registerkarte "Zusammenfassung " an:

Zum Vergrößern des Screenshots klicken Sie auf die Miniaturansicht auf der Registerkarte "Zusammenfassung ".

Anzeigen von Ebeneninformationen

So zeigen Sie erweiterte Ebeneninformationen zu einem Rahmen an:

1. Klicken Sie im Tool "Leistung" auf die Schaltfläche "Einstellungen mitschreiben" (), und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation aktivieren (langsam).

2. Wählen Sie im Abschnitt Rahmen einen Rahmen aus. DevTools zeigt Informationen zu den Ebenen auf der Registerkarte "Ebenen " unten im Leistungstool 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 von Webseiten-Layern, Z-Index und DOM mithilfe des 3D-Ansichtswerkzeugs.

Paint-Profiler anzeigen

So zeigen Sie erweiterte Informationen zu einem Malereignis an:

1. Klicken Sie im Tool "Leistung" auf die Schaltfläche "Einstellungen mitschreiben" (), und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation aktivieren (langsam).

2. Wählen Sie im Hauptbereich 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 Tool "Leistung" auf die Schaltfläche "Einstellungen mitschreiben" (), und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation aktivieren (langsam).

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

  

1. Wählen Sie im Hauptabschnitt ein Ereignis "Stil neu berechnen " aus. Auf der Registerkarte "Selektorstatistiken " zeigt DevTools Informationen zu den Selektoren der CSS-Regeln an, die während dieses Ereignisses neu berechnet wurden.

Siehe auch:

• Analysieren Sie die Leistung des CSS-Selektors während "Stil neu berechnen"-Ereignissen

Anzeigen von Nachrichten zwischen Fenstern, iframes und dedizierten Workern

Das DevTools-Experiment Bereich "Leistung": show postMessage dispatch and handling flowsverbessert denHauptabschnitt des Leistungstools, um Ihnen zu helfen, Ereignisse und Handler schnell zu identifizieren postMessage , indem Ereignisse, die durch die postMessage Methode ausgelöst werden, von anderen Ereignissen unterschieden werden, die im Tool Leistung angezeigt werden. Mit diesem Experiment können Sie Leistungsprobleme untersuchen, die mit dem Posten von Nachrichten in verschiedenen Threads einer Anwendung zusammenhängen.

Ohne dieses Experiment werden Ereignisse, die durch das Verteilen und Verarbeiten von Nachrichten zwischen Threads einer Anwendung ausgelöst werden, als generische Skriptereignisse für Funktionsaufrufe angezeigt. Wenn dieses Experiment aktiviert ist:

• postMessage Versandereignisse werden als Schedule postMessage angezeigt.
• postMessage Handlerereignisse werden als Bei Nachricht angezeigt:

Anhand dieses Experiments können Sie untersuchen, wann ein postMessage Anruf stattgefunden hat und wie lange sich die Nachricht in der Warteschlange befand, bevor der postMessage Handler startet. Die Verteilungsereignisse werden durch Initiatorpfeile mit Handlerereignissen verknüpft, die angezeigt werden, wenn Sie auf einen der beiden Ereignistypen klicken:

Um dieses Feature zu verwenden, wählen Sie in DevTools die Option Anpassen und steuern derDevTools-Einstellungen> () > Experimentieren Sie das Kontrollkästchen Leistungsbereich: show postMessage dispatch and handling flows, click the close (X) and then click the Reload DevTools.

Siehe auch:

• Referenz der Leistungsaufzeichnung
• postMessage Ablaufverfolgungsereignisse demo (gerendert)
• postMessage Trace Events demo (Quellcode)

WebSocket-Nachrichten anzeigen

WebSocket-Aktivitäten werden im Leistungstool auf der Netzwerkspur angezeigt, um JavaScript-Aktivitäten mit WebSocket-Meldungen zu korrelieren. Auf diese Weise kann ermittelt werden, ob Latenzprobleme von der Analyse einer Nachricht durch den Client oder von der Antwort des Servers herrühren.

So zeigen Sie WebSocket-Meldungen im Leistungstool an:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, die WebSocket-Nachrichten sendet, z. B. die einfache Chat-App.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in der Aktivitätsleiste das Tool Leistung () aus.

4. Klicken Sie oben links im Tool "Leistung " auf die Schaltfläche "Aufzeichnen " ().

5. Geben Sie auf der Chatwebseite im Textfeld Benutzername einen Namen ein, z. B. "John", und klicken Sie dann auf die Schaltfläche "Verbinden ".

   Am unteren Rand des Chatformulars wird eine Meldung angezeigt, z. B. "John:v8g... verbunden ist."

6. Geben Sie im Textfeld Nachricht senden eine Nachricht ein, z. B. "Hallo", und klicken Sie dann auf die Schaltfläche Senden .

   In der Chat-App wird die Nachricht angezeigt, z. B. "Hallo":

   

   WebSocket-Datenverkehr wird generiert.

7. Klicken Sie oben links im Leistungstool auf die Schaltfläche Stopp ().

   Oder klicken Sie in der Mitte des Leistungstools auf die Schaltfläche "Stopp ".

   Im Leistungstool wird die Zeitleiste angezeigt.

8. Erweitern Sie die Netzwerkspur.

9. Klicken Sie auf eine vertikale goldene Linie.

10. Unten im Tool "Leistung " auf der Registerkarte "Zusammenfassung " werden Informationen zur ausgewählten WebSocket-Nachricht angezeigt, z. B.:

    • WebSocket-Handshake senden
    • WebSocket-Handshake empfangen
    • WebSocket-Meldung empfangen:

    

Siehe auch:

• Analysieren der Meldungen einer WebSocket-Verbindung in der Referenz zu Netzwerkfeatures.
• Nachverfolgen von Ereignisinitiatoren (siehe oben).
• Analysieren der Laufzeitleistung (Tutorial)

Analysieren der Renderingleistung mit dem Renderingtool

Verwenden Sie das Renderingtool , um die Renderleistung Ihrer Seite zu visualisieren. Das Rendering-Tool ist ein Schnellansichtstool . Wenn Sie es über das Befehlsmenü öffnen, wird es unten in DevTools geöffnet.

So öffnen Sie das Renderingtool :

1. Öffnen Sie eine Webseite, z. B. "Träge Animation", in einem neuen Fenster oder auf einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wenn der Schnellansichtsbereich nicht angezeigt wird, wählen Sie DevTools anpassen und steuern () >Schnellansichtsbereich umschalten.

   Oder drücken Sie ESC.

4. Klicken Sie auf der Symbolleiste der Schnellansicht auf die Schaltfläche Weitere Tools ("), und wählen Sie dann "Rendern" aus.

   Das Renderingtool wird im Schnellansichtsfenster geöffnet:

   

Siehe auch:

• Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder für Personen mit Sehstörungen aussieht

Bilder pro Sekunde in Echtzeit mit dem FPS-Meter anzeigen

Die FPS-Anzeige ist eine Überlagerung, die in der oberen linken 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-Messung:

1. Öffnen Sie das Renderingtool . Weitere Informationen findest du oben unter Analysieren der Renderingleistung mit dem Renderingtool.

2. Aktivieren Sie das Kontrollkästchen "Frame-Rendering-Statistiken ". Die Überlagerung der FPS-Anzeige wird auf der gerenderten Webseite angezeigt:

   

Malereignisse in Echtzeit mit Paint Flashing anzeigen

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

So aktivieren Sie "Paint-Flashing":

1. Öffnen Sie das Renderingtool . Weitere Informationen findest du oben unter Analysieren der Renderingleistung mit dem Renderingtool.

2. Aktivieren Sie das Kontrollkästchen "Paint Flashing ". Grüne Umrisse werden auf der gerenderten Webseite angezeigt:

   

Anzeigen einer Überlagerung von Ebenen mit Ebenenrändern

So zeigen Sie eine Überlagerung von Ebenenrändern und Kacheln auf der Seite an:

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

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

   

Siehe die Kommentare in debug_colors.cc für eine Erklärung der Farbcodierungen.

Finden Sie Probleme mit der Bildlaufleistung in Echtzeit

Verwenden Sie das Kontrollkästchen Probleme mit der Bildlaufleistung , um Elemente der Seite zu identifizieren, die Ereignis-Listener im Zusammenhang mit dem Scrollen haben, die die Leistung der Seite beeinträchtigen können. DevTools skizziert die potenziell problematischen Elemente in Blaugrün.

So zeigen Sie Probleme mit der Scrollleistung an:

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

2. Aktivieren Sie das Kontrollkästchen Probleme mit der Bildlaufleistung . Potenziell problematische Elemente werden beschrieben:

   

Siehe auch:

• Langsame Bildlaufrects (Kontrollkästchen) in Navigieren Sie mit dem Tool 3D-Ansicht durch Webseiten-Layer, Z-Index und DOM.

Lokale Schriftarten deaktivieren

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" aktiviert ist, ignoriert DevTools die local() Schriftarten und ruft jede Schriftart aus dem Netzwerk ab:

Diese Funktion 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 einfacher zu machen:

• Debuggen und Messen der Ladeleistung und Optimierung von Webfonts.
• Ü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 Webfont.

Speicherverluste visualisieren (Leistungstool: Kontrollkästchen Speicher)

Verwenden Sie als Ausgangspunkt zum Untersuchen der Speicherauslastung der Webseite das Kontrollkästchen Speicher des Leistungstools. (Oder: Überwachen Sie die Speichernutzung in Echtzeit (Browser Task-Manager).)

Mit dem Tool "Leistung " können Sie die Speicherauslastung einer Seite im Zeitverlauf visualisieren.

1. Öffnen Sie in DevTools das Leistungstool .

2. Aktivieren Sie das Kontrollkästchen "Arbeitsspeicher ".

3. Erstellen Sie eine Aufzeichnung gemäß Aufzeichnen-Leistung, oben.

Es empfiehlt sich, die 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 " Garbage ".

Um Speicheraufzeichnungen zu demonstrieren, betrachten Sie den folgenden Code:

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 geklickt wird, auf die im Code verwiesen wird, werden 10.000 div Knoten an den Dokumenttext angefügt, und eine Zeichenfolge von 1.000.000 x Zeichen wird auf das x Array übertragen. Die Ausführung des vorherigen Codes erzeugt eine Aufzeichnung im Tool "Leistung ":

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

Nun eine Analyse des Codes im Vergleich zur vorherigen Abbildung. Wenn du den Knotenzähler (das grüne Diagramm) überprüfst, stimmt er sauber 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-Heap-Diagramm (das blaue Diagramm) ist nicht so einfach. Gemäß den Best Practices ist der erste Dip tatsächlich eine erzwungene Garbage Collection (klicken Sie auf die Schaltfläche Collect Garbage ).

Im Verlauf der Aufzeichnung werden die JS-Heapgrößenspitzen angezeigt. Dies ist natürlich und zu erwarten: Der JavaScript-Code erstellt die DOM-Knoten bei jeder Schaltfläche, die Sie anklicken, und leistet viel Arbeit, wenn er die Zeichenfolge von einer Million Zeichen erstellt.

Das Wichtigste hier ist die Tatsache, dass der JS-Heap höher endet als er begonnen hat (der "Anfang" ist hier der Punkt nach der erzwungenen Garbage Collection). Wenn Sie in der realen Welt dieses Muster einer zunehmenden JS-Heap- oder Knotengröße sehen, würde dies möglicherweise auf ein Speicherleck hindeuten.

Siehe auch:

• Anzeigen der Arbeitsspeichermetriken weiter oben.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Begriffen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.

Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.