Wat is er nieuw in DevTools, Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen aan het prestatiepaneel

Deze versie brengt diverse verbeteringen aan het Prestatiepaneel .

Vooraf verbonden oorsprongen in inzicht in 'Netwerk afhankelijkheidsboom'

In het inzicht Prestaties > Inzichten > Netwerkafhankelijkheidsboom ziet u nu een lijst met gebruikte of ongebruikte vooraf verbonden bronnen en eventuele vooraf verbonden kandidaten.

Met preconnect-hints kan uw site vroegtijdig verbindingen leggen met belangrijke externe bronnen en de laadsnelheid van pagina's verbeteren.

Het inzicht in de 'Netwerk afhankelijkheidsboom' voor en na het toevoegen van vooraf verbonden oorsprongen en kandidaten.

Zie Vooraf verbinding maken met de vereiste oorsprongen voor meer informatie.

Serverrespons- en omleidingstijden in 'Documentaanvraaglatentie'-inzicht

In het inzicht Prestaties > Inzichten > Latentie van documentverzoeken ziet u nu de serverresponstijd en, indien van toepassing, het aantal omleidingen en de omleidingstijd.

Voor en na het toevoegen van omleidings- en serverresponstijden aan het inzicht 'Latentie van documentaanvragen'.

Omleidingen in Overzicht van netwerkverzoeken

In het paneel Prestaties worden nu omleidings-URL's weergegeven in het Overzicht van netwerkverzoeken en in hun tooltips.

Voor en na het toevoegen van redirect-URL's aan het overzicht en de tooltips van netwerkverzoeken.

Chromium-probleem: 402353313 .

Minder ruis in de prestatietracering

Het Prestatiepaneel toont nu geen gebeurtenissen uit de compile van de v8 JavaScript-engine . Voorheen veroorzaakten deze gebeurtenissen veel onnodige overhead en ruis, met name de compile code .

Voor en na het verwijderen van de 'code compileren'-gebeurtenissen uit de prestatietracering.

Als u merkt dat er voor u belangrijke gebeurtenissen ontbreken, kunt u uw feedback achterlaten op crbug.com/414330508 .

Verouderde 'JavaScript-voorbeelden uitschakelen'

De optie JavaScript-samples uitschakelen in de instellingen Prestaties > Vastleggingen is verouderd en verwijderd vanwege het zeldzame nut en het lage gebruik.

Voor en na het verwijderen van de optie 'JavaScript-samples uitschakelen' uit de 'Vastleginstellingen'.

Chromium-probleem: 414734883 .

Geolocatienauwkeurigheidsparameter in sensoren

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

Voor en na het toevoegen van de parameter 'Nauwkeurigheid' aan geolocatie-emulatie in het paneel Sensoren.

Chromium-probleem: 40074843 .

Verbeteringen aan het elementenpaneel

Deze versie brengt diverse verbeteringen aan het Elementenpaneel .

Debug complexe CSS-waarden eenvoudiger

Om u te helpen bij het debuggen van complexe CSS-waarden, wordt bij het tabblad Elementen > Stijlen nu een tooltip weergegeven als u eroverheen zweeft:

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

In de tooltip worden definitieketens op meerdere regels weergegeven, één voor elke definitie. U kunt complexe berekeningen uitvouwen en met de muis over waarden bewegen om de berekende waarde te markeren en terug te traceren naar de oorspronkelijke expressie.

Voor en na het toevoegen van een tooltip met definitieketens en uitvouwbare complexe berekeningen.

Chromium-probleem: 396080529 .

@function -ondersteuning in Elementen > Stijlen

Ter voorbereiding op @function ondersteuning in Chrome koppelt het tabblad Elementen > Stijlen nu de namen van uw aangepaste functies aan hun definities in een speciaal gedeelte.

Het voor- en naproces waarbij u de naam van uw aangepaste functie aan de overeenkomstige sectie koppelt.

Verbeteringen aan het netwerkpaneel

Deze versie brengt diverse verbeteringen aan het Netwerkpaneel .

has-request-header filter

Het paneel Netwerk ondersteunt nu het filter has-request-header waarmee u kunt filteren op een specifieke aanvraagheadernaam.

Het voor- en naproces van het toevoegen van het filter 'has-request-header' aan het paneel Netwerk.

Chromium-probleem: 397481040 .

Directe sockets in geïsoleerde web-apps

In het paneel Netwerk kunt u nu het verkeer van geïsoleerde web-apps (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 normale verzoeken in de tabel en selecteert u op het tabblad Berichten een bericht.

Voor en na het toevoegen van ondersteuning voor Direct Sockets in IWA's aan het paneel Netwerk.

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

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Toepassing > Opslag : de verouderde Web SQL-optie ( crbug.com/412707590 ) is verwijderd.
  • Elementen :
  • Netwerk : De HTTP-header Referrer-Policy is verwijderd uit de optie Kopiëren als ophalen , omdat het een responsheader is om het browsergedrag te beheren, en geen instructie aan de clientzijde ( crbug.com/413904896 ).
  • Prestaties : Waarschuwingen over 'lange taken' zijn verwijderd uit werkthreads omdat ze de hoofdthreads niet blokkeren ( crbug.com/40248589 ).
  • Issues . Now rapporteert:
    • Als er bronnen worden geblokkeerd waarvan het vermoeden bestaat dat ze gebruikers volgen.
    • Beperkingen van bounce tracking, ongeacht of er toegang is tot de opslag tijdens een redirect of niet.
  • Toegankelijkheid . De volgende elementen in Elementen > Stijlen zijn nu toetsenbordfocusbaar:

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.