Referentie prestatiekenmerken

Stay organized with collections Save and categorize content based on your preferences.

Kayce Basques

Sofia Emelianova

Deze pagina biedt een uitgebreid overzicht van de functies van Chrome DevTools met betrekking tot het analyseren van prestaties.

Zie Runtimeprestaties analyseren voor een begeleide zelfstudie over het analyseren van de prestaties van een pagina met Chrome DevTools.

Recordprestaties

U kunt de runtime of laadprestaties opnemen.

Record runtime-prestaties

Registreer runtimeprestaties als u de prestaties van een pagina wilt analyseren terwijl deze wordt uitgevoerd, in plaats van tijdens het laden.

1. Ga naar de pagina die u wilt analyseren.
2. Klik op het tabblad Prestaties in DevTools.

3. Klik op Opnemen .

   

4. Interactie met de pagina. DevTools registreert alle pagina-activiteit die plaatsvindt als gevolg van uw interacties.

5. Klik nogmaals op Opnemen of klik op Stoppen om de opname te stoppen.

Recordbelastingprestaties

Registreer de laadprestaties als u de prestaties van een pagina wilt analyseren terwijl deze wordt geladen, in plaats van terwijl deze wordt uitgevoerd.

1. Ga naar de pagina die u wilt analyseren.
2. Open het Prestatiepaneel van DevTools.

3. Klik op Start profilering en herlaad de pagina DevTools navigeert eerst naar about:blank om alle resterende screenshots en traces te wissen. Vervolgens registreert DevTools prestatiegegevens terwijl de pagina opnieuw laadt en stopt de opname automatisch een paar seconden nadat het laden is voltooid.

   

DevTools zoomt automatisch in op het gedeelte van de opname waar de meeste activiteit plaatsvond.

In dit voorbeeld wordt in het paneel Prestaties de activiteit tijdens het laden van een pagina weergegeven.

Maak screenshots tijdens het opnemen

Schakel het selectievakje Schermafbeeldingen in om tijdens de opname van elk frame een schermafbeelding te maken.

Zie Een schermafbeelding bekijken voor meer informatie over hoe u met schermafbeeldingen kunt werken.

Garbage collection forceren tijdens het opnemen

Terwijl u een pagina opneemt, klikt u op Garbage- mop verzamelen om garbage collection af te dwingen.

Opname-instellingen weergeven

Klik op Vastleginstellingen om meer instellingen bloot te leggen die betrekking hebben op de manier waarop DevTools prestatie-opnamen maakt.

JavaScript-voorbeelden uitschakelen

Standaard worden op het hoofdspoor van een opname gedetailleerde call stacks weergegeven van JavaScript-functies die tijdens de opname zijn aangeroepen. Om deze call stacks uit te schakelen:

1. Open de Capture-instellingen menu. Zie Opname-instellingen weergeven .
2. Schakel het selectievakje JavaScript-voorbeelden uitschakelen in.
3. Maak een opname van de pagina.

De volgende schermafbeeldingen laten het verschil zien tussen het in- en uitschakelen van JavaScript-samples. De hoofdtrack van de opname is veel korter wanneer sampling is uitgeschakeld, omdat alle JavaScript-aanroepstacks worden weggelaten.

Dit voorbeeld toont een opname met uitgeschakelde JS-samples.

Dit voorbeeld toont een opname met ingeschakelde JS-samples.

Beperk het netwerk tijdens het opnemen

Om het netwerk te beperken tijdens het opnemen:

1. Open de Capture-instellingen menu. Zie Opname-instellingen weergeven .
2. Stel het netwerk in op het gekozen beperkingsniveau.

In het vervolgkeuzemenu kan het paneel Prestaties ook een standaardvoorinstelling voor snelheidsbeperking aanbevelen of een voorinstelling die de ervaring van uw gebruikers benadert op basis van veldgegevens .

CPU-snelheid verlagen tijdens het opnemen

Om de CPU te beperken tijdens het opnemen:

1. Open de Capture-instellingen menu. Zie Opname-instellingen weergeven .
2. Stel de CPU in op het gekozen CPU-beperkingsniveau.

Throttling is relatief ten opzichte van de mogelijkheden van uw computer. De optie 2x vertragen zorgt er bijvoorbeeld voor dat uw CPU twee keer langzamer werkt dan normaal. DevTools kunnen de CPU's van mobiele apparaten niet echt simuleren, omdat de architectuur van mobiele apparaten sterk verschilt van die van desktops en laptops.

In het vervolgkeuzemenu kan het paneel Prestaties ook een standaardvoorinstelling voor snelheidsbeperking aanbevelen of een voorinstelling die de ervaring van uw gebruikers benadert op basis van veldgegevens .

CSS-selectorstatistieken inschakelen

Zo bekijkt u de statistieken van uw CSS-regelselectoren tijdens langdurige Recalculate Style -gebeurtenissen:

1. Open de Capture-instellingen menu. Zie Opname-instellingen weergeven .
2. Vink het selectievakje CSS-selectorstatistieken inschakelen aan.

Zie voor meer informatie Hoe u de CSS-selectorprestaties kunt analyseren tijdens gebeurtenissen waarbij de stijl opnieuw wordt berekend .

Geavanceerde verfinstrumentatie inschakelen

Gedetailleerde verfinstrumentatie bekijken:

1. Open de Capture-instellingen menu. Zie Opname-instellingen weergeven .
2. Schakel het selectievakje Geavanceerde tekeninstrumentatie inschakelen in.

Zie Lagen weergeven en Verfprofiel weergeven voor meer informatie over hoe u met de verfgegevens kunt werken.

Een opname annoteren en delen

Bekijk, annoteer en deel uw prestatiebevindingen .

Wis de vorige opname

Nadat u een opname hebt gemaakt, drukt u op Opname wissen om de opname uit het paneel Prestaties te wissen.

Een prestatie-opname analyseren

Nadat u de runtime-prestaties of laadprestaties hebt vastgelegd, biedt het paneel Prestaties veel gegevens waarmee u de prestaties van wat er zojuist is gebeurd, kunt analyseren.

Krijg bruikbare inzichten

Het paneel Prestaties consolideert prestatie-inzichten uit het Lighthouse -rapport en het inmiddels verouderde paneel Prestatie-inzichten . Deze inzichten kunnen suggesties bieden voor prestatieverbetering en bieden een gerichte analyse van de volgende prestatieproblemen, waaronder, maar niet beperkt tot:

• LCP en INP per subonderdeel
• LCP-verzoekdetectie
• De boosdoeners van lay-outverschuivingen
• Renderblokkeringsverzoeken
• Derden
• Beeldlevering
• Latentie bij documentaanvraag
• Viewport-optimalisatie voor mobiel
• CSS-selectorkosten
• Gedwongen terugvloeiing
• Optimaliseer DOM-grootte
• Netwerk afhankelijkheidsboom

Om gebruik te maken van inzichten:

1. Maak een opname van uw optreden .
2. Open het tabblad 'Inzichten ' in de linkerzijbalk van het paneel 'Prestaties' , vouw verschillende secties uit en beweeg de muis over de items om erop te klikken. Het paneel 'Prestaties' markeert de bijbehorende gebeurtenissen in de trace.

Navigeer door de opname

Om u te helpen navigeren, doet het Prestatiepaneel het volgende als u de muisaanwijzer over de prestatietracering beweegt:

• Wanneer u met de muis over het Tijdlijnoverzicht beweegt, wordt er een verticale markering weergegeven die de volledige prestatietracering beslaat.
• Markeert een bereik in het Tijdlijnoverzicht wanneer u de muisaanwijzer over items in het hoofdspoor beweegt.

Om uw uitvoeringsopname nauwkeurig te bekijken, kunt u een deel van de opname selecteren, door een lange vlamgrafiek scrollen, in- en uitzoomen en broodkruimels gebruiken om tussen zoomniveaus te springen.

Gebruik sneltoetsen om te navigeren

Als u sneltoetsen wilt gebruiken om snel door de opname te navigeren, kiest u eerst de gewenste toetsenbordnavigatiestijl.

Klik in de rechterbovenhoek van het paneel op Help , Snelkoppelingen weergeven en selecteer een van de volgende opties:

• Klassiek : Zoomen met het muiswieltje (touchpad omhoog of omlaag) en verticaal scrollen met Shift + muiswieltje.
• Modern : Verticaal scrollen met het muiswiel, horizontaal scrollen met Shift + muiswiel en zoomen met Command/Control + muiswiel.

In het dialoogvenster Snelkoppelingen vindt u ook een overzicht van de beschikbare snelkoppelingen.

Selecteer een gedeelte van de opname

Onder de actiebalk van het paneel Prestaties en boven aan de opname ziet u het overzicht van de Tijdlijn met de CPU- en NET -grafieken.

Om een ​​gedeelte van een opname te selecteren, klikt u op het Tijdlijnoverzicht , houdt u de muisknop ingedrukt en sleept u vervolgens naar links of rechts.

Om een ​​gedeelte te selecteren met behulp van het toetsenbord:

1. Focus op het hoofdspoor of een van de aangrenzende sporen.
2. Gebruik de toetsen W , A , S en D om respectievelijk in te zoomen, naar links te bewegen, uit te zoomen en naar rechts te bewegen.

Om een ​​gedeelte te selecteren met behulp van het trackpad:

1. Beweeg de muis over het tijdlijnoverzicht of over een van de tracks ( Hoofdtrack en de tracks ernaast).
2. Veeg met twee vingers omhoog om uit te zoomen, veeg naar links om naar links te gaan, veeg omlaag om in te zoomen en veeg naar rechts om naar rechts te gaan.

Maak broodkruimels en spring tussen zoomniveaus

Met het Tijdlijnoverzicht kunt u meerdere geneste broodkruimels achter elkaar maken, de zoomniveaus verhogen en vervolgens vrij tussen de zoomniveaus springen.

Om broodkruimels te maken en te gebruiken:

1. Selecteer in het Tijdlijnoverzicht een gedeelte van de opname.
2. Beweeg de muis over de selectie en klik op de knop 'N ms zoom_in' . De selectie wordt uitgebreid en vult het tijdlijnoverzicht . Bovenaan het tijdlijnoverzicht begint een reeks broodkruimels te ontstaan.
3. Herhaal de vorige twee stappen om nog een geneste breadcrumb te maken. U kunt breadcrumbs blijven nesten zolang het selectiebereik groter is dan 5 milliseconden.
4. Om naar een gekozen zoomniveau te springen, klikt u op het overeenkomstige broodkruimelpad in de keten bovenaan het Tijdlijnoverzicht .

Om de onderliggende breadcrumbs van een breadcrumb te verwijderen, klikt u met de rechtermuisknop op de bovenliggende breadcrumb en selecteert u Onderliggende breadcrumbs verwijderen .

Blader door een lange vlamgrafiek

Om door een lange vlamgrafiek in het hoofdspoor of een van de aangrenzende sporen te scrollen, klikt u en houdt u de muisknop ingedrukt. Vervolgens sleept u in de gewenste richting totdat wat u zoekt in beeld komt.

Negeer irrelevante scripts in de vlamgrafiek

Om u beter op uw code te kunnen concentreren, kunt u irrelevante scripts toevoegen aan de negeerlijst.

Om scripts te negeren, voert u een van de volgende handelingen uit:

• Klik op 'Comprimeren ' in het dialoogvenster 'Instellingen negeerlijst weergeven' in de bovenste actiebalk en typ een reguliere expressie in het invoerveld. De vlamgrafiek past de nieuwe regel toe terwijl u typt.
• Klik met de rechtermuisknop op een script en selecteer Script toevoegen aan negeerlijst . Het paneel Prestaties voegt dit script toe aan de lijst in het dialoogvenster 'Instellingen negeerlijst weergeven' .

Het paneel zal automatisch overmatige nesting van dergelijke scripts inklappen en ze markeren als On ignore list ( REGULAR_EXPRESSION ) .

In het dialoogvenster Instellingen negeerlijst weergeven kunt u de regels voor de negeerlijst in- en uitschakelen.

Om een ​​script uit de negeerlijst te verwijderen, klikt u er met de rechtermuisknop op in het vlamdiagram en selecteert u Script verwijderen uit negeerlijst. U kunt ook met de muis eroverheen bewegen in het dialoogvenster Instellingen negeerlijst weergeven en op Verwijderen klikken.

DevTools slaat de regels voor de negeerlijst op die u toevoegt in Instellingen > Negeerlijst .

Om alleen op first-party scripts te focussen, vinkt u check_box Dim 3rd parties aan. Het paneel Prestaties zal third-party scripts grijs weergeven.

Zoekactiviteiten

U kunt zoeken in de activiteiten in het Hoofdspoor en in de verzoeken in het Netwerkspoor .

Om een ​​zoekvak onderaan het paneel Prestaties te openen, drukt u op:

• macOS: Command + F
• Windows, Linux: Control + F

In dit voorbeeld ziet u een reguliere expressie in het zoekvak onderaan die alle activiteiten vindt die beginnen met E

Om door activiteiten te bladeren die overeenkomen met uw zoekopdracht:

• Klik op de knoppen expand_less Vorige of expand_more Volgende .
• Druk op Shift + Enter om de vorige te selecteren of op Enter om de volgende te selecteren.

In het paneel Prestaties wordt een tooltip weergegeven over de activiteit die in het zoekvak is geselecteerd.

Om queryinstellingen te wijzigen:

• Klik op match_case Hoofdlettergevoelig om de query hoofdlettergevoelig te maken.
• Klik op reguliere_expressie Reguliere expressie om een ​​reguliere expressie in uw query te gebruiken.

Om het zoekvak te verbergen, klikt u op Annuleren .

De volgorde van de tracks wijzigen en ze verbergen

Om de prestatietracering overzichtelijk te houden, kunt u de volgorde van de tracks wijzigen en de irrelevante tracks verbergen in de trackconfiguratiemodus.

Om tracks te verplaatsen en te verbergen:

1. Om de configuratiemodus te openen, klikt u met de rechtermuisknop op een tracknaam en selecteert u Tracks configureren .
2. Klik op arrow_upward up of arrow_downward down om een ​​track omhoog of omlaag te verplaatsen. Klik op visibility_off om deze te verbergen.
3. Wanneer u klaar bent, klikt u onderaan op Voltooi het configureren van tracks om de configuratiemodus te verlaten.

Bekijk de video om deze workflow in actie te zien.

Het paneel Prestaties slaat de spoorconfiguratie op voor nieuwe traces, maar niet voor volgende DevTools-sessies.

Bekijk de belangrijkste threadactiviteit

Met het hoofdspoor kunt u de activiteit bekijken die heeft plaatsgevonden in de hoofdthread van de pagina.

Klik op een gebeurtenis om meer informatie hierover te bekijken op het tabblad Samenvatting , inclusief maar niet beperkt tot: duur (en eigen duur), link naar de overeenkomstige regel in het bronscript, oorspronkelijke URL (met een entiteitsnaam, indien bekend), stack trace, indien van toepassing, en timingverdeling in een cirkeldiagram.

In het paneel Prestaties wordt de geselecteerde gebeurtenis in blauw weergegeven.

In dit voorbeeld wordt meer informatie over de aanroepgebeurtenis van de functie get weergegeven op het tabblad Samenvatting .

Maak onderscheid tussen first-party- en third-party-evenementen

Overmatige afhankelijkheid van code van derden kan de laadprestaties negatief beïnvloeden. Het paneel Prestaties helpt u visueel onderscheid te maken tussen first-party en third-party events in de trace, zodat u een weloverwogen beslissing kunt nemen over het verminderen of uitstellen van het laden van third-party code om de content van uw pagina te prioriteren.

Om alleen te focussen op de prestaties van first-party code:

1. Zorg ervoor dat er niets is geselecteerd in de prestatietracering of op het tabblad Inzichten . Klik hiervoor op een lege ruimte in de tracering.
2. Vink het vakje 'Dim 3rd Parties' aan in de actiebalk bovenaan. Het paneel 'Prestaties' markeert gebeurtenissen gerelateerd aan derden grijs in de prestatietracering en laat alleen de eerste partij gemarkeerd.

Markeer evenementen met de tabel '1e / 3e partij'

Binnen een geselecteerd bereik in het Tijdlijnoverzicht en wanneer geen van de gebeurtenissen is geselecteerd, wordt op het tabblad Samenvatting een tabel met 1e/3e partijen weergegeven met daarin de respectievelijke overdrachtsgroottes en hoofdthreadtijden van het volgende:

• Eerste-partij-entiteit gemarkeerd met een 1st party badge.
• Alle gedetecteerde entiteiten van derden in het geselecteerde bereik, niet gemarkeerd.
• Extensies gemarkeerd met Extension .
• Andere [unattributed] entiteiten.

Om gerelateerde gebeurtenissen gemarkeerd in de trace te zien en de rest grijs weergegeven, beweegt u de muisaanwijzer over de entiteiten in de tabel. Om de gebeurtenissen van een entiteit gemarkeerd te laten, selecteert u deze in de tabel. Om de markering te verwijderen, klikt u op een lege ruimte in de trace.

Als u activiteiten wilt openen die op deze entiteit zijn gegroepeerd in het tabblad Bottom-up , beweegt u de muis over de entiteit in de tabel en klikt u op account_tree Bottom-up ernaast.

Lees de vlammenkaart

Het paneel Prestaties geeft de activiteit van de hoofdthread weer in een vlamdiagram. De x-as geeft de registratie in de loop van de tijd weer. De y-as geeft de call stack weer. De gebeurtenissen bovenaan veroorzaken de gebeurtenissen eronder.

Dit voorbeeld toont een vlamdiagram in het hoofdspoor . Een click veroorzaakte een anonieme functieaanroep. Deze functie riep op zijn beurt onEndpointClick_ aan, wat handleClick_ aanriep, enzovoort.

Het paneel Prestaties wijst scripts willekeurige kleuren toe om de vlamgrafiek op te splitsen en leesbaarder te maken. In het eerdere voorbeeld zijn functieaanroepen van het ene script lichtblauw gekleurd. Aanroepen van een ander script zijn lichtroze gekleurd. Het donkergeel staat voor scriptactiviteit en de paarse gebeurtenis voor renderingactiviteit. Deze donkergele en paarse gebeurtenissen zijn consistent voor alle opnames.

Lange taken worden ook gemarkeerd met een rode driehoek, en het deel dat langer duurt dan 50 milliseconden wordt rood gearceerd:

In dit voorbeeld duurde de taak meer dan 400 milliseconden. Het gedeelte dat de laatste 350 milliseconden vertegenwoordigt, is daarom rood gearceerd. De eerste 50 milliseconden niet.

Bovendien toont het hoofdspoor informatie over CPU-profielen die zijn gestart en gestopt met de consolefuncties profile() en profileEnd() .

Zie JavaScript-samples uitschakelen om het gedetailleerde vlamdiagram van JavaScript-aanroepen te verbergen. Wanneer JavaScript-samples zijn uitgeschakeld, ziet u alleen de gebeurtenissen op hoog niveau, zoals Event (click) en Function Call .

Volg de initiatiefnemers van evenementen

Op het hoofdspoor kunnen pijlen worden weergegeven die de volgende initiators en de gebeurtenissen die ze veroorzaakten met elkaar verbinden:

