Klinkt dit bekend? Je bent een prestatieprobleem aan het oplossen in Chrome DevTools, maar de overweldigende hoeveelheid informatie in het Prestatiepaneel maakt het lastig om je te concentreren op de meest relevante en bruikbare onderdelen. Door de lengte van de tijdlijn, de diepte van het vlamdiagram en de breedte van de vele verschillende datatracks kan het lastig zijn om te navigeren. Hoe ongelooflijk krachtig het Prestatiepaneel ook is, de bruikbaarheid ervan hoeft niet ten koste te gaan van de bruikbaarheid!
Als onderdeel van ons initiatief om de prestatietools van Chrome te verbeteren, hebben we onlangs drie nieuwe functies gelanceerd die de informatiedichtheid verminderen en ontwikkelaars helpen hun workflows aan te passen:
- Verberg irrelevante delen van de tijdlijn
- Verberg irrelevante delen van de vlamgrafiek
- Verberg irrelevante tracks
In dit bericht gaan we dieper in op elk van deze functies en laten we zien hoe u ze kunt gebruiken om u te concentreren op alleen de belangrijkste informatie.
Verberg irrelevante delen van de tijdlijn
De prestaties van het web worden bepaald op milliseconden. Ook als uw prestatie-opname maar een paar seconden duurt, is de kans groot dat u uw plaats kwijtraakt.
In Chrome 122 hebben we de mogelijkheid toegevoegd om broodkruimels te maken . Met deze functie kun je de grenzen van de tijdlijn vastleggen, zodat je alleen kunt in- of uitzoomen binnen een door jou ingesteld interessegebied. Het op deze manier beperken van de tijdlijn kan vooral handig zijn als je bijvoorbeeld problemen met de responsiviteit probeert op te lossen , zodat je je kunt concentreren op één interactie of een problematische, lange taak.
De bovenstaande schermafbeelding toont een close-up van het tijdlijnoverzicht, dat de activiteit van de hoofdthread visualiseert, zoals de uitvoering van scripts en presentatiewerk. Wanneer u de muisaanwijzer erop houdt, verschijnt er een nieuwe knop waarmee u de grenzen van de tijdlijn kunt instellen op het huidige venster. De knop is gemarkeerd met de breedte van het tijdvenster, in milliseconden, en het -icoontje. De breadcrumbs bevinden zich boven het tijdlijnoverzicht en elk broodkruimelpad is gemarkeerd met de grootte van het bijbehorende tijdvenster.
Om deze functie te gebruiken:
- Zoom in en pan de tijdlijn naar het gewenste gebied.
- Klik op het vergrootglaspictogram in het tijdlijnoverzicht om de tijdlijn vast te klemmen en een broodkruimelpad in te stellen.
- Herhaal dit indien nodig om in te zoomen op een genest interessegebied.
- Klik op de broodkruimels om terug te keren naar eerdere interessegebieden of naar het volledige bereik van de tijdlijn.
Door de tijdlijn in te korten, voorkom je dat je per ongeluk naar een irrelevant deel van de tijdlijn scrollt. Wanneer nodig kun je echter op de broodkruimels klikken om weer uit te zoomen. Een ander voordeel is dat het tijdlijnoverzicht uitgelijnd blijft met de volgende tracks. Dit maakt het veel gemakkelijker om prestatiekansen zoals gedwongen reflows te herkennen en de oorzaak ervan in de flame chart te identificeren.
Verberg irrelevante delen van de vlamgrafiek
Het analyseren van de activiteit van de hoofdthread is geen sinecure. Dit onderdeel van het Prestatiepaneel staat bekend als de flame chart , vanwege hoe lang en slungelig de call stacks kunnen worden. In sommige extreme gevallen kunnen deze stacks zo onhandelbaar zijn dat het moeilijk is om het geheel te begrijpen en je te concentreren op wat je probeert te optimaliseren.
Vanaf Chrome 124 kunt u precies aangeven welke items in het vlamdiagram u wilt verbergen , zodat u zich kunt richten op de meest bruikbare informatie.
Wanneer u met de rechtermuisknop op een functie in het vlamdiagram klikt, verschijnt er een contextmenu met verschillende opties om items te verbergen:
- Functie verbergen : Verwijder de geselecteerde functie uit de vlamgrafiek. De onderliggende functies schuiven op en verschijnen direct na de bovenliggende functie.
- Kinderen verbergen : snoei het vlamdiagram bij de geselecteerde functie weg en verberg alle kinderen ervan.
- Verberg herhalende kinderen : verwijder alle instanties van de geselecteerde functie uit de rest van het vlamdiagram.
Er zijn ook verschillende handige sneltoetsen die u kunt gebruiken wanneer een functie is geselecteerd:
- H : verberg de geselecteerde functie
- C : verberg de kinderen van de geselecteerde functie
- R : verberg instanties van de geselecteerde functie later in de stapel
- U : toon de verborgen kinderen van de geselecteerde functie
Verberg irrelevante scripts permanent
Met de optie Script toevoegen aan negeerlijst verbergt u de geselecteerde functie in het vlamdiagram, evenals alle andere functies die in hetzelfde scriptbestand zijn gedefinieerd. Het script wordt ook toegevoegd aan de negeerlijst , die de DevTools-debugger gebruikt om functies over te slaan en uitzonderingen die afkomstig zijn van het script te negeren.
Scripts die aan de negeerlijst worden toegevoegd, blijven behouden en blijven dus verborgen in de flame chart in nieuwe traces. Scripts waar u geen controle over hebt, zijn goede kandidaten voor de negeerlijst. Aan de andere kant is het verbergen van individuele functies tijdelijk voor de huidige trace en meer afhankelijk van de situatie. U kunt bijvoorbeeld een omslachtige stapel recursieve functieaanroepen verbergen om de trace gebruiksvriendelijker te maken.
Om de negeerlijst of andere verborgen functies in de vlamgrafiek te herstellen, kunt u het contextmenu gebruiken om de onderliggende functies van de geselecteerde functie te resetten of alle verborgen functies in de trace te resetten. Functies met verborgen onderliggende functies worden gemarkeerd met het ▼-pictogram, waarmee de onderliggende functies ook worden gereset wanneer erop wordt geklikt.
Elke onnodige diepgang en complexiteit die u uit de vlamgrafiek kunt halen, maakt deze veel bruikbaarder. Indien nodig is de mogelijkheid om aan te passen welke gegevens u ziet een ergonomische verbetering, zodat u zich kunt concentreren op de belangrijkste informatie voor de taak die u moet uitvoeren.
Verberg irrelevante tracks
De activiteit van de hoofdthread vormt slechts één track van het paneel Prestaties. Tracks in het paneel Prestaties visualiseren de activiteit van een proces en zijn allemaal afgestemd op een gemeenschappelijke tijdlijn om te helpen bij het debuggen. Naast de hoofdtrack zijn er individuele tracks voor de andere subframes, threads en workers die door de pagina worden gebruikt, evenals de tracks Netwerk , Frames , Animaties en Interacties . Nog meer tracks markeren de activiteit van Chrome-processen op lager niveau, zoals I/O, GPU en Compositor. Dat is veel informatie! En toch bent u bij de meeste prestatieworkflows slechts geïnteresseerd in de informatie van een paar tracks tegelijk.
Vanaf Chrome 125 is er een nieuwe configuratiemodus waarmee je onnodige tracks kunt verbergen of naar wens kunt herschikken. Als je bijvoorbeeld een langzame interactie optimaliseert, kun je ervoor kiezen om alles te verbergen, behalve de Interacties- , Hoofd- en GPU- tracks.
Om de tracks te bewerken, klikt u met de rechtermuisknop op de naam van een track en selecteert u 'Tracks configureren...' . Dit opent de configuratiemodus, waar u afzonderlijke tracks kunt weergeven, verbergen of herschikken. Klik op de knop 'Configuratie van tracks voltooien' om uw voorkeuren op te slaan.
Door tracks te configureren, bepaalt u zelf hoe het Prestatiepaneel essentiële informatie aan uw workflow presenteert. U kunt deze instellingen gebruiken om de activiteit te verbergen voor niet-gerelateerde processen en de tracks te verplaatsen op een manier die u de gemakkelijkste toegang geeft tot de gegevens die u nodig hebt.
Afronden
Deze drie functies bieden u krachtige nieuwe ergonomische bedieningselementen waarmee u uw prestatieworkflows kunt aanpassen. Door deze functies te gebruiken en de hoeveelheid ruis te verminderen, bent u veel beter in staat om te vinden wat u zoekt en de data te begrijpen.
We horen graag wat er goed werkt of hoe uw ervaring verbeterd kan worden. Laat het ons weten als u vragen of algemene feedback heeft door contact op te nemen met @ChromeDevTools . Werkt er iets niet of heeft u suggesties voor nieuwe functies? Laat dan een reactie achter op dit openstaande probleem .
Dit is nog maar het begin van ons initiatief om de prestatietools van Chrome te verbeteren en we zijn enthousiast om al onze plannen te delen om het Prestatiepaneel gebruiksvriendelijker en krachtiger dan ooit te maken. We publiceren onze volgende post met de nieuwste functies hier op de Chrome for Developers-blog. Bekijk ondertussen de pagina 'Nieuw in Chrome' om op de hoogte te blijven van alle nieuwe functies in DevTools en Chrome.