Wat is er nieuw in DevTools, Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Prestatieverbeteringen

Deze versie bevat diverse verbeteringen aan het prestatiepaneel .

Vooraf verbonden oorsprongen in 'Netwerkafhankelijkheidsboom'-inzicht

De inkijk onder Prestaties > Inzichten > Netwerkafhankelijkheidsboom toont nu een lijst met gebruikte of ongebruikte vooraf verbonden bronnen en eventuele kandidaten voor een vooraf verbonden verbinding.

Preconnect-hints zorgen ervoor dat uw site vroegtijdig verbindingen kan leggen met belangrijke externe bronnen en de laadsnelheid van pagina's verbetert.

Het inzicht in de 'Netwerkafhankelijkheidsboom' vóór en na het toevoegen van vooraf verbonden oorsprongen en kandidaten.

Voor meer informatie, zie 'Vooraf verbinden met vereiste bronnen' .

Serverrespons- en omleidingstijden in het 'Documentaanvraaglatentie'-inzicht

De indicator Prestaties > Inzichten > Latentie van documentaanvragen toont nu de reactietijd van de server en, indien van toepassing, het aantal omleidingen en de omleidingstijd.

De situatie vóór en na het toevoegen van omleidingen en serverresponstijden aan het inzicht 'Latentie van documentaanvragen'.

Omleidingen in het overzicht van netwerkverzoeken

Het paneel Prestaties toont nu omleidings-URL's in het overzicht van netwerkverzoeken en in de bijbehorende tooltips.

De situatie vóór en na het toevoegen van omleidings-URL's aan het overzicht en de tooltips van netwerkverzoeken.

Chromium-probleem: 402353313 .

Minder ruis in de prestatiegrafiek

Het prestatiepaneel toont nu geen gebeurtenissen meer uit de categorie compile ' van de V8 JavaScript-engine . Voorheen veroorzaakten deze gebeurtenissen veel onnodige overhead en ruis, met name de gebeurtenis compile code .

De situatie vóór en na het verwijderen van de 'compile code'-gebeurtenissen uit de prestatietrace.

Als je merkt dat er belangrijke gebeurtenissen ontbreken, laat dan gerust je feedback achter op crbug.com/414330508 .

De optie 'JavaScript-voorbeelden uitschakelen' is verouderd.

De optie 'JavaScript-voorbeelden uitschakelen' in de instellingen voor Prestaties > Opnames is verwijderd vanwege het geringe nut en het lage gebruik ervan.

De situatie vóór en na het verwijderen van de optie 'JavaScript-voorbeelden uitschakelen' uit de 'Opname-instellingen'.

Chromium-probleem: 414734883 .

Parameter voor nauwkeurigheid van geolocatie in sensoren

Via het paneel Sensoren kunt u nu de nauwkeurigheid van de geolocatie-emulatie instellen. Zo kunt u testen hoe verschillende niveaus van GPS-nauwkeurigheid werken.

Het verschil vóór en na het toevoegen van de parameter 'Nauwkeurigheid' aan de geolocatie-emulatie in het paneel Sensoren.

Chromium-probleem: 40074843 .

Verbeteringen aan het elementenpaneel

Deze versie bevat diverse verbeteringen aan het Elementenpaneel .

Het debuggen van complexe CSS-waarden wordt eenvoudiger.

Om u te helpen bij het debuggen van complexe CSS-waarden, toont het tabblad Elementen > Stijlen nu een tooltip wanneer u de muis eroverheen beweegt:

  • De volledige definitieketen van CSS-variabelen, zodat u niet door meerdere links hoeft te klikken.
  • Een stapsgewijze evaluatie van complexe CSS-berekeningen, zodat u fouten efficiënter kunt opsporen en een beter inzicht krijgt in hoe een waarde wordt berekend.

De tooltip toont definitieketens op meerdere regels, één voor elke definitie, en u kunt complexe berekeningen uitbreiden en met de muis over waarden bewegen om de berekende waarde te markeren en terug te traceren naar de oorspronkelijke uitdrukking.

De situatie vóór en na het toevoegen van een tooltip met definitieketens en uitbreidbare complexe berekeningen.

Chromium-probleem: 396080529 .

@function ondersteuning in Elementen > Stijlen

Ter voorbereiding op de ondersteuning @function in Chrome , linkt het tabblad Elementen > Stijlen uw aangepaste functienamen nu naar hun definities in een aparte sectie.

De link vóór en na het koppelen van uw aangepaste functienaam aan de bijbehorende sectie.

Verbeteringen aan het netwerkpaneel

Deze versie bevat diverse verbeteringen aan het netwerkpaneel .

has-request-header filter

Het netwerkpaneel ondersteunt nu het filter has-request-header , waarmee u kunt filteren op een specifieke naam van een request-header.

De situatie vóór en na het toevoegen van het filter 'has-request-header' aan het netwerkpaneel.

Chromium-probleem: 397481040 .

Directe sockets in geïsoleerde webapplicaties

In het paneel Netwerk kunt u nu het verkeer van geïsoleerde webapplicaties (IWA's) bewaken via TCPSocket, UDPSocket (in gebonden modus) en UDPSocket (in verbonden modus).

Om dit te doen, selecteert u een directscoket -verbinding naast de reguliere verzoeken in de tabel en selecteert u vervolgens een bericht op het tabblad Berichten .

De situatie vóór en na het toevoegen van ondersteuning voor Direct Sockets in IWA's aan het netwerkpaneel.

Isolated Web Apps (IWA's) bieden een beveiligingsmodel met een hoge mate van vertrouwen voor webapplicaties. Zie voor meer informatie Aan de slag met Isolated Web Apps en bekijk de demo-app die de Direct Sockets API implementeert.

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Applicatie > Opslag : De verouderde Web SQL-optie is verwijderd ( crbug.com/412707590 ).
  • Elementen :
  • Netwerk : De HTTP-header Referrer-Policy is verwijderd uit de optie 'Kopiëren als ophalen', omdat het een antwoordheader is om het gedrag van de browser te bepalen en geen instructie aan de clientzijde ( crbug.com/413904896 ).
  • Prestaties : Waarschuwingen voor 'lange taken' zijn verwijderd uit workerthreads omdat ze de hoofdthreads niet blokkeren ( crbug.com/40248589 ).
  • Problemen . Nu meldt het volgende:
    • Alle bronnen waarvan wordt vermoed dat ze gebruikers volgen, worden geblokkeerd.
    • Beveiligingsmaatregelen tegen bounce-tracking, ongeacht of er tijdens een redirect toegang tot de opslag plaatsvindt of niet.
  • Toegankelijkheid . De volgende elementen in Elementen > Stijlen kunnen nu met het toetsenbord worden geselecteerd:

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' .