• Ongeldigverklaring van stijl of lay-out -> Stijlen of lay-out opnieuw berekenen
• Animatieframe aanvragen -> Animatieframe geactiveerd
• Verzoek om terug te bellen bij inactiviteit -> Branden om terug te bellen bij inactiviteit
• Timer installeren -> Timer geactiveerd
• WebSocket aanmaken -> WebSocket-handshake verzenden... en ontvangen of WebSocket vernietigen
• PostTaak plannen -> PostTaak activeren of PostTaak afbreken

Om de pijlen te zien, zoekt u in het vlammendiagram een ​​initiator of de gebeurtenis die deze heeft veroorzaakt en selecteert u deze.

Indien geselecteerd, toont het tabblad Samenvatting 'Initiator' voor links voor initiators en ' Geïnitieerd door ' voor de gebeurtenissen die ze veroorzaakten. Klik erop om tussen de bijbehorende gebeurtenissen te springen.

Verberg functies en hun kinderen in het vlamdiagram

Om het vlammendiagram in de hoofdthread overzichtelijk te houden, kunt u geselecteerde functies of hun onderliggende functies verbergen:

1. Klik in het hoofdspoor met de rechtermuisknop op een functie en kies een van de volgende opties of druk op de overeenkomstige sneltoets:

   • Verberg functie ( H )
   • Verberg kinderen ( C )
   • Verberg herhalende kinderen ( R )
   • Kinderen resetten ( U )
   • Trace resetten ( T )
   • Script toevoegen aan negeerlijst ( I )

   

   Er verschijnt een vervolgkeuzeknop arrow_drop_down naast de functienaam met verborgen onderliggende items.

2. Om het aantal verborgen kinderen te zien, beweegt u de muis over de vervolgkeuzeknop arrow_drop_down .

   

3. Om een ​​functie met verborgen onderliggende elementen of de gehele vlamgrafiek opnieuw in te stellen, selecteert u de functie en drukt U op U of klikt u met de rechtermuisknop op een functie en selecteert u Trace resetten .

Negeer scripts in de vlamgrafiek

Om een ​​script aan de negeerlijst toe te voegen, klikt u met de rechtermuisknop op een script in de grafiek en selecteert u Script toevoegen aan negeerlijst .

De grafiek vouwt genegeerde scripts samen, markeert ze als 'Op negeerlijst' en voegt ze toe aan de aangepaste uitsluitingsregels in Instellingen > Negeerlijst . Genegeerde scripts worden bewaard totdat u ze uit de trace of uit de aangepaste uitsluitingsregels verwijdert.

Activiteiten in een tabel bekijken

Nadat u een pagina hebt opgenomen, hoeft u niet langer uitsluitend op het hoofdspoor te vertrouwen om activiteiten te analyseren. DevTools biedt ook drie tabelweergaven voor het analyseren van activiteiten. Elke weergave geeft u een ander perspectief op de activiteiten:

• Als u de hoofdactiviteiten wilt bekijken die het meeste werk veroorzaken, gebruikt u het tabblad Aanroepboom .
• Als u de activiteiten wilt bekijken waaraan direct de meeste tijd is besteed, gebruikt u het tabblad Bottom-up .
• Als u de activiteiten wilt bekijken in de volgorde waarin ze tijdens de opname hebben plaatsgevonden, gebruikt u het tabblad Gebeurtenislogboek .

Om u te helpen sneller te vinden wat u zoekt, bevinden zich op alle drie de tabbladen knoppen voor geavanceerd filteren naast de filterbalk :

• match_case Overeenkomende case .
• reguliere_expressie Reguliere expressie .
• match_word Zoek het hele woord .

Elke tabelweergave in het paneel Prestaties bevat koppelingen naar activiteiten zoals functieaanroepen. Om u te helpen bij het debuggen, vindt DevTools de bijbehorende functiedeclaraties in bronbestanden. Als de juiste bronmaps aanwezig en ingeschakeld zijn, vindt DevTools bovendien automatisch de originele bestanden.

Klik op een koppeling om een ​​bronbestand in het paneel Bronnen te openen.

Root-activiteiten

Hier volgt een uitleg van het concept van root-activiteiten dat wordt genoemd in de secties Oproepstructuur , Bottom-up en Gebeurtenislogboek .

Rootactiviteiten zijn activiteiten die de browser aanzetten tot het uitvoeren van een taak. Wanneer u bijvoorbeeld op een pagina klikt, activeert de browser een Event als rootactiviteit. Die Event kan er vervolgens voor zorgen dat een handler wordt uitgevoerd.

In de vlamgrafiek van het hoofdspoor staan ​​rootactiviteiten bovenaan. Op de tabbladen Call Tree en Event Log zijn rootactiviteiten de items op het hoogste niveau.

Zie het tabblad Oproepboom voor een voorbeeld van rootactiviteiten.

Het tabblad Oproepboom

Op het tabblad Oproepboom kunt u zien welke hoofdactiviteiten het meeste werk veroorzaken.

Het tabblad Oproepboom toont alleen activiteiten tijdens het geselecteerde deel van de opname. Zie Een deel van een opname selecteren voor meer informatie over het selecteren van delen.

In dit voorbeeld zijn de items op het hoogste niveau in de kolom Activiteit , zoals Event , Paint en Composite Layers , rootactiviteiten. De nesting vertegenwoordigt de call stack. In dit voorbeeld veroorzaakte de Event de Function Call , die op zijn beurt button.addEventListener veroorzaakte, die op zijn beurt b veroorzaakte, enzovoort.

Eigen tijd vertegenwoordigt de tijd die direct aan die activiteit is besteed. Totale tijd vertegenwoordigt de tijd die aan die activiteit of een van de onderliggende activiteiten is besteed.

Klik op Zelftijd , Totale tijd of Activiteit om de tabel op die kolom te sorteren.

Gebruik het filtervak ​​om gebeurtenissen te filteren op activiteitsnaam.

Standaard staat het menu Groepering ingesteld op Geen groepering . Gebruik het menu Groepering om de activiteitentabel te sorteren op basis van verschillende criteria.

Het tabblad Bottom-up

Via het tabblad Bottom-up kunt u bekijken welke activiteiten in totaal het meeste tijd in beslag namen.

Het tabblad Bottom-up toont alleen activiteiten tijdens het geselecteerde deel van de opname. Zie Een deel van een opname selecteren voor meer informatie over het selecteren van delen.

In de ' Main track flame'-grafiek van dit voorbeeld ziet u dat bijna alle tijd is besteed aan het uitvoeren van de drie aanroepen van wait() . De bovenste activiteit op het tabblad 'Bottom-up' is dus wait . In de 'flame'-grafiek zijn de gele velden onder de aanroepen van wait in feite duizenden Minor GC aanroepen. U ziet dus dat de op één na duurste activiteit op het tabblad 'Bottom-up Minor GC is.

De kolom Eigen tijd geeft de totale tijd weer die rechtstreeks aan die activiteit is besteed, voor alle keren dat die activiteit heeft plaatsgevonden.

De kolom Totale tijd geeft de totale tijd weer die aan die activiteit of aan een van de onderliggende activiteiten is besteed.

Zwaarste stapeltafel

Klik aan de rechterkant van de Aanroepboom of het tabblad Bottom-up op right_panel_open Toon zwaarste stapel om de tabel Zwaarste stapel weer te geven.

Deze tabel laat zien welke onderliggende activiteiten van de geselecteerde activiteit het langst duurden. Beweeg de muis over een item in de tabel om de bijbehorende gebeurtenis gemarkeerd te zien in het hoofdspoor en de rest grijs.

Op deze manier kunt u in de prestatietracering visueel de geneste activiteiten uit de aanroepstack vinden die het meeste tijd kosten.

Het tabblad Gebeurtenislogboek

Via het tabblad Gebeurtenislogboek kunt u activiteiten bekijken in de volgorde waarin ze tijdens de opname hebben plaatsgevonden.

Het tabblad Gebeurtenislogboek geeft alleen activiteiten weer tijdens het geselecteerde deel van de opname. Zie Een deel van een opname selecteren voor meer informatie over het selecteren van delen.

De kolom Starttijd geeft het punt weer waarop die activiteit is gestart, ten opzichte van de start van de opname. De starttijd van 1573.0 ms voor het geselecteerde item in dit voorbeeld betekent dat de activiteit 1573 ms na de start van de opname is gestart.

De kolom Zelftijd geeft de tijd weer die rechtstreeks aan die activiteit is besteed.

De kolom Totale tijd geeft de tijd weer die direct aan de betreffende activiteit of aan een van de onderliggende activiteiten is besteed.

Klik op Starttijd , Eigen tijd of Totale tijd om de tabel op die kolom te sorteren.

Gebruik het filtervak ​​om activiteiten op naam te filteren.

Gebruik het menu Duur om activiteiten te filteren die korter dan 1 ms of 15 ms duurden. Standaard staat het menu Duur ingesteld op Alles , wat betekent dat alle activiteiten worden weergegeven.

Schakel de selectievakjes Laden , Scripting , Rendering of Schilderen uit om alle activiteiten uit die categorieën te filteren.

Prestatiemarkeringen bekijken

In een overlay met verticale lijnen over de prestatietracering kunt u belangrijke prestatiemarkeringen zien, zoals:

• Eerste verf (FP)
• Eerste Contentful Paint (FCP)
• Grootste Contentful Paint (LCP)
• DOMContentLoaded-gebeurtenis (DCL)
• Onload-gebeurtenis (L)

Beweeg de muis over de markernamen onderaan het trace om hun tijdstempel te bekijken.

Bekijk aangepaste timings

Bekijk op het Timings -spoor uw aangepaste prestatiemarkeringen, zoals:

