Wat is er nieuw in DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Oorsprong- en scriptkoppelingen voor profiel- en functieaanroepen in Performance

Op het tabblad Prestaties > Samenvatting ziet u nu koppelingen naar de relevante scripts en oorsprongen voor profiel- en functieaanroepen, zodat u niet over deze gebeurtenissen in het hoofdspoor hoeft te bewegen.

Het voor en na het toevoegen van bron en herkomst aan het tabblad Samenvatting.

Bovendien tonen de netwerk- en hoofdtracks nu namen van derden, indien aanwezig, in tooltips wanneer u over gebeurtenissen beweegt.

Chroomuitgave: 368541957 .

Ondersteuning van veldgegevens 'LCP per fase'

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

Het voor en na toevoegen van veldgegevens ondersteunt het 'LCP per fase'-inzicht.

Inzicht in de netwerkafhankelijkheidsboom

Het tabblad Prestaties > Inzichten voegt het nieuwe inzicht in de netwerkafhankelijkheidsboom toe aan de verzameling. Het inzicht vertelt u of u kritieke verzoeken hebt geketend, wat niet wordt aanbevolen. Beweeg de muis over de verzoeken in het inzicht om ze gemarkeerd te zien in de netwerktrack .

Zie voor meer informatie Vermijd het koppelen van kritieke verzoeken .

Markering van de zwaarste stapel

Het prestatiepaneel markeert nu items in het hoofdspoor terwijl u erover beweegt in de oproepboom of Bottom-up > Zwaarste stapelzijbalk en dimt de rest. Hierdoor kunt u visueel geneste items in de call-stack vinden die de meeste tijd in beslag nemen.

Toegankelijkheidsstructuurweergave in Elements

De toegankelijkheidsstructuurweergave op volledige pagina is nu standaard ingeschakeld in het paneel Elementen . Hiermee kunt u inspecteren hoe ondersteunende technologie uw inhoud ziet en worden ARIA-attributen en berekende toegankelijkheidseigenschappen van DOM-knooppunten weergegeven.

Om de toegankelijkheidsstructuurweergave te openen, klikt u op de knop Overschakelen naar toegankelijkheidsstructuurweergave in de rechterbovenhoek van de DOM-structuur in het paneel Elementen .

De voor en na het standaard inschakelen van de toegankelijkheidsstructuurweergave op volledige pagina.

Zie Volledige toegankelijkheidsstructuur in Chrome DevTools voor meer informatie.

Chroomuitgave: 40808541 .

Verbeterde lege statussen voor verschillende panelen

De lege statussen (wanneer er niets open 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 netwerkpaneel , hebben nu relevante handige knoppen, zoals Pagina opnieuw laden .

De voor en na het verbeteren van lege statussen in de panelen Netwerk en Zoeken.

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

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

De voor en na het verplaatsen van de optie 'Ask AI' naar de onderkant van het vervolgkeuzemenu.

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 voldoende omstandigheden, in plaats van ze te verbergen in de sectie met geslaagde audits. Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties > Samenvatting : De twee regels Totale tijd en Zelftijd zijn vervangen door een duur van één regel die ook (indien van toepassing (self time) tussen haakjes toont ( crbug.com/395572753 ).
  • Problemen : nieuwe probleemtypen toegevoegd: <select> problemen in de toegankelijkheidsstructuur en SRI-berichthandtekeningfouten die optreden tijdens het parseren of valideren in de netwerkservice ( crbug.com/381044049 , crbug.com/347890366 ).
  • Toegankelijkheid : het tabblad Elementen > Stijlen schetst nu de elementen waar u doorheen stapt 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 cookie-waarschuwingspictogrammen worden nu rechts van de tabbladnaam weergegeven, in plaats van links ( crbug.com/390556283 ).

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .