Wat is er nieuw in DevTools, Chrome 136,Wat is er nieuw in DevTools, Chrome 136,Wat is er nieuw in DevTools, Chrome 136,Wat is er nieuw in DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Nieuwe prestatie-inzichten

Via het tabblad Prestaties > Inzichten krijgt u nieuwe inzichten:

  • Moderne HTTP die verzoeken markeert die gebruikmaken van het oude HTTP/1.1-protocol.
  • Gebruik efficiënte cachelevensduurs die verzoeken benadrukken die baat kunnen hebben bij een langere cachelevensduur en zo de laadtijd van uw website versnellen.
  • Lettertypeweergave die u de geschatte tijdsbesparing laat zien als u font-display optimaliseert.

Drie nieuwe inzichten op het tabblad Inzichten.

Klik om te markeren

U kunt nu op items in de tabellen Samenvatting , Bottom-up , Aanroepboom en Gebeurtenislogboek klikken om de bijbehorende gebeurtenissen gemarkeerd te houden in de tracering en de rest te dimmen terwijl u door de prestatietracering bladert.

Servertimings in Overzicht van netwerkverzoeken

Op het tabblad Samenvatting in het deelvenster Prestaties worden nu de servertimings weergegeven voor netwerkaanvragen die server-side renderingtechnologieën implementeren.

De tabel 'Servertimings' in het overzicht van een netwerkaanvraag.

Het paneel Prestaties haalt de gegevens uit de Server-Timing -responsheader .

Cookies filteren in 'Privacy en beveiliging'

De tabel in het gedeelte Privacy en beveiliging > Privacy > Cookies van derden krijgt een filter, zodat u sneller de cookies vindt die u interesseren.

Het filter in de tabel 'Cookies van derden'.

Afmetingen in kB-eenheden in tabellen over panelen

Om de eenheden binnen dezelfde context gelijk te houden, tonen tabellen in de panelen Netwerk en Geheugen en de 1p/3p-tabel in Prestaties > Overzicht nu alle groottes in kB. Dit stelt u in staat om getallen in dezelfde kolom en tussen panelen direct te vergelijken, in plaats van MB versus kB versus B-eenheden in de gaten te houden.

De voor- en na-eenheid van de eenheidsgrootte.

Autocomplete ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen

Automatisch aanvullen in Elementen > Stijlen kan nu de bijbehorende waarden voor de eigenschappen corner-shape en corner-*-shape voorstellen.

De opties voor automatisch aanvullen voor de eigenschap 'corner-shape'.

Chromium-probleem: 402346406 .

Experimenteel: Problemen met elementen en attributen in DOM markeren

Met deze nieuwe experimentele functie kan het paneel 'Elementen' nu problemen met DOM-elementen of -attributen markeren met een rode, golvende onderstreping. Beweeg de muisaanwijzer over dergelijke elementen of attributen om een ​​tooltip te zien met een link naar de bijbehorende fout in het paneel ' Problemen' .

Het voor- en na-overzicht van een DOM-probleem in de DOM-boom met een tooltip en een koppeling naar het Problemen-paneel.

Het paneel Elementen markeert momenteel ongeldige afstammelingen van <select> , niet-overeenkomende ARIA-definities en ongeldige ARIA-kenmerken.

Chromium-probleem: 378738916 .

Vuurtoren 12.5.0

Het Lighthouse- paneel draait nu Lighthouse 12.5.0.

Het meest opvallende in deze versie is dat legacy-javascript nu Baseline gebruikt in plaats van esmodules . 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:

  • Prestaties > Inzichten > Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkaanvragen in de netwerkboom ( 400708304 ).
    • Netwerk afhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
  • Animaties : Er is een bug opgelost waardoor losse elementen in het geheugenpaneel verschenen vanwege vastgelegde animaties 400635410 .
  • Recorder : Gebruikt nu hetzelfde bevestigingsdialoogvenster als bij het plakken van code wanneer u voor de eerste keer een opname uitvoert.
  • Lagen : Geeft nu het totale aantal lagen en het totale geheugen voor alle zichtbare lagen weer in de statusbalk onderaan.
  • Geheugen : De initialisatie van heap snapshots is verbeterd door taken tussen twee workers te paralleliseren in plaats van één te gebruiken ( 42203857 ).
  • Problemen : Rapporteert nu Local Network Access (LNA) CORS-fouten ( 395895368 ).
  • Toegankelijkheid :
    • Tooltips : verschijnen nu bij het indrukken van een sneltoets in plaats van bij de focus ( 396311936 ).
    • Elementen > Stijlen : De var() functie kan nu met het toetsenbord worden gebruikt. Dit betekent dat u --custom-property kunt selecteren en op Enter kunt drukken om naar het koppelingsdoel te gaan ( 401212692 ).

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.