• performance.mark() -aanroepen. Hieronder wordt een individuele markering met tooltip weergegeven met een tijd van 813,44 ms, gemarkeerd met Starting to run JavaScript .
• performance.measure() -aanroepen. Hieronder ziet u een gele span, gemarkeerd met Slow Interaction .

Selecteer een marker om meer details te bekijken op het tabblad Samenvatting , inclusief het tijdstempel, de totale tijd, de eigen tijd en het detail . Voor performance.mark() en performance.measure() aanroepen worden op het tabblad ook stacktraces weergegeven.

Interacties bekijken

Bekijk gebruikersinteracties op het spoor Interacties om mogelijke problemen met de responsiviteit op te sporen.

Om interacties te bekijken:

1. Open DevTools , bijvoorbeeld op deze demopagina .
2. Open het paneel Prestaties en start een opname .
3. Klik op een element (koffie) en stop de opname.
4. Zoek het Interacties -spoor in de tijdlijn.

In dit voorbeeld toont het Interactiespoor de Pointer -interactie. Interacties hebben snorharen die invoer- en presentatievertragingen aangeven bij verwerkingstijdgrenzen. Beweeg de muis over de interactie om een ​​tooltip te zien met invoervertraging, verwerkingstijd en presentatievertraging.

In het Interactiespoor worden ook Interactie naar Volgende Verf (INP) -waarschuwingen weergegeven voor interacties die langer duren dan 200 milliseconden, op het tabblad Samenvatting en in een tooltip bij het zweven:

Het Interactiespoor markeert de interacties gedurende 200 milliseconden met een rode driehoek in de rechterbovenhoek.

Weergave lay-outverschuivingen

Bekijk lay-outverschuivingen op het spoor Lay-outverschuivingen . Verschuivingen worden weergegeven als paarse ruiten en zijn gegroepeerd in clusters (paarse lijnen) op basis van hun nabijheid op de tijdlijn.

Om een ​​element te markeren dat een lay-outverschuiving in het venster veroorzaakt, beweegt u de muisaanwijzer over de bijbehorende ruit.

Voor meer informatie over een of meer lay-outverschuivingen in het tabblad Samenvatting met timing, scores, elementen en mogelijke oorzaken, klikt u op de overeenkomstige ruit of cluster.

Zie Cumulatieve lay-outverschuiving (CLS) voor meer informatie.

Bekijk animaties

Bekijk animaties op het Animaties- spoor. Animaties worden benoemd met bijbehorende CSS-eigenschappen of elementen, indien aanwezig, bijvoorbeeld transform of my-element . Niet-samengestelde animaties worden gemarkeerd met rode driehoeken in de rechterbovenhoek.

Selecteer een animatie om meer details te bekijken in het tabblad Samenvatting , inclusief redenen voor mislukte composities.

GPU-activiteit bekijken

Bekijk GPU-activiteit in het GPU- gedeelte.

Rasteractiviteit bekijken

Bekijk rasteractiviteit in het gedeelte Thread Pool .

Frames per seconde (FPS) analyseren

DevTools biedt talloze manieren om frames per seconde te analyseren:

• In het gedeelte Frames kunt u bekijken hoe lang een bepaald frame duurde.
• Gebruik de FPS-meter voor een realtime schatting van de FPS terwijl de pagina wordt afgespeeld. Zie Bekijk frames per seconde in realtime met de FPS-meter .

Het gedeelte Frames

In het gedeelte Frames kunt u precies zien hoe lang een bepaald frame duurde.

Beweeg de muis over een frame om een ​​tooltip met meer informatie erover te bekijken.

In dit voorbeeld ziet u een tooltip wanneer u de muisaanwijzer over een frame beweegt.

In het gedeelte Frames worden vier typen frames weergegeven:

1. Inactief frame (wit) . Geen wijzigingen.
2. Kader (groen) . Zoals verwacht en op tijd weergegeven.
3. Gedeeltelijk weergegeven frame (geel met een dun, breed streepjespatroon) . Chrome heeft zijn best gedaan om op zijn minst enkele visuele updates op tijd te renderen. Bijvoorbeeld in het geval dat de hoofdthread van het renderproces (canvasanimatie) achterloopt, maar de compositorthread (scrollen) wel op tijd is.
4. Frame verwijderd (rood met een dicht, ononderbroken lijnenpatroon) . Chrome kan het frame niet binnen een redelijke tijd weergeven.

In dit voorbeeld ziet u een tooltip wanneer u de muisaanwijzer op een gedeeltelijk weergegeven frame plaatst.

Klik op een frame om meer informatie over het frame te bekijken in het tabblad Samenvatting . DevTools geeft het geselecteerde frame een blauwe rand.

Bekijk netwerkverzoeken

Vouw het gedeelte Netwerk uit om een ​​overzicht te bekijken van de netwerkaanvragen die tijdens de uitvoeringsopname zijn opgetreden.

Naast de naam van het netwerkspoor staat een legenda met kleurgecodeerde verzoektypen.

Verzoeken om weergave te blokkeren, worden gemarkeerd met een rode driehoek in de rechterbovenhoek.

Beweeg de muis over een verzoek om een ​​tooltip te zien met:

• URL van de aanvraag en de totale uitvoeringstijd ervan.
• Prioriteit of een verandering van prioriteit, bijvoorbeeld Medium -> High .
• Of het verzoek Render blocking is of niet.
• Een overzicht van de aanvraagtimings, later beschreven.

Wanneer u op een verzoek klikt, tekent het netwerkspoor een pijl van de initiator naar het verzoek.

Daarnaast toont het paneel Prestaties het tabblad Samenvatting met meer informatie over de aanvraag, inclusief maar niet beperkt tot de velden Initiële prioriteit en (Definitieve) prioriteit . Als deze waarden verschillen, is de ophaalprioriteit van de aanvraag tijdens de opname gewijzigd. Zie Resource laden optimaliseren met de Fetch Priority API voor meer informatie.

Op het tabblad Samenvatting wordt ook een overzicht van de timing van het verzoek weergegeven.

De aanvraag voor www.google.com wordt weergegeven door een lijn aan de linkerkant ( |– ), een balk in het midden met een donker en een licht gedeelte, en een lijn aan de rechterkant ( –| ).

Een ander overzicht van de timing vindt u op het tabblad Netwerk . Klik met de rechtermuisknop op de aanvraag in de netwerktrack of de bijbehorende URL op het tabblad Samenvatting en klik op Weergeven in netwerkpaneel . DevTools brengt u naar het netwerkpaneel en selecteert de bijbehorende aanvraag. Open het tabblad Timing .

Deze twee indelingen zijn als volgt op elkaar afgestemd:

• De linkerlijn ( |– ) bevat alles tot en met de Connection start van gebeurtenissen. Met andere woorden, het bevat alles vóór Request Sent .
• Het lichte gedeelte van de balk is Request sent en Waiting for server response .
• Het donkere gedeelte van de balk is Content download .
• De rechterregel ( –| ) geeft de wachttijd voor de hoofdthread aan. Deze wordt niet weergegeven op het tabblad Netwerk > Timing .

Geheugenstatistieken bekijken

Schakel het selectievakje Geheugen in om de geheugengegevens van de laatste opname te bekijken.

DevTools toont een nieuwe geheugengrafiek boven het tabblad Samenvatting . Er is ook een nieuwe grafiek onder de NET- grafiek, genaamd HEAP . De HEAP -grafiek biedt dezelfde informatie als de JS Heap- lijn in de geheugengrafiek .

In dit voorbeeld worden geheugengegevens boven het tabblad Samenvatting weergegeven.

De gekleurde lijnen in de grafiek verwijzen naar de gekleurde selectievakjes boven de grafiek. Schakel een selectievakje uit om die categorie in de grafiek te verbergen.

De grafiek toont alleen het geselecteerde deel van de opname. In het eerdere voorbeeld toont de geheugengrafiek alleen het geheugengebruik vanaf het begin van de opname, tot ongeveer 1000 ms.

Bekijk de duur van een deel van een opname

Bij het analyseren van een sectie zoals Netwerk of Hoofd , heb je soms een nauwkeurigere schatting nodig van hoe lang bepaalde gebeurtenissen duurden. Houd Shift ingedrukt, klik en houd vast, en sleep naar links of rechts om een ​​deel van de opname te selecteren. Onderaan je selectie toont DevTools hoe lang dat deel duurde.

In dit voorbeeld geeft het tijdstempel 488.53ms onder aan het geselecteerde gedeelte aan hoe lang dat gedeelte duurde.

Bekijk een screenshot

Zie Schermafbeeldingen maken tijdens het opnemen voor meer informatie over het inschakelen van schermafbeeldingen.

Beweeg over het tijdlijnoverzicht om een ​​screenshot te bekijken van hoe de pagina eruit zag tijdens dat moment van de opname. Het tijdlijnoverzicht is het gedeelte dat de CPU- , FPS- en NET -kaarten bevat.

U kunt ook screenshots bekijken door op een frame in het gedeelte Frames te klikken. DevTools toont een kleine versie van de screenshot op het tabblad Samenvatting .

Dit voorbeeld toont de screenshot voor het frame 195.5ms op het tabblad Samenvatting wanneer u erop klikt in de sectie Frames .

Klik op de miniatuur op het tabblad Samenvatting om in te zoomen op de screenshot.

Dit voorbeeld toont een ingezoomde screenshot nadat u op de miniatuur op het tabblad Samenvatting hebt geklikt.

Lagen informatie bekijken

Om geavanceerde lagen informatie over een frame te bekijken:

1. Geavanceerde verfinstrumentatie inschakelen .
2. Selecteer een frame in het gedeelte Frames . DevTools geeft informatie weer over de lagen op het tabblad Nieuwe lagen , naast het tabblad Evenementlogboek .

