Wat is er nieuw in DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Oorsprong- en scriptkoppelingen voor profiel- en functieaanroepen in Prestatie

Op het tabblad Prestaties > Samenvatting worden nu koppelingen weergegeven naar de relevante scripts en oorsprongen voor profiel- en functieaanroepen. U hoeft dus niet langer met de muis over deze gebeurtenissen in het hoofdspoor te bewegen.

Voor en na het toevoegen van bron en oorsprong aan het tabblad Samenvatting.

Bovendien worden in de tracks Netwerk en Hoofd nu eventuele namen van derden weergegeven in tooltips wanneer u met de muis over gebeurtenissen beweegt.

Chromium-probleem: 368541957 .

Ondersteuning voor veldgegevens 'LCP per fase'

Als veldgegevens zijn ingeschakeld , worden in het inzicht Prestaties > Inzichten > LCP per fase nu de 75e-percentielafbeeldingtimings uit het Chrome UX-rapport weergegeven in een extra tabel, zodat u de timings rechtstreeks in het inzicht kunt vergelijken.

Voor en na het toevoegen van veldgegevensondersteuning aan het inzicht 'LCP per fase'.

Inzicht in de 'netwerk afhankelijkheidsboom'

Het tabblad Prestaties > Inzichten voegt het nieuwe inzicht 'Netwerkafhankelijkheidsboom' toe aan de verzameling. Het inzicht geeft aan of er kritieke verzoeken aan elkaar gekoppeld zijn, wat niet wordt aanbevolen. Beweeg de muisaanwijzer over de verzoeken in het inzicht om ze gemarkeerd te zien in het netwerkspoor .

Zie Vermijd het koppelen van kritieke verzoeken voor meer informatie.

Zwaarste stapelmarkering

Het Prestatiepaneel markeert nu items in het hoofdspoor wanneer u eroverheen beweegt in de aanroepboom of de zijbalk Bottom-up > Zwaarste stack , en dimt de rest. Zo kunt u visueel geneste items in de aanroepstack vinden die de meeste tijd kosten.

Toegankelijkheidsboomweergave in Elementen

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

Voorheen kon je door een aparte toegankelijkheidsboom bladeren in het tabblad Elementen > Toegankelijkheid . Nu kun je op de knop 'Overschakelen naar toegankelijkheidsboomweergave' in de rechterbovenhoek van de DOM-boom in het paneel Elementen klikken om te schakelen tussen de DOM- en de volledige pagina-toegankelijkheidsboom, zodat je ze en hun relatie gemakkelijker kunt verkennen.

Voor en na het standaard inschakelen van de toegankelijkheidsboomweergave op volledige pagina.

Met de toegankelijkheidsboom kunt u zien hoe ondersteunende technologie uw content ziet en worden ARIA-kenmerken en berekende toegankelijkheidseigenschappen van DOM-knooppunten weergegeven. Zie de volledige toegankelijkheidsboom in Chrome DevTools voor meer informatie.

Chromium-probleem: 40808541 .

Verbeterde lege toestanden voor verschillende panelen

Lege statussen (wanneer er niets geopend is) voor 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' .

Het voor- en nabeeld van het verbeteren van de lege toestanden in de deelvensters Netwerk en Zoeken.

Optie 'Vraag AI' verplaatst naar onderkant menu

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

Het voor- en naproces: het verplaatsen van de optie 'Vraag AI' naar de onderkant van het keuzemenu.

Laat gerust uw feedback achter op het AI-assistentiepaneel op crbug.com/364805393 .

Vuurtoren 12.4.0

Het Lighthouse- paneel draait nu Lighthouse 12.4.0.

Deze versie markeert sommige prestatie-audits als informatief onder geslaagde voorwaarden, in plaats van ze te verbergen in de sectie 'geslaagde audits'. Zie de volledige lijst met wijzigingen .

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestatie > Samenvatting : De twee regels Totale tijd en Eigen tijd zijn vervangen door een regel met de tekst Duur, waarbij ook (self time) tussen haakjes wordt weergegeven, indien van toepassing ( crbug.com/395572753 ).
  • Problemen : Nieuwe probleemtypen toegevoegd: <select> -problemen in de toegankelijkheidsboom en SRI-berichthandtekeningfouten die optreden tijdens het parseren of valideren in de netwerkservice ( crbug.com/381044049 , crbug.com/347890366 ).
  • Toegankelijkheid : het tabblad Elementen > Stijlen geeft nu een overzicht van de elementen die u via toetsenbordnavigatie doorloopt ( crbug.com/396311936 ).
  • Elementen : Problemen met <select> worden nu ondersteund en worden gemarkeerd met een golvende onderstreping ( crbug.com/378738916 ).
  • Netwerk : De pictogrammen 'override dot' en cookiewaarschuwingen worden nu rechts van de tabbladnaam weergegeven, in plaats van links ( crbug.com/390556283 ).

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.