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 Einführung in das Leistungstool.

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

Ö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 ().

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

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

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

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 der erweiterten Renderinginstrumentation

Aktivieren Sie die erweiterte Renderinginstrumentation, um weitere Renderinginformationen aufzuzeichnen:

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

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

Wenn die erweiterte Renderinginstrumentierung aktiviert ist, zeichnet DevTools weitere Informationen zum Rendern der Seite auf, z. B. Ebeneninformationen und CSS-Selektorstatistiken. Die Leistung der Seite kann beeinträchtigt werden.

Weitere Informationen finden Sie z. B. unter Anzeigen von Ebeneninformationen und Anzeigen von CSS-Selektorstatistiken weiter unten.

Speichern einer Aufzeichnung

Um eine Aufzeichnung als Datei auf Ihrem Gerät zu speichern, klicken Sie mit der rechten Maustaste auf die Aufzeichnung, und wählen Sie dann Profil speichern aus:

Laden einer Aufzeichnung

Um eine Aufzeichnung aus einer Datei zu laden, 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.

Auswählen eines Teils einer Aufzeichnung

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.

Suchaktivitäten

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

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

   Das Suchfeld wird unten im Leistungstool angezeigt:

   

2. Geben Sie eine Abfrage in das Suchfeld ein, z. B. "Stil neu berechnen", um alle Aktivitäten zu finden, die mit dieser Abfrage übereinstimmen.

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

So ändern Sie die Abfrageeinstellungen:

• Um bei der Abfrage die Groß-/Kleinschreibung zu berücksichtigen, klicken Sie auf die Schaltfläche Groß-/Kleinschreibung.

• Wenn Sie einen regulären Ausdruck in Ihrer Abfrage verwenden möchten, klicken Sie auf die Schaltfläche Regex ().

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

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.

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, bei denen die meiste Zeit direkt verbracht 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 .

Stammaktivitäten

Öffnen Sie die Webseite Aktivitätsregisterkarten-Demo in einem neuen Fenster oder einer neuen Registerkarte. Die Aktivitätsregisterkarten sind die RegisterkartenBottom-Up, Aufrufstruktur und Ereignisprotokoll am unteren Rand des Leistungstools . Auf diesen Registerkarten werden Stammaktivitäten angezeigt.

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.

Registerkarte "Bottom-Up"

Öffnen Sie die Webseite Aktivitätsregisterkarten-Demo in einem neuen Fenster oder einer neuen Registerkarte.

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

Auf der Registerkarte Bottom-Up 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 wichtigsten Aktivitäten auf der Registerkarte Bottom-Up 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.

Die Registerkarte "Aufrufstruktur"

Öffnen Sie die Webseite Aktivitätsregisterkarten-Demo in einem neuen Fenster oder einer neuen Registerkarte.

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

Auf der Registerkarte Aufrufstruktur 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 "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 175.7 ms für das ausgewählte Element in der vorherigen Abbildung, dass die Aktivität 175,7 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 der GPU-Aktivität

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

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.

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.

• 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:

Wählen Sie einen Frame aus, 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).

• 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 neues Speicherdiagramm über der Registerkarte Zusammenfassung an. Unter dem NET-Diagramm befindet sich auch ein neues 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 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.

Anzeigen von Nachrichten zwischen Fenstern, iFrames und dedizierten Workern

Das DevTools-Experiment Timeline: Show postMessage dispatch and handling flows 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 Zeitachse: PostNachrichtenversand und -verarbeitung 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.

So öffnen Sie das Renderingtool

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. Klicken Sie in DevTools auf der Aktivitätsleiste auf die Schaltfläche Weitere Tools ().

3. Klicken Sie im Dropdownmenü auf Rendering . Das Renderingtool wird angezeigt:

   

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.