Beweeg over een laag om het in het diagram te markeren.

Dit voorbeeld toont de laag #39 gemarkeerd terwijl u erover zweeft.

Om het diagram te verplaatsen:

• Klik op PAN -modus om langs de X- en Y -assen te bewegen.
• Klik op Rotate modus om te roteren langs de z -as.
• Klik op Reset Transform om het diagram opnieuw in te stellen naar zijn oorspronkelijke positie.

Zie laaganalyse in actie:

Bekijk Paint Profiler

Om geavanceerde informatie over een verfevenement te bekijken:

1. Geavanceerde verfinstrumentatie inschakelen .
2. Selecteer een verfevenement in het hoofdspoor .

Analyseer de renderingprestaties met het tabblad Rendering

Gebruik de functies van het Tab van de weergave om de weergaveprestaties van uw pagina te visualiseren.

Open het tabblad Rendering .

Bekijk frames per seconde in realtime met de FPS -meter

De frame-renderingstatistieken is een overlay die in de rechterbovenhoek van uw viewport verschijnt. Het biedt een realtime schatting van FPS terwijl de pagina wordt uitgevoerd.

Zie frame rendering statistieken .

Bekijk schilderevenementen in realtime met verfflitsen

Gebruik verfflitsen om een ​​realtime weergave te krijgen van alle verfgebeurtenissen op de pagina.

Zie verf knipperen .

Bekijk een overlay van lagen met laaggrenzen

Gebruik laagranden om een ​​overlay van laaggrenzen en tegels bovenop de pagina te bekijken.

Zie Laaggrenzen .

Vind in realtime scrollprestatieproblemen

Gebruik scrollingprestatieproblemen om elementen van de pagina te identificeren die luisteraars van gebeurtenis hebben met betrekking tot scrollen die de prestaties van de pagina kunnen schaden. DevTools schetst de potentieel-problemen in groenblauw.

Zie Scrolling -prestatieproblemen .

Kayce Basques

Sofia Emelianova

Deze pagina is een uitgebreide referentie van Chrome Devtools -functies met betrekking tot het analyseren van prestaties.

Zie runtime -prestaties analyseren voor een begeleide zelfstudie over het analyseren van de prestaties van een pagina met Chrome Devtools.

Record Performance

U kunt runtime of laadprestaties opnemen.

Runtime -prestaties opnemen

Noteer runtime -prestaties wanneer u de prestaties van een pagina wilt analyseren terwijl deze actief is, in tegenstelling tot laden.

1. Ga naar de pagina die u wilt analyseren.
2. Klik op het tabblad Performance in Devtools.

3. Klik op Record .

   

4. Interactie met de pagina. DevTools registreert alle pagina -activiteiten die optreedt als gevolg van uw interacties.

5. Klik op opnieuw op te nemen of klik op STOP om te stoppen met opnemen.

Record load -prestaties

Record laadprestaties wanneer u de prestaties van een pagina wilt analyseren tijdens het laden, in tegenstelling tot hardlopen.

1. Ga naar de pagina die u wilt analyseren.
2. Open het uitvoeringspaneel van Devtools.

3. Klik op Pagina Start Profile and Load . DevTools navigeert eerst naar about:blank om resterende screenshots en sporen te wissen. Vervolgens registreert Devtools Performance Metrics terwijl de pagina opnieuw wordt geladen en vervolgens de opname een paar seconden na de lading automatisch stopt.

   

DevTools zoomt automatisch in op het deel van de opname waar de meeste activiteiten plaatsvonden.

In dit voorbeeld toont het prestatiepaneel de activiteit tijdens een pagina -laden.

Maak screenshots vast tijdens het opnemen

Schakel het selectievakje schermen in om een ​​screenshot van elk frame vast te leggen tijdens het opnemen.

Zie een screenshot bekijken om te leren om te gaan met screenshots.

Force Garbage Collection tijdens het opnemen

Terwijl u een pagina opneemt, klikt u op Garbage MOP om afvalcollectie te forceren.

Toon opname -instellingen

Klik op Instellingen vastleggen Om meer instellingen bloot te stellen met betrekking tot hoe Devtools prestatie -opnames vastlegt.

Schakel JavaScript -monsters uit

Standaard toont de hoofdbaan van een opname gedetailleerde call -stacks van JavaScript -functies die tijdens de opname werden aangeroepen. Om deze call -stacks uit te schakelen:

1. Open de instellingen van de opname menu. Zie instellingen voor het opnemen van shows .
2. Schakel het selectievakje JavaScript Samples in.
3. Neem een ​​opname van de pagina.

De volgende screenshots tonen het verschil tussen het uitschakelen en inschakelen van JavaScript -monsters. De hoofdbaan van de opname is veel korter wanneer bemonstering is uitgeschakeld, omdat het alle JavaScript -call -stacks weglaat.

Dit voorbeeld toont een opname met uitgeschakelde JS -monsters.

Dit voorbeeld toont een opname met ingeschakelde JS -monsters.

Het netwerk te smoren tijdens het opnemen

Om het netwerk te smoren tijdens het opnemen:

1. Open de instellingen van de opname menu. Zie instellingen voor het opnemen van shows .
2. Stel het netwerk in op het gekozen niveau van throttling.

In het vervolgkeuzemenu kan het prestatiepaneel ook een standaard throttling-preset of een preset aanbevelen die de ervaring van uw gebruikers benadert op basis van veldgegevens .

Gaskleed de CPU tijdens het opnemen

Om de CPU te smoren tijdens het opnemen:

1. Open de instellingen van de opname menu. Zie instellingen voor het opnemen van shows .
2. Stel CPU in op het gekozen niveau van throttling.

Throttling is relatief ten opzichte van de mogelijkheden van uw computer. Door de 2X -vertragingsoptie zorgt bijvoorbeeld dat uw CPU 2 keer langzamer werkt dan de gebruikelijke mogelijkheid. DevTools kan de CPU's van mobiele apparaten niet echt simuleren, omdat de architectuur van mobiele apparaten heel anders is dan die van desktops en laptops.

In het vervolgkeuzemenu kan het prestatiepaneel ook een standaard throttling-preset of een preset aanbevelen die de ervaring van uw gebruikers benadert op basis van veldgegevens .

Schakel CSS -selectorstatistieken in

Om de statistieken van uw CSS-regel-selectors te bekijken tijdens langlopende herberekeningsstijlgebeurtenissen :

1. Open de instellingen van de opname menu. Zie instellingen voor het opnemen van shows .
2. Controleer het selectievakje CSS Selector Statistieken inschakelen.

Zie voor meer informatie hoe u CSS -selectorprestaties kunt analyseren tijdens evenementen in de herberekening .

Schakel geavanceerde verfinstrumentatie in

Om gedetailleerde verfinstrumentatie te bekijken:

1. Open de instellingen van de opname menu. Zie instellingen voor het opnemen van shows .
2. Controleer het selectievakje Enable Advanced Paint Instrumentation .

Zie Layers en bekijk Profiler om te leren om te leren om te gaan met de verfinformatie.

Annoteer een opname en deel deze

Zie Annotate en deel uw prestatiebevindingen .

Wis de vorige opname

Na het maken van een opname, drukt u op Duidelijke opname Om die opname van het prestatiepaneel te wissen.

Analyseer een prestatie -opname

Nadat u runtime -prestaties of opnameprestaties hebt opgenomen, biedt het prestatiepaneel veel gegevens voor het analyseren van de prestaties van wat er net is gebeurd.

Krijg bruikbare inzichten

Het prestatiepaneel consolideert prestatie -inzichten van het Lighthouse Report en het nu verouderde Performance Insights -paneel. Deze inzichten kunnen manieren suggereren om de prestaties te verbeteren en begeleide analyse te geven van de volgende prestatieproblemen, inclusief maar niet beperkt tot:

• LCP en Inp door subdeel
• LCP -aanvraagontdekking
• Lay -out shift daders
• Blokkerende verzoeken weergeven
• Derden
• Afbeelding
• Documentverzoek latentie
• Viewport -optimalisatie voor mobiel
• CSS -selectorkosten
• Gedwongen reflow
• Optimaliseer DOM -grootte
• Netwerkafhankelijkheidsboom

Om inzichten te gebruiken:

1. Maak een prestatie -opname .
2. Open in de linker zijbalk van het prestatiepaneel het tabblad Insights , breid verschillende secties uit en zweeft over en klik op items. Het prestatiepaneel zal de bijbehorende gebeurtenissen in het spoor markeren.

Navigeer door de opname

Om u te helpen navigeren, terwijl u op Performance Trace zweeft, doet het prestatiepaneel het volgende:

• Toont een verticale marker die het hele prestatiespoor overspant wanneer u over het tijdlijnoverzicht zweeft.
• Benadrukt een bereik in het tijdlijnoverzicht wanneer u over items in de hoofdbaan zweeft.

Om uw prestatie -opname nauwkeurig te inspecteren, kunt u een deel van een opname selecteren, een lange vlamgrafiek scrollen, in- en uitzoomen en broodkruimels gebruiken om tussen zoomniveaus te springen.

Gebruik sneltoetsen om te navigeren

Om sneltoetsen te gebruiken om snel door de opname te navigeren, kies eerst de stijl van toetsenbordnavigatie.

Klik in de rechterbovenhoek van het paneel op Help -snelkoppelingen en selecteer een van de volgende zaken:

• Klassiek : Zoom met muiswiel (touchpad omhoog of omlaag) en verticale scroll met shift + muiswiel.
• Modern : verticale scroll met muiswiel, horizontale scroll met schakel + muiswiel en zoom met commando/bediening + muiswiel.

Het dialoogvenster Shortcuts biedt u ook een cheatsheet van de beschikbare snelkoppelingen.

