Wat is er nieuw in DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Bron- en scriptlinks voor profiel- en functieaanroepen in Performance

Het tabblad Prestaties > Samenvatting toont nu links naar de relevante scripts en bronnen voor profiel- en functieaanroepen, zodat u niet langer met de muis over deze gebeurtenissen in het hoofdoverzicht hoeft te bewegen.

Het verschil tussen voor en na het toevoegen van de bron en oorsprong aan het tabblad Samenvatting.

Bovendien tonen de Network- en Main- tracks nu, indien aanwezig, de namen van derden in tooltips wanneer u met de muis over evenementen beweegt.

Chromium-probleem: 368541957 .

'LCP per fase' veldgegevens ondersteunen

Met ingeschakelde veldgegevens toont het inzicht Prestaties > Inzichten > LCP per fase nu de 75e percentiel beeldtijden uit het Chrome UX-rapport in een extra tabel, zodat u de tijden direct in het inzicht kunt vergelijken.

De situatie vóór en na het toevoegen van veldgegevens ter ondersteuning van het inzicht 'LCP per fase'.

Inzicht in de 'netwerkafhankelijkheidsboom'

Het tabblad Prestaties > Inzichten voegt het nieuwe inzicht 'Netwerkafhankelijkheidsboom' toe aan de verzameling. Dit inzicht laat zien of u kritieke aanvragen aan elkaar hebt gekoppeld, wat niet aan te raden is. Beweeg de muis over de aanvragen die in het inzicht worden vermeld om ze gemarkeerd te zien in het netwerkoverzicht .

Zie voor meer informatie: Voorkom het aaneenschakelen van kritieke verzoeken .

Zwaarste stapelmarkering

Het paneel Prestaties markeert nu items in het hoofdspoor wanneer u er met de muis overheen beweegt in de oproepstructuur of in de zijbalk Bottom-up > Heaviest stack , en dimt de rest. Hierdoor kunt u visueel de geneste items in de oproepstack vinden die de meeste tijd in beslag nemen.

Toegankelijkheidsboomweergave in Elements

De toegankelijkheidsboomweergave op volledige pagina is nu standaard ingeschakeld in het paneel Elementen .

Voorheen kon je een aparte toegankelijkheidsstructuur bekijken via het tabblad Elementen > Toegankelijkheid . Nu kun je op de knop ' Schakel over naar toegankelijkheidsstructuur' in de DOM-structuur van het paneel Elementen klikken om te schakelen tussen de DOM-structuur en de volledige pagina-toegankelijkheidsstructuur, zodat je ze en hun onderlinge relatie gemakkelijker kunt verkennen.

De situatie vóór en na het standaard inschakelen van de toegankelijkheidsboomweergave op volledige pagina.

De toegankelijkheidsboom laat je zien hoe ondersteunende technologie je content interpreteert en toont ARIA-attributen en berekende toegankelijkheidseigenschappen van DOM-elementen. Zie voor meer informatie de volledige toegankelijkheidsboom in Chrome DevTools .

Chromium-probleem: 40808541 .

Verbeterde lege toestanden voor diverse panelen

De lege statussen (wanneer er niets geopend is) van verschillende panelen, secties en tabbladen zijn gestroomlijnd, zodat u precies weet wat u moet doen om ermee aan de slag te gaan. Sommige lege statussen, bijvoorbeeld in het paneel Netwerk , hebben nu relevante, handige knoppen zoals 'Pagina opnieuw laden' .

De situatie vóór en na het verbeteren van lege statussen in de panelen Netwerk en Zoeken.

De optie 'Vraag AI' is naar de onderkant van het menu verplaatst.

De optie 'Vraag AI' staat nu onderaan de uitklapmenu's in plaats van bovenaan.

De situatie voor en na het verplaatsen van de optie 'Vraag AI' naar de onderkant van het dropdownmenu.

U kunt uw feedback achterlaten op het AI- hulppanel op crbug.com/364805393 .

Lighthouse 12.4.0

Het Lighthouse- paneel draait nu op Lighthouse 12.4.0.

In deze versie worden sommige prestatieaudits als informatief gemarkeerd onder de voorwaarden dat ze geslaagd zijn, in plaats van ze te verbergen in het gedeelte met geslaagde audits. Zie de volledige lijst met wijzigingen .

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Prestaties > Samenvatting : De twee regels 'Totale tijd' en 'Zelfstandige tijd' zijn vervangen door één regel ' Duur' , die ook (self time) tussen haakjes weergeeft, indien aanwezig ( crbug.com/395572753 ).
  • Problemen : Nieuwe probleemtypen toegevoegd: <select> problemen in de toegankelijkheidsstructuur en SRI-berichtsignatuurfouten die optreden tijdens het parseren of valideren in de netwerkservice ( crbug.com/381044049 , crbug.com/347890366 ).
  • Toegankelijkheid : het tabblad Elementen > Stijlen toont nu een kader bij de elementen waar je doorheen navigeert met behulp van toetsenbordnavigatie ( crbug.com/396311936 ).
  • Elementen : Problemen met <select> worden nu ondersteund en gemarkeerd met een golvende onderstreping ( crbug.com/378738916 ).
  • Netwerk : De 'override dot' en de cookie-waarschuwingspictogrammen worden nu rechts van de tabnaam weergegeven in plaats van links ( crbug.com/390556283 ).

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .