Klinkt dit bekend? U bent een prestatieprobleem aan het opsporen in Chrome DevTools, maar de overweldigende hoeveelheid informatie in het prestatiepaneel maakt het moeilijk om u alleen op de meest relevante en bruikbare onderdelen te concentreren. Tussen de lengte van de tijdlijn, de diepte van de vlammengrafiek en de breedte van veel verschillende gegevenssporen kan het een uitdaging zijn om te navigeren. Hoe ongelooflijk krachtig het Prestatiepaneel ook is, het nut 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 bedoeld zijn om de informatiedichtheid te verminderen en ontwikkelaars te helpen hun workflows aan te passen:
- Verberg irrelevante delen van de tijdlijn
- Verberg irrelevante delen van het vlammendiagram
- Verberg irrelevante nummers
In dit bericht gaan we elk van deze functies nader bekijken en laten we zien hoe u ze kunt gebruiken om u alleen op de meest kritische informatie te concentreren.
Verberg irrelevante delen van de tijdlijn
Webprestaties werken op de schaal van milliseconden, dus zelfs als de opname van uw optreden maar een paar seconden duurt, zijn er voldoende mogelijkheden om uw plaats te verliezen.
In Chrome 122 hebben we de mogelijkheid toegevoegd om broodkruimels te maken . Met deze functie kunt u de grenzen van de tijdlijn vastleggen, zodat u alleen kunt zoomen of pannen binnen een door u ingesteld interessegebied. Het op deze manier beperken van de tijdlijn kan vooral handig zijn als u bijvoorbeeld problemen met de responsiviteit probeert op te lossen , zodat u uw aandacht kunt richten op een enkele interactie of een problematische lange taak.
De voorgaande schermafbeelding toont een close-up van het tijdlijnoverzicht, dat hoofdlijnenactiviteit zoals scriptuitvoering en presentatiewerk visualiseert. Wanneer u de aanwijzer erop houdt, verschijnt er een nieuwe knop die de grenzen van de tijdlijn instelt op het huidige venster. De knop wordt gelabeld met de breedte van het tijdvenster, in milliseconden, en het pictogram. De broodkruimels bevinden zich boven het tijdlijnoverzicht en zijn allemaal gelabeld volgens de grootte van het tijdvenster.
Om deze functie te gebruiken:
- Zoom en pan de tijdlijn naar een interessant gebied.
- Klik op het vergrootglaspictogram in het tijdlijnoverzicht om de tijdlijn vast te zetten en een broodkruimel in te stellen.
- Herhaal 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 bij te snijden, zorgt u ervoor dat u nooit per ongeluk buiten het bereik naar een irrelevant deel van de tijdlijn scrolt. Wanneer dat nodig is, kunt u echter op de broodkruimels klikken om weer uit te zoomen. Een ander voordeel is dat het tijdlijnoverzicht gelijk blijft met de volgende tracks. Dit kan het een stuk eenvoudiger maken om prestatiemogelijkheden, zoals gedwongen terugvloeiingen, te herkennen en de hoofdoorzaak ervan in de vlamgrafiek te identificeren.
Verberg irrelevante delen van het vlammendiagram
Het analyseren van de hoofdactiviteit is geen sinecure. Dit deel van het prestatiepaneel staat bekend als de vlammengrafiek , vanwege hoe lang en spichtig de call-stacks kunnen worden. In sommige extreme gevallen kunnen deze stapels zo log 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 aanpassen welke vermeldingen in het vlammendiagram u wilt verbergen , zodat u zich kunt concentreren op de meest bruikbare informatie.
Wanneer u met de rechtermuisknop op een functie in het vlammendiagram klikt, verschijnt er een contextmenu met verschillende opties om items te verbergen:
- Functie verbergen : Verwijder de geselecteerde functie uit de vlammenkaart. De kinderen ervan zullen omhoog bewegen en onmiddellijk na de ouderfunctie verschijnen.
- Kinderen verbergen : Snoei de vlammenkaart op de geselecteerde functie en verberg alle kinderen.
- Terugkerende kinderen verbergen : verwijder alle exemplaren van de geselecteerde functie uit de rest van het vlammendiagram.
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 exemplaren van de geselecteerde functie later in de stapel'
- U : toon de verborgen kinderen van de geselecteerde functie
Verberg irrelevante scripts permanent
De optie Script toevoegen om lijst te negeren verbergt de geselecteerde functie uit het vlammendiagram, evenals alle andere functies die in hetzelfde scriptbestand zijn gedefinieerd. Het script wordt ook toegevoegd aan de negeerlijst , die de DevTools-foutopsporing gebruikt om over functies heen te stappen en uitzonderingen te negeren die afkomstig zijn van het script.
Scripts die aan de negeerlijst zijn toegevoegd, blijven behouden, zodat ze in nieuwe sporen verborgen blijven voor de vlammengrafiek. Scripts waar u geen controle over heeft, zouden goede kandidaten zijn voor de negeerlijst. Aan de andere kant is het verbergen van individuele functies tijdelijk voor het huidige spoor en meer situatieafhankelijk. U wilt bijvoorbeeld een omslachtige stapel recursieve functieaanroepen verbergen om het werken met de trace eenvoudiger te maken.
Om de negeerlijst of andere verborgen functies in het vlammendiagram terug te draaien, kunt u het contextmenu gebruiken om de onderliggende functies van de geselecteerde functie te resetten, of om alle verborgen functies in de tracering opnieuw in te stellen. Functies met verborgen kinderen worden geannoteerd met het ▼-pictogram, dat ook de kinderen reset als erop wordt geklikt.
Elke onnodige diepte en complexiteit die u uit de vlammenkaart kunt halen, zal deze veel bruikbaarder maken. Indien nodig is de mogelijkheid om aan te passen welke vermeldingen u ziet een ergonomische verbetering, zodat u uw aandacht kunt richten op de belangrijkste informatie voor de taak die u moet uitvoeren.
Verberg irrelevante nummers
De hoofdactiviteit vormt slechts één track van het paneel Prestaties. Tracks in het paneel Prestaties visualiseren de activiteit van een proces, en ze zijn allemaal uitgelijnd op een gemeenschappelijke tijdlijn om te helpen bij het opsporen van fouten. Naast het hoofdspoor zijn er individuele sporen voor de andere subframes, threads en werkers die door de pagina worden gebruikt, evenals de sporen Netwerk , Frames , Animaties en Interacties . Nog meer tracks markeren de activiteit van Chrome-processen op een lager niveau, zoals IO, GPU en Compositor. Dat is veel informatie! En toch zul je je bij de meeste prestatieworkflows slechts bezig houden met de informatie van een paar nummers tegelijk.
Vanaf Chrome 125 is er een nieuwe configuratiemodus waarmee je onnodige nummers kunt verbergen of naar wens kunt herschikken. Als u bijvoorbeeld een langzame interactie optimaliseert, kunt u ervoor kiezen om alles behalve de Interactions- , Main- en GPU- tracks te verbergen.
Om de tracks te bewerken, klikt u met de rechtermuisknop op de naam van een track en selecteert u Tracks configureren… . Hiermee wordt de configuratiemodus geopend, waarin u individuele nummers kunt weergeven, verbergen of herschikken. Klik op de knop Configuratie van tracks voltooien om uw voorkeuren op te slaan.
Door tracks te configureren, heeft u de controle over de manier waarop het Prestatiepaneel cruciale 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 heeft.
Afsluiten
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, bevindt u zich in een veel betere positie om te vinden wat u zoekt en de gegevens te begrijpen.
We horen graag wat er goed werkt of hoe uw ervaring kan worden verbeterd. Laat het ons weten als u vragen of algemene feedback heeft door contact op te nemen met @ChromeDevTools . Als iets niet werkt of als je een suggestie hebt 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 delen graag al het andere dat we in petto hebben om het prestatiepaneel gebruiksvriendelijker en krachtiger dan ooit te maken. We publiceren ons volgende bericht, waarin we de volgende reeks functies presenteren, hier op het Chrome for Developers-blog. Bekijk ondertussen de pagina Wat is er nieuw in Chrome om op de hoogte te blijven van alles wat nieuw is in DevTools en Chrome.