Selecteer een deel van de opname

Onder de actiebalk van het uitvoeringspaneel en bovenaan de opname kunt u het gedeelte Tijdlijnoverzicht zien met de CPU- en NET -kaarten.

Om een ​​deel van een opname te selecteren, klikt u en houdt u vast en sleep u links of rechts over het tijdlijnoverzicht .

Om een ​​deel te selecteren met het toetsenbord:

1. Focus het hoofdspoor of een van zijn buren.
2. Gebruik de W , A , S , D -sleutels om in te zoomen, links naar links te gaan en respectievelijk naar rechts te bewegen.

Om een ​​deel te selecteren met behulp van een trackpad:

1. Beweeg over het tijdlijnoverzichtsgedeelte of een van de tracks ( hoofd en zijn buren).
2. Gebruik twee vingers, veeg omhoog om uit te zoomen, veeg naar links om naar links te bewegen, veeg naar beneden om in te zoomen en veeg naar rechts om naar rechts te bewegen.

Maak broodkruimels en spring tussen zoomniveaus

Met het tijdlijnoverzicht kunt u meerdere geneste broodkruimels achtereenvolgens maken, de zoomniveaus verhogen en vervolgens vrij springen tussen zoomniveaus.

Om broodkruimels te maken en te gebruiken:

1. Selecteer in het tijdlijnoverzicht een deel van de opname.
2. Beweeg over de selectie en klik op de knop N MS Zoom_in . De selectie breidt uit om het tijdlijnoverzicht in te vullen. Een keten van broodkruimels begint te bouwen bovenop het tijdlijnoverzicht .
3. Herhaal de vorige twee stappen om nog een geneste broodkruimel te maken. U kunt broodkruimels blijven nestelen zolang het selectiebereik groter is dan 5 milliseconden.
4. Om naar een gekozen zoomniveau te springen, klikt u op de bijbehorende broodkruimel in de ketting bovenop het tijdlijnoverzicht .

Om de kinderen van een broodkruimel te verwijderen, klikt u met de rechtermuisknop op de bovenbroodkruimel en selecteert u kinderbroodkruimels verwijderen .

Scroll een lange vlamgrafiek

Om een ​​lange vlamgrafiek in het hoofdspoor of een van zijn buren te scrollen, klik en houd vast en sleep dan in elke richting totdat wat u zoekt in beeld komt.

Negeer irrelevante scripts in de vlamgrafiek

Om je beter op je code te concentreren, kun je irrelevante scripts toevoegen om de lijst te negeren.

Om scripts te negeren, doe een van de volgende zaken:

• Klik op Compress Toon Lijstinstellingen Dialoogvenster Negeren Negeren in de bovenste actiebalk en typ een reguliere expressie in het invoerveld. De vlamgrafiek past de nieuwe regel toe terwijl u typt.
• Klik met de rechtermuisknop op een script en selecteer Script toevoegen om de lijst te negeren . Het prestatiepaneel voegt dit script toe aan de lijst in het dialoogvenster Compress tonen negeren Lijstinstellingen .

Het paneel zal automatisch overdreven nestelen voor dergelijke scripts instorten en ze markeren als On ignore list ( REGULAR_EXPRESSION ) .

In het dialoogvenster Compress tonen negeren Lijstinstellingen , kunt u de regels voor negerenlijst in- en uitgeschakeld inschakelen.

Als u een script uit de lijst kunt verwijderen, klikt u met de rechtermuisknop in de vlamgrafiek en selecteert u het script verwijderen uit de lijst van de negeren of zweven erover in het dialoogvenster Compress tonen negeren Lijstinstellingen en klik op Verwijderen Verwijderen .

DevTools slaat de regels voor negeren op die u toevoegt in SETTINGS -instellingen > Negeerlijst negeren .

Bovendien, om u alleen op first-party scripts te concentreren, controleert u Check_box Dim 3e partijen . Het prestatiepaneel grijst scripts van derden uit.

Zoekactiviteiten

U kunt over de activiteiten in de hoofdbaan en verzoeken in de netwerktrack zoeken.

Druk op: om een ​​zoekvak onderaan het uitvoeringspaneel te openen, druk op:

• MacOS: Command + F
• Windows, Linux: Control + F

Dit voorbeeld toont een reguliere expressie in het zoekvak onderaan die elke activiteit vindt die begint met E .

Om door activiteiten te fietsen die overeenkomen met uw vraag:

• Klik op Expand_less Vorige of expand_more volgende knoppen.
• Druk op Shift + Enter om de vorige te selecteren of Voer in om de volgende te selecteren.

Het prestatiepaneel toont een tooltip over de activiteit die in het zoekvak is geselecteerd.

Om query -instellingen te wijzigen:

• Klik op Match_Case Match Case om de query case gevoelig te maken.
• Klik op Regular_Expression Regular Expression om een ​​reguliere expressie in uw query te gebruiken.

Klik op Annuleren om het zoekvak te verbergen.

Verander de volgorde van tracks en verberg ze

Om het prestatietrace op te banen, kunt u de volgorde van tracks wijzigen en de irrelevante verbergen in de configuratiemodus van de track.

Om tracks te verplaatsen en te verbergen:

1. Om de configuratiemodus in te voeren, klikt u met de rechtermuisknop op een tracknaam en selecteert u tracks configureren .
2. Klik op Arrow_upward Up of Arrow_downward om naar beneden om een ​​track omhoog of omlaag te verplaatsen. Klik op zichtbaarheid_off om het te verbergen.
3. Wanneer u klaar bent, klikt u op Voltooien UITDIENEN VOERTROUWEN VOOR DE BOVEN om de configuratiemodus te verlaten.

Bekijk de video om deze workflow in actie te zien.

Het prestatiepaneel slaat de trackconfiguratie op voor nieuwe sporen, maar niet in de volgende DevTools -sessies.

Bekijk hoofddraadactiviteit

Gebruik de hoofdbaan om de activiteit te bekijken die plaatsvond op de hoofdthread van de pagina.

Klik op een evenement om er meer informatie over te bekijken op het tabblad Samenvatting , inclusief maar niet beperkt tot: duur (en zelfduur), link naar de overeenkomstige regel in het bronscript, oorsprong -URL (met een entiteitsnaam, indien bekend) Stack Trace, indien van toepassing, en timings in een cirkeldiagram.

Het prestatiepaneel schetst de geselecteerde gebeurtenis in blauw.

Dit voorbeeld toont meer informatie over de gebeurtenis get Function Call op het tabblad Samenvatting .

Onderscheid maken tussen gebeurtenissen in de eerste en derden

Overmatige afhankelijkheid van partijcode van derden kan de laadprestaties negatief beïnvloeden. Het prestatiepaneel kan u helpen om visueel onderscheid te maken tussen gebeurtenissen in de eerste en derden in het spoor, dus u kunt een beter geïnformeerde beslissing nemen over het verminderen of uitstellen van het laden van code van derden om prioriteit te geven aan de inhoud van uw pagina.

Om zich alleen te concentreren op de prestaties van first-party code:

1. Zorg ervoor dat er niets is geselecteerd in het prestatietrace of op het tabblad Insights . Klik hiervoor op een lege ruimte in het spoor.
2. Controleer check_box Dim 3e partijen in de actiebalk bovenaan. Het prestatiepaneel grijst uit derden gerelateerde gebeurtenissen uit het prestatietrace en laat alleen de first-party achter die wordt gemarkeerd.

Markeer evenementen met de tabel '1e / 3e partij'

Binnen een geselecteerd bereik op het tijdlijnoverzicht en wanneer geen van de gebeurtenissen wordt geselecteerd, toont het tabblad Tab een 1e / 3e partijtabel met de respectieve overdrachtsgroottes en de belangrijkste threadtijden van het volgende:

• First-party entiteit gemarkeerd met een 1st party .
• Alle gedetecteerde externe entiteiten in het geselecteerde bereik, ongemarkeerd.
• Extensies gemarkeerd met Extension .
• Andere [unattributed] entiteiten.

Om gerelateerde gebeurtenissen te zien die in het spoor worden benadrukt en de rest grijst, zweeft over de entiteiten in de tabel. Selecteer deze in de tabel om de gebeurtenissen van een entiteit te achterlaten. Om de markering te verwijderen, klikt u op ELKE lege ruimte in het spoor.

Om activiteiten te openen gegroepeerd door deze entiteit op het tabblad Bottom-up , zweeft u over de entiteit in de tabel en klikt u op Account_tree ernaast .

Lees de vlamgrafiek

Het prestatiepaneel vertegenwoordigt de hoofddraadactiviteit in een vlamgrafiek. De x-as vertegenwoordigt de opname in de loop van de tijd. De y-as vertegenwoordigt de oproepstapel. De gebeurtenissen bovenaan veroorzaken de onderstaande gebeurtenissen.

Dit voorbeeld toont een vlamdiagram in de hoofdbaan . Een click veroorzaakte een anonieme functieaanroep. Deze functie wordt op zijn beurt genoemd, onEndpointClick_ , die handleClick_ , enzovoort, noemde.

Het prestatiepaneel wijst willekeurige kleuren van scripts toe om de vlamgrafiek te verbreken en leesbaarder te maken. In het eerdere voorbeeld zijn functieaanroepen uit één script gekleurd lichtblauw. Oproepen uit een ander script zijn gekleurd lichtroze. Het donkerdere geel vertegenwoordigt scriptactiviteit en de paarse gebeurtenis vertegenwoordigt renderingactiviteit. Deze donkerdere gele en paarse gebeurtenissen zijn consistent in alle opnames.

Lange taken worden ook benadrukt met een rode driehoek, en met het deel van meer dan 50 milliseconden in de schaduw van rood:

