Gepubliceerd: 19 maart 2025
In onze voortdurende berichtgeving over het initiatief om de Chrome-prestatietools te verbeteren , kondigen we met trots meer upgrades aan voor de manier waarop u kunt communiceren met het DevTools-prestatiepaneel. Deze verbeteringen zijn bedoeld om uw vermogen om door prestatiesporen te navigeren te verbeteren en irrelevante ruis te verminderen, zodat u zich kunt concentreren op het snel opsporen en oplossen van prestatieproblemen.
Verbeterde navigatie
We hebben van veel gebruikers feedback gehoord dat scrollen en zoomen in het prestatiepaneel niet intuïtief kan zijn. Hoewel veel oude gebruikers eraan gewend zijn, verwachten veel mensen dat een scrollgebaar, nou ja, scrollt, en niet in- en uitzoomt op het spoor.
Een nieuwe optie onder de maakt het mogelijk om te schakelen tussen het bestaande "Klassieke" scrollen en de nieuwe "Moderne" aanpak.
In de Klassieke modus blijft het scrollen (via trackpad of scrollwiel) in- en uitzoomen, terwijl het ingedrukt houden van shift en scrollen op en neer scrollt in de vlammengrafiek.
In de nieuwe Moderne modus zijn deze omgedraaid: scrollen scrollt nu door de vlammengrafiek, terwijl shift en scrollen in- en uitzoomt.
Sneltoetsen op het toetsenbord (zoals het gebruik van WASD om door de trace te navigeren) blijven ongewijzigd werken.
Bidirectioneel overzicht
Bovenaan het Prestatiepaneel bevindt zich het CPU- diagram, onderdeel van het tijdlijnoverzicht. Het geeft schattingen weer van het CPU-gebruik tijdens de traceringsopname, opgesplitst per werktype (bijvoorbeeld oranje voor scriptuitvoering, paars voor weergavebewerkingen).
Dit geeft een overzicht (ook wel een minimap genoemd) van het spoor, en biedt een samenvatting op hoog niveau van de hele tijdlijn, zelfs als u dieper inzoomt om bepaalde problemen te onderzoeken.
Het kan echter gemakkelijk zijn om uw exacte plaats op de minikaart te verliezen als u voornamelijk naar het spoor kijkt (en vice versa). Daarom hebben we nieuwe functies geïntroduceerd die helpen het overzicht aan de ingezoomde weergave te koppelen. Wanneer u nu over het overzicht beweegt, verschijnt er een overeenkomstige verticale lijn in de vlammengrafiek, die hetzelfde tijdstip in de vlammengrafiek markeert:
Op dezelfde manier zal het bewegen over items in de flamechart nu het corresponderende deel van de CPU- grafiek markeren. Dit is geweldig om precies te zien welke taken deze CPU-pieken veroorzaken.
Filter het spoor
Het opsporen van prestatieproblemen houdt doorgaans het doorzoeken van een grote hoeveelheid gegevens in. Om u te helpen zich te concentreren op de meest relevante informatie, hebben we de mogelijkheid verbeterd om ruis weg te filteren.
Vorig jaar hebben we de mogelijkheid geïntroduceerd om scripts in het prestatiepaneel toe te voegen aan de DevTools-negeerlijst , waardoor minder relevante vermeldingen in de flamechart worden weggefilterd. Als u bijvoorbeeld de prestaties van een component op uw pagina debugt, kan dit afleidend zijn als de callstack van uw framework diep genoeg is om u te verplichten om op en neer te scrollen in het prestatiepaneel, en u wilt vaak een groot deel van die callstack samenvouwen om zich op de belangrijke onderdelen te concentreren.
U kunt met de rechtermuisknop op een item in het vlamdiagram klikken en Script toevoegen aan negeerlijst selecteren, waardoor het script wordt toegevoegd aan de negeerlijst van DevTools en alle vermeldingen daaruit in het vlamdiagram worden samengevouwen.
Maar nu kunt u de negeerlijst ook handmatig bewerken, rechtstreeks vanuit het bovenaan het paneel Prestaties . Regexes van de negeerlijst worden gedeeld door DevTools, dus overeenkomende scripts worden overgeslagen bij het debuggen in het paneel Bronnen en samengevoegd tot afzonderlijke vermeldingen in de flamechart. De lijst is persistent in alle DevTools-sessies.
Op deze manier krijgt u een nauwkeurige controle over welke bestanden u moet negeren, en een handige plek om regels in en uit te schakelen terwijl u werkt.
Scripts van derden dimmen
Scripts van derden komen veel voor op websites, maar kunnen vaak buiten onze controle liggen of irrelevant zijn voor een bepaalde foutopsporingssessie. De nieuwe Dim 3rd Parties -optie bovenaan het Prestatiepaneel zal script- en netwerkactiviteit van derden in de tijdlijn grijs maken, waardoor de visuele rommel wordt verminderd en u zich kunt concentreren op prestatiebijdragen van derden.
Maar soms wil je nog meer controle, bijvoorbeeld je concentreren op een bepaalde derde partij, of zelfs alleen bijdragen vanuit je eigen API of CDN. Onderaan het paneel op het tabblad Samenvatting vindt u een overzicht van de eerste en derde partijen die DevTools op de pagina kan vinden. Als u met de muis over elke entiteit in de lijst beweegt, worden alle activiteiten die niet van die entiteit afkomstig zijn, grijs weergegeven.
Conclusie
Deze nieuwe functies zouden u moeten helpen beter door het prestatiepaneel te navigeren en de ruis weg te filteren, zodat u zich kunt concentreren op de delen van de trace die voor u belangrijk zijn. Probeer deze functies uit en laat ons weten hoe ze verder kunnen worden verbeterd of welke andere verbeteringen u graag zou zien.