Gepubliceerd: 13 november 2024
Stel je voor dat je naar een prestatietracering kijkt en een specifiek gebied wilt benadrukken, zoals de langste taak of een onnodig stuk werk. Misschien wilde u aantekeningen maken voor toekomstig gebruik of uw bevindingen met een collega delen. Wat is de beste manier om dat te doen?
Natuurlijk drukt u het spoor af op een groot stuk papier en tekent en schrijft u handmatig uw aantekeningen, of gebruikt u software van derden om aantekeningen te maken op een screenshot van een spoor! (Hoewel dat tot nu toe de beste manier was.)
Als onderdeel van de toewijding van ons team aan het stroomlijnen van de workflows voor ontwikkelaars , introduceren we met trots een alternatief voor deze opties: de mogelijkheid om annotaties rechtstreeks aan de trace toe te voegen in het prestatiepaneel !
Nu kunt u sporen ter plaatse annoteren, gemakkelijk door die annotaties navigeren en ze zelfs rechtstreeks in het traceringsbestand opslaan. Dit maakt het delen van gemarkeerde inzichten net zo eenvoudig als het verzenden van een bestand, terwijl de noodzaak voor externe tools of tijdelijke oplossingen wordt geëlimineerd. Annotaties kunnen u niet alleen helpen bij het opsporen van fouten, maar kunnen er ook voor zorgen dat u snel op één lijn komt met uw collega, of dat zij beter begrijpen wat er aan de hand is, zonder veel heen en weer te hoeven praten.
Er zijn drie soorten annotaties:
Geannoteerde tijdsbereiken : labelen van elk tijdsbereik in de tijdlijn
Geannoteerde items : een label toevoegen aan elk item in de tijdlijn
Ingangsverbindingen : twee willekeurige ingangen verbinden met een pijl om hun relatie weer te geven
Laten we eens kijken naar elk type annotatie en naar de scenario's waarin u zich kunt bevinden als ze van pas komen.
Geannoteerde tijdsbereiken
Een veelgebruikte workflow in DevTools is het vastleggen van een trace om fouten in een langzame interactie op te sporen. De traceringsweergave kan in eerste instantie overweldigend lijken, maar als je dieper ingaat op specifieke gebeurtenishandlers en call-stacks, wordt het logisch. Eén ding dat u kunt doen om de traceringsweergave gemakkelijker te maken om mee te werken, is het maken van een annotatie om aan te geven hoe een tijdsblok doorgaans wordt besteed. Het kan dus bijvoorbeeld nuttig zijn om het tijdsbestek te annoteren waarin de gebruikersinterface zinvol wordt bijgewerkt na een gebruikersinteractie.
Een tijdsperiode annoteren : Houd Shift ingedrukt en sleep vanaf het begin van de interactie naar de UI-update. Typ daarna een label om de annotatie te maken. Als het geselecteerde bereik niet correct is, kunt u dit annuleren door weg te klikken voordat u typt. Of dubbelklik erop om het label van een annotatie te bewerken. Op dit moment kunt u het tijdsbereik van een bestaande annotatie niet aanpassen. Als het tijdsbestek onjuist is, verwijdert u de annotatie en maakt u een nieuwe.
Met deze annotatie krijgt u een duidelijker beeld van al het werk dat moet gebeuren vóór de voor de gebruiker zichtbare wijziging, zodat u uw foutopsporing dienovereenkomstig kunt richten.
Geannoteerde vermeldingen
Om de voor de gebruiker zichtbare wijziging duidelijker te maken, kunt u de taak die verantwoordelijk is voor de overgang ook annoteren met een invoerlabel .
Om een label voor het item aan te maken : Dubbelklik op het geselecteerde item en typ uw label of klik met de rechtermuisknop op het item en selecteer "Labelitem" in het contextmenu. Om het label van een annotatie te bewerken, dubbelklikt u op het item of het label. U kunt ook de optie "Labelinvoer" in het contextmenu selecteren.
Met deze annotaties bij het begin is het gemakkelijker om te zien welk werk wel (of niet) cruciaal is voor de interactie en hoeveel tijd het kost.
Ingangsverbindingen
De derde manier waarop we het spoor kunnen annoteren is door het verband te leggen tussen de interactie en de lange taak die verantwoordelijk is voor de transitie.
Om een verbinding tussen items te maken : Dubbelklik op het item dat u met een ander item wilt verbinden en klik op de pijl die rechts van dat item verschijnt. Klik vervolgens op het item waarmee u het wilt verbinden. U kunt ook met de rechtermuisknop op het item klikken en "Inzendingen koppelen" selecteren in het contextmenu van het item.
Dus ook al is de interactie zelf beëindigd, je kunt dit type annotatie gebruiken om duidelijker te laten zien hoe deze verband houdt met de daaropvolgende lange taken die uiteindelijk de gebruikersinterface blokkeren.
Annotaties verwijderen en verbergen
Alle annotaties kunnen snel worden verwijderd vanuit de annotatielijstweergave in de zijbalk. Als u over een annotatie beweegt, wordt een prullenbakpictogram ' zichtbaar. Klik op dit pictogram om de annotatie te verwijderen.
Als alternatief kunt u itemlabels en annotaties met vermeldingsverbindingen die aan een specifieke gebeurtenis zijn gekoppeld, met de rechtermuisknop op de gebeurtenis klikken en 'Annotaties verwijderen' selecteren. Annotaties met labels kunnen ook worden verwijderd door het label te verwijderen en de annotaties op te slaan.
Als u annotaties wilt verbergen zonder ze te verwijderen, zodat ze u niet hinderen bij het verkennen van de tracering, vinkt u gewoon het selectievakje 'Annotaties verbergen' aan onder aan de annotatiezijbalk. Deze voorkeur wordt opgeslagen. Wanneer u een trace met annotaties laadt terwijl deze instelling is ingeschakeld, blijven de annotaties verborgen totdat u het selectievakje uitschakelt.
Bewaar of laad geannoteerde sporen
Geweldig, je hebt al die annotaties toegevoegd om jezelf en anderen te helpen het spoor te begrijpen. Wat is het volgende?
Het is niet nodig om schermafbeeldingen van de tracering te maken om deze naar een collega te sturen, zoals vroeger, vóór de annotaties. Sla gewoon uw geannoteerde bestand op en stuur ze dat bestand. Dat is alles: ze kunnen het bestand uploaden naar het prestatiepaneel en alle aantekeningen zien die u in de context van de tracering hebt gemaakt, of misschien zelfs meer aantekeningen toevoegen en deze naar u terugsturen!
DevTools slaat ook andere soorten aanpassingen op in de traceringsweergave. U kunt bijvoorbeeld een interessegebied isoleren door in te zoomen en een broodkruimel in te stellen, of vermeldingen in irrelevante call-stacks verbergen, en al deze instellingen blijven behouden in het traceringsbestand, waardoor het nog eenvoudiger wordt om samen te werken aan het opsporen van fouten in de prestaties. Met al deze aanpassingen kunt u de aandacht vestigen op wat het belangrijkst is, terwijl u de context van het hele, interactieve spoor biedt, in tegenstelling tot een screenshot.
Om annotaties en andere aanpassingen te behouden, klikt u op de optie Trace opslaan onder het downloadpictogram . Wanneer een trace wordt geladen, bevat deze al deze aanpassingen. Opslaan met annotaties is de standaardoptie, maar als u alleen het onbewerkte traceringsbestand wilt opslaan, selecteert u de optie Trace opslaan zonder annotaties .
Conclusie
Dit lijkt misschien veel informatie om te absorberen, maar maak je geen zorgen! Instructies voor het maken van annotaties zijn altijd te vinden op het tabblad Annotaties van de zijbalk van het prestatiepaneel . Dit tabblad biedt instructies als er geen annotaties bestaan, en geeft een lijstweergave van annotaties weer zodra ze zijn gemaakt.
Zo stellen annotaties in het Prestatiepaneel ontwikkelaars in staat cruciale momenten binnen een trace vast te stellen, waardoor gepersonaliseerde context en inzichten worden toegevoegd. Dit stroomlijnt het analyseproces, waardoor het gemakkelijker wordt om prestatie-optimalisaties te delen en eraan samen te werken. Probeer de annotaties in het deelvenster Prestaties uit en laat ons weten wat u ervan vindt. Als u feedback heeft, lezen we uw opmerkingen graag in het openbare nummer .
Zeg vaarwel tegen de behoefte aan externe tools en hallo tegen een efficiëntere workflow!