In dit voorbeeld duurde de taak meer dan 400 milliseconden, dus het deel dat de laatste 350 milliseconden vertegenwoordigt, wordt rood in de schaduw, terwijl de eerste 50 milliseconden dat niet zijn.

Bovendien toont de hoofdbaan informatie over CPU -profielen gestart en gestopt met profile() en profileEnd() .

Zie JavaScript -voorbeelden uitschakelen om de gedetailleerde vlamgrafiek van JavaScript -oproepen te verbergen. Wanneer JS-monsters zijn uitgeschakeld, ziet u alleen de gebeurtenissen op hoog niveau zoals Event (click) en Function Call .

Track Event Initiators

De hoofdbaan kan pijlen tonen die de volgende initiatiefnemers verbinden en de gebeurtenissen die ze hebben veroorzaakt:

• Stijl of lay -out Invalidatie -> Recalculeer stijlen of lay -out
• Verzoek animatieframe -> Animatiekader Fired
• Vraag Idle Callback -> Fire Idle callback
• Installeer timer -> Timer Fired
• Websocket maken -> Verzenden ... en ontvang WebSocket -handdruk of vernietig WebSocket
• Schema Posttask -> Fire Posttask of afbreken Posttask

Om de pijlen te zien, zoek je een initiator of de gebeurtenis die het in de vlamgrafiek heeft veroorzaakt en selecteer deze.

Indien geselecteerd, toont het tabblad Samenvatting initiator voor links voor initiatiefnemers en geïnitieerd door links voor de gebeurtenissen die ze hebben veroorzaakt. Klik op hen om te springen tussen de bijbehorende gebeurtenissen.

Verberg functies en hun kinderen in de vlamgrafiek

Om de vlamgrafiek in de hoofdthread op te richten, kunt u geselecteerde functies of hun kinderen verbergen:

1. Klik in de hoofdbaan met de rechtermuisknop op een functie en kies een van de volgende opties of druk op de bijbehorende snelkoppeling:

   • Functie verbergen ( H )
   • Verberg kinderen ( C )
   • Verbergt herhalende kinderen ( R )
   • Reset kinderen ( U )
   • Reset Trace ( T )
   • Script toevoegen om lijst te negeren ( I )

   

   Een vervolgkeuzelijst Arrow_Drop_down verschijnt naast de functienaam met verborgen kinderen.

2. Om het aantal verborgen kinderen te zien, zweeft u over de vervolgkeuzelijst Arrow_Drop_down .

   

3. Om een ​​functie te resetten met verborgen kinderen of de hele vlamgrafiek, selecteert u de functie en drukt U of klikt u met de rechtermuisknop en selecteert u respectievelijk RESET TRACE .

Negeer scripts in de vlamgrafiek

Als u een script aan de lijst Negeren toevoegt, klikt u met de rechtermuisknop op een script in de grafiek en selecteert u script toevoegen om de lijst te negeren .

De instortingen van de grafiek negeerden scripts, markeert ze als op de lijst met negeren en voegt ze toe aan de aangepaste uitsluitingsregels in instellingen instellingen> Negeer de lijst . Gegooid scripts worden opgeslagen totdat u ze uit het spoor of uit de aangepaste uitsluitingsregels verwijdert.

Bekijk activiteiten in een tafel

Na het opnemen van een pagina, hoeft u niet alleen op de hoofdbaan te vertrouwen om activiteiten te analyseren. DevTools biedt ook drie tabelweergaven voor het analyseren van activiteiten. Elke weergave geeft u een ander perspectief op de activiteiten:

• Wanneer u de root -activiteiten wilt bekijken die het meeste werk veroorzaken, gebruikt u het tabblad Tree .
• Wanneer u de activiteiten wilt bekijken waar de meeste tijd direct is besteed, gebruikt u het tabblad Bottom-up .
• Wanneer u de activiteiten wilt bekijken in de volgorde waarin ze tijdens de opname hebben plaatsgevonden, gebruikt u het tabblad Evenementlogboek .

Om u te helpen vinden waar u sneller naar op zoek bent, hebben alle drie de tabbladen knoppen voor geavanceerde filtering naast de filterbalk :

• match_case match case .
• Regular_expressie reguliere expressie .
• match_word match hele woord .

Elke tabelweergave in het prestatiepaneel toont links voor activiteiten zoals functiesaanroepen. Om u te helpen debuggen, vindt Devtools de bijbehorende functie -verklaringen in bronbestanden. Bovendien, als de juiste brongaarten aanwezig en ingeschakeld zijn, vindt DevTools automatisch de originele bestanden.

Klik op een link om een ​​bronbestand in het paneel Bronnen te openen.

Wortelactiviteiten

Hier is een uitleg van het rootactiviteitenconcept dat wordt vermeld in het tabblad Call Tree , het bottom-up tabblad en gebeurtenislogboeksecties .

Wortelactiviteiten zijn die welke de browser wat werk doen. Wanneer u bijvoorbeeld op een pagina klikt, vuurt de browser een Event af als de root -activiteit. Die Event kan er dan voor zorgen dat een handler uitvoert.

In de vlamgrafiek van het hoofdnummer staan ​​rootactiviteiten bovenaan de grafiek. In de tabbladen van de oproepboom- en gebeurtenislogboek zijn rootactiviteiten de items op het hoogste niveau.

Zie het tabblad Call Tree voor een voorbeeld van wortelactiviteiten.

Het tabblad met oproepboom

Gebruik het tabblad Call Tree om te bekijken welke wortelactiviteiten het meeste werk veroorzaken.

Het tabblad Tree Tree geeft alleen activiteiten weer tijdens het geselecteerde gedeelte van de opname. Zie een deel van een opname selecteren om te leren hoe u delen kunt selecteren.

In dit voorbeeld zijn het topniveau van items in de activiteitskolom , zoals Event , Paint en Composite Layers wortelactiviteiten. Het nesten vertegenwoordigt de call -stack. In dit voorbeeld veroorzaakte de Event de Function Call , die button.addEventListener veroorzaakte, die b veroorzaakte, enzovoort.

Zelftijd vertegenwoordigt de tijd die rechtstreeks in die activiteit wordt besteed. Totale tijd vertegenwoordigt de tijd die wordt besteed aan die activiteit of een van zijn kinderen.

Klik op Zelftijd , totale tijd of activiteit om de tabel op die kolom te sorteren.

Gebruik het filtervak ​​om gebeurtenissen op activiteitennaam te filteren.

Standaard is het groepsmenu ingesteld op NO -groepering . Gebruik het groepsmenu om de activiteitstabel te sorteren op basis van verschillende criteria.

Het bottom-up tabblad

Gebruik het bottom-up tabblad om te bekijken welke activiteiten de meeste tijd rechtstreeks in totaal hebben in beslag genomen.

Het bottom-up tabblad geeft alleen activiteiten weer tijdens het geselecteerde gedeelte van de opname. Zie een deel van een opname selecteren om te leren hoe u delen kunt selecteren.

In de hoofdbaanvlamgrafiek van dit voorbeeld kunt u zien dat bijna alle tijd werd besteed aan het uitvoeren van de drie oproepen om wait() . Dienovereenkomstig is de bovenste activiteit op het tabblad Bottom-Up wait . In de vlamgrafiek zijn het geel onder de oproepen om te wait eigenlijk duizenden Minor GC -oproepen. Dienovereenkomstig kunt u zien dat de volgende duurste activiteit op het tabblad Bottom-Up Minor GC is.

De zelftijdkolom vertegenwoordigt de geaggregeerde tijd die rechtstreeks in die activiteit wordt doorgebracht, over al zijn gebeurtenissen.

De totale tijdkolom vertegenwoordigt geaggregeerde tijd die wordt besteed aan die activiteit of een van zijn kinderen.

Zwaarste stapeltafel

Aan de rechterkant van de oproepboom of bottom-up tabbladen klikt u op rechts_PANEL_OPEN Toon zwaarste stapel om de zwaarste stapeltabel te onthullen.

Deze tabel laat zien welke kinderen van de geselecteerde activiteit de langste tijd duurden om uit te voeren. Beweeg over een item in de tabel om de bijbehorende gebeurtenis te zien die in de hoofdbaan wordt gemarkeerd en de rest dimde.

Op deze manier kunt u visueel in het uitvoering van de geneste activiteiten uit de call -stack vinden die de meeste tijd kost.

Het tabblad Evenementlogboek

Gebruik het tabblad Gebeurtenislogboek om activiteiten te bekijken in de volgorde waarin ze plaatsvonden tijdens de opname.

Het tabblad Evenementlogboek geeft alleen activiteiten weer tijdens het geselecteerde deel van de opname. Zie een deel van een opname selecteren om te leren hoe u delen kunt selecteren.

De starttijdkolom vertegenwoordigt het punt waarop die activiteit begon, ten opzichte van het begin van de opname. De starttijd van 1573.0 ms voor het geselecteerde item in dit voorbeeld betekent dat de activiteit 1573 ms startte nadat de opname was gestart.

De kolom Zelftijd vertegenwoordigt de tijd die rechtstreeks in die activiteit wordt doorgebracht.

De totale tijdkolommen vertegenwoordigen de tijd die rechtstreeks in die activiteit of in een van zijn kinderen wordt doorgebracht.

Klik op Starttijd , zelftijd of totale tijd om de tabel op die kolom te sorteren.

Gebruik het filtervak ​​om activiteiten op naam te filteren.

Gebruik het duurmenu om alle activiteiten uit te filteren die minder dan 1 ms of 15 ms duurden. Standaard is het menu Duur ingesteld op ALL , wat betekent dat alle activiteiten worden getoond.

Schakel het laden , scripten , renderen of schilderen uit om alle activiteiten uit die categorieën te filteren.

Bekijk prestatiemarkeringen

In een overlay met verticale lijnen over het prestatiespoor kunt u belangrijke prestatiemarkeringen zien, zoals:

• Eerste verf (FP)
• Eerste contentful verf (FCP)
• Grootste Contentful Paint (LCP)
• DomContentLoaded Event (DCL)
• Onload -evenement (L)

Beweeg over de markernamen onderaan het spoor om hun tijdstempel te zien.

Bekijk aangepaste timings

Bekijk op het spoor van de timing uw aangepaste prestatiemarkeringen zoals:

• performance.mark() oproepen. Een individuele markering met tooltip wordt hieronder weergegeven op 813,44 ms, gelabeld met het uitvoeren van JavaScript .
• performance.measure() oproepen. Een gele spanwijdte wordt hieronder weergegeven, gelabelde langzame interactie .

Selecteer een marker voor meer informatie op het tabblad Samenvatting , inclusief de tijdstempel, totale tijd, zelftijd en het detail . Voor performance.mark() en performance.measure() oproepen toont het tabblad ook stapelsporen.

Bekijk interacties

Bekijk gebruikersinteracties op de interacties -track om potentiële responsiviteitsproblemen op te sporen.

Om interacties te bekijken:

1. Open Devtools bijvoorbeeld op deze demo -pagina .
2. Open het prestatiepaneel en start een opname .
3. Klik op een element (koffie) en stop de opname.
4. Vind de interacties -track in de tijdlijn.

In dit voorbeeld toont de interacties -track de pointer -interactie. Interacties hebben snorharen die aangeven dat input en presentatievertragingen bij verwerkingstijdgrenzen. Beweeg over de interactie om een ​​tooltip te zien met invoervertraging, verwerkingstijd en presentatievertraging.

De interacties -track toont ook interactie met de volgende verf (INP) waarschuwingen voor interacties langer dan 200 milliseconden op het tabblad Samenvatting en in een tooltip op Hover:

De interacties -track markeert de interacties van meer dan 200 milliseconden met een rode driehoek in de rechterbovenhoek.

Bekijk lay -outverschuivingen

Bekijk lay -outverschuivingen op de lay -outverschuivingen Track. Shifts worden weergegeven als paarse diamanten en zijn gegroepeerd in clusters (paarse lijnen) op basis van hun nabijheid op de tijdlijn.

Om een ​​element te markeren dat een lay -outverschuiving in het viewport veroorzaakte, zweeft u over de overeenkomstige diamant.

Voor meer informatie over een lay -outverschuiving of verschuivingen op het tabblad Samenvatting met timings, scores, elementen en potentiële daders, klikt u op de bijbehorende diamant of cluster.

Zie Cumulative Layout Shift (CLS) voor meer informatie.

Bekijk animaties

Bekijk animaties op het nummer van de animaties . Animaties worden genoemd als overeenkomstige CSS-eigenschappen of elementen, bijvoorbeeld, transform of my-element . Niet-compositieve animaties zijn gemarkeerd met rode driehoeken in de rechterbovenhoek.

Selecteer een animatie voor meer informatie op het tabblad Samenvatting , inclusief redenen voor het samenstellen van storingen.

GPU-activiteit bekijken

Bekijk GPU -activiteit in de GPU -sectie.

Bekijk rasteractiviteit

Bekijk rasteractiviteit in de sectie Draadpool .

Analyseer frames per seconde (FPS)

DevTools biedt talloze manieren om frames per seconde te analyseren:

• Gebruik de sectie Frames om te bekijken hoe lang een bepaald frame duurde.
• Gebruik de FPS -meter voor een realtime schatting van FPS terwijl de pagina wordt uitgevoerd. Zie Bekijk frames per seconde in realtime met de FPS -meter .

Het sectie Frames

Het framesgedeelte vertelt je precies hoe lang een bepaald frame duurde.

Beweeg over een frame om een ​​tooltip te bekijken met meer informatie erover.

Dit voorbeeld toont een tooltip wanneer u over een frame zweeft.

De sectie Frames kan vier soorten frames weergeven:

1. Idle frame (wit) . Geen wijzigingen.
2. Frame (groen) . Weergegeven zoals verwacht en op tijd.
3. Gedeeltelijk gepresenteerd frame (geel met een schaars breed dashboard-lijnpatroon) . Chrome heeft zijn best gedaan om op tijd op zijn minst enkele visuele updates weer te geven. Bijvoorbeeld in het geval dat het werk van de hoofdthread van het renderer -proces (canvasanimatie) te laat is, maar de compositor -thread (scrollen) is op tijd.
4. Gevallen frame (rood met een dicht vaste lijnpatroon) . Chrome kan het frame niet in redelijke tijd weergeven.

Dit voorbeeld toont een tooltip wanneer u over een gedeeltelijk gepresenteerd frame zweeft.

Klik op een frame om nog meer informatie over het frame op het tabblad Samenvatting te bekijken. DevTools schetst het geselecteerde frame in blauw.

Netwerkverzoeken bekijken

Breid de netwerksectie uit om een ​​waterval van netwerkverzoeken te bekijken die plaatsvonden tijdens de prestatie -opname.

Naast de naam van het netwerkspoor is er een legende met kleurgecodeerde aanvraagtypen.

Render -blokkerende aanvragen worden gemarkeerd met een rode driehoek in de rechterbovenhoek.

Beweeg over een verzoek om een ​​tooltip te zien met:

• De URL van het verzoek en de totale tijd die nodig was om deze uit te voeren.
• Prioriteit of een prioriteitsverandering, bijvoorbeeld, Medium -> High .
• Of het verzoek Render blocking of niet.
• Een uitsplitsing van aanvraagtimings, later beschreven.

Wanneer u op een verzoek klikt, trekt het netwerktrack een pijl van zijn initiator naar het verzoek.

Bovendien toont het prestatiepaneel u het tabblad Samenvatting met meer informatie over het verzoek, inclusief maar niet beperkt tot initiële prioriteit en (definitieve) prioriteitsvelden . Als hun waarden verschillen, is de ophaalprioriteit van het verzoek tijdens de opname gewijzigd. Zie Resource Loading Optimaliseren met de Fetch Priority API voor meer informatie optimaliseren.

Het tabblad Samenvatting toont ook een uitsplitsing van de timings van het verzoek.

The request for www.google.com is represented by a line on the left ( |– ), a bar in the middle with a dark portion and a light portion, and a line on the right ( –| ).

You can find another timings breakdown in the Network tab. Right-click the request in the Network track or its URL in the Summary tab and click Reveal in Network panel . DevTools takes you to the Network panel and selects the corresponding request. Open its Timing tab.

Here's how these two breakdowns map to each other:

• The left line ( |– ) is everything up to the Connection start group of events, inclusive. In other words, it's everything before Request Sent .
• The light portion of the bar is Request sent and Waiting for server response .
• The dark portion of the bar is Content download .
• The right line ( –| ) is the time spent waiting for the main thread. The Network > Timing tab doesn't show it.

View memory metrics

Enable the Memory checkbox to view memory metrics from the last recording.

DevTools displays a new Memory chart, above the Summary tab. There's also a new chart below the NET chart, called HEAP . The HEAP chart provides the same information as the JS Heap line in the Memory chart.

This example shows memory metrics above the Summary tab.

The colored lines on the chart map to the colored checkboxes above the chart. Disable a checkbox to hide that category from the chart.

The chart only displays the region of the recording that is selected. In the earlier example, the Memory chart shows only the memory usage for the start of the recording, up to around the 1000ms mark.

View the duration of a portion of a recording

When analyzing a section like Network or Main , sometimes you need a more precise estimate of how long certain events took. Hold Shift, click and hold, and drag left or right to select a portion of the recording. At the bottom of your selection, DevTools shows how long that portion took.

In this example, the 488.53ms timestamp at the bottom of the selected portion indicates how long that portion took.

View a screenshot

See Capture screenshots while recording to learn how to enable screenshots.

Hover over the Timeline overview to view a screenshot of how the page looked during that moment of the recording. The Timeline overview is the section that contains the CPU , FPS , and NET charts.

You can also view screenshots by clicking a frame in the Frames section. DevTools displays a small version of the screenshot in the Summary tab.

This example shows the screenshot for the 195.5ms frame in the Summary tab when you click it in the Frames section.

Click the thumbnail in the Summary tab to zoom in on the screenshot.

This example shows a zoomed-in screenshot after you click its thumbnail in the Summary tab.

View layers information

To view advanced layers information about a frame:

1. Enable advanced paint instrumentation .
2. Select a frame in the Frames section. DevTools displays information about its layers in the new Layers tab, next to the Event log tab.

Hover over a layer to highlight it in the diagram.

This example shows the layer #39 highlighted as you hover over it.

To move the diagram:

• Click Pan Mode to move along the X and Y axes.
• Click Rotate Mode to rotate along the Z axis.
• Click Reset Transform to reset the diagram to its original position.

See layer analysis in action:

View paint profiler

To view advanced information about a paint event:

1. Enable advanced paint instrumentation .
2. Select a Paint event in the Main track.

Analyze rendering performance with the Rendering tab

Use the Rendering tab's features to help visualize your page's rendering performance.

Open the Rendering tab .

View frames per second in real time with the FPS meter

The Frame rendering stats is an overlay that appears in the top-right corner of your viewport. It provides a real time estimate of FPS as the page runs.

See Frame rendering stats .

View painting events in real time with Paint Flashing

Use Paint Flashing to get a real time view of all paint events on the page.

See Paint flashing .

View an overlay of layers with Layer Borders

Use Layer Borders to view an overlay of layer borders and tiles on top of the page.

See Layer borders .

Find scroll performance issues in real time

Use Scrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines the potentially-problematic elements in teal.

See Scrolling performance issues .