Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 123)

Sofia Emelianova

Zoek het paasei

Om de 1 april-dag te vieren heeft het DevTools-team ergens in DevTools een paasei verstopt.

Zoek naar een kleurrijke 💫 emoji om deze te vinden.

Updates van het Elementenpaneel

Deze versie brengt verschillende updates voor het Elementenpaneel .

Emuleer een gerichte pagina in Elementen > Stijlen

Het tabblad Elementen > Stijlen heeft nu de check_box Een gefocuste pagina emuleren optie onder de knop Elementenstatus wisselen ( :hov ). Voorheen kon u deze optie alleen in het deelvenster Rendering vinden.

Als u de focus van de pagina naar DevTools verlegt, worden sommige overlay-elementen automatisch verborgen als ze worden geactiveerd door focus. Bijvoorbeeld vervolgkeuzelijsten, menu's of datumkiezers. Met de optie Een gefocuste pagina emuleren kunt u fouten in een dergelijk element opsporen alsof het in focus is.

De voor en na het emuleren van een gerichte pagina op het tabblad Stijlen.

Chroomuitgave: 1468393 .

Kleurkiezer, Hoekklok en Easing Editor in `var()` fallbacks

Om het bewerken van CSS te vereenvoudigen, kunt u op het tabblad Elementen > Stijlen nu Color Picker , Angle Clock en Easing Editor gebruiken in var() fallbacks.

De gereedschappen voor en na het renderen van Kleurkiezer, Hoekklok en Easing Editor in var() fallbacks.

Chroomuitgave: 1520417 .

De CSS-lengtetool is verouderd

De tool voor het maken van CSS-lengtes is verouderd vanwege feedback dat het de workflow vertraagt en niet veel waarde toevoegt.

U kunt niet langer slepen om de waarde aan te passen of een eenheidstype te selecteren in het vervolgkeuzemenu. Dubbelklik in plaats daarvan op de waarde en typ een nieuwe waarde.

Om het lengtegereedschap weer in te schakelen, wist u Instellingen > Experimenten > check_box Beëindig het CSS <lengte>-ontwerpgereedschap op het tabblad Stijlen .

Als u deze tool toch wilt gebruiken, hoort het DevTools-team graag uw mening en hoe de lengtetool u helpt in uw workflow. Laat gerust feedback achter in crbug/1522657 .

Het beëindigingsexperiment is uitgeschakeld.

Om het zoeken gemakkelijker te maken, toont het vlammendiagram in de prestatie > hoofdtrack u nu een pop-over bovenop de overeenkomstige gebeurtenis wanneer u door de zoekresultaten bladert.

De voor en na tonen een popover over het geselecteerde zoekresultaat.

Chroomuitgave: 1523279 .

Updates van het netwerkpaneel

Deze versie brengt een aantal updates voor het netwerkpaneel .

Knop Wissen en zoekfilter op het tabblad Netwerk > EventStream

Het tabblad Netwerk > EventStream krijgt:

Een knop Blok wissen die vastgelegde gebeurtenissen in de tabel wist.
Een zoekfilter dat reguliere expressies begrijpt.

De voor en na het toevoegen van een knop Wissen en een zoekfilter.

Het DevTools-team wil Charles Vazac bedanken voor het binnenhalen van deze functie.

Bovendien legt het tabblad EventStream nu ook gebeurtenissen vast die servers verzenden via fetch/XHR, en niet alleen via de EventSource API . Probeer het op deze demopagina .

Chroomuitgave: 1488863 , 40659493 .

Tooltips met uitzonderingsredenen voor cookies van derden in Netwerk > Cookies

Het tabblad Netwerk > Cookies toont nu tooltips met vrijstellingsredenen naast cookies die anders hadden moeten worden geblokkeerd door de uitfasering van cookies van derden .

De voor en na tonen een tooltip met een uitzonderingsreden voor een cookie van derden.

Cookies van derden kunnen om de volgende redenen worden toegestaan:

Chrome Enterprise-beleid
Storage Access API of Storage Access API op het hoogste niveau
Proefperiode voor uitfasering van cookies van derden of de respijtperiode ervan
Heuristieken voor het uitfaseren van cookies van derden
Gebruikersvoorkeur

Chroomuitgave: 41491846 .

Schakel alle breekpunten in Bronnen in en uit

De sectie Bronnen > Breekpunten brengt de opties Alle breekpunten inschakelen en uitschakelen terug in het vervolgkeuzemenu. Voorheen werden deze opties weggelaten bij het herontwerp van de breekpunten .

Om alle breekpunten in of uit te schakelen, klikt u met de rechtermuisknop op een breekpunt in Bronnen > Breekpunten en selecteert u de overeenkomstige optie.

Chroomuitgave: 1522037 .

Bekijk geladen scripts in DevTools voor Node.js

DevTools voor Node.js toont nu geladen scripts in de navigatiestructuur in Bronnen > Scripts .

Het voor en na het toevoegen van het tabblad Scripts met een boomstructuur van geladen scripts.

Chroomuitgave: 1518364 .

Vuurtoren 11.5.0

Het Lighthouse- paneel draait nu Lighthouse 11.5.0. Bekijk de volledige lijst met wijzigingen .

Een van de opmerkelijke veranderingen is een nieuwe audit die de hoofdoorzaken van lay-outverschuivingen schat. Deze audit vervangt de audit van lay-outverschuivingselementen, waarin alleen de elementen werden opgesomd die door lay-outverschuivingen werden beïnvloed.

Een nieuwe audit die de hoofdoorzaken van lay-outverschuivingen inschat.

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

Chroomuitgave: 772558 .

Toegankelijkheid

Deze versie heeft de volgende toegankelijkheidsverbeteringen:

Schermlezers kondigen nu het volgende aan:
- De koppelingstekst Meer informatie naast selectortypen in het deelvenster Recorder .
- Als er geen experimenten overeenkomen met het filter in instellingen Instellingen > Experimenten .
- De actiebevestiging bij het verwijderen, bevestigen of herstellen van een snelkoppeling in instellingen Instellingen > Snelkoppelingen .
De tabel in instellingen Instellingen > Locaties wordt nu correct weergegeven als een tabel voor toegankelijkheidstools.

Chroomuitgaves: 1516957 , 324282443 , 324467508 , 324930007 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

Lettertypen in DevTools zijn bijgewerkt zodat ze overeenkomen met Chrome ( 1523538 ).
Prestaties : Vaste schermweergave wanneer de muis over de tijdlijn beweegt ( 1519469 ).
Bronnen : De regelhoogte in de Editor is vergroot voor een betere leesbaarheid van de code ( 1523640 ).
Netwerk > Reacties : Diverse weergaveproblemen met verschillende formaten en coderingen opgelost ( 1523128 , 1509336 , 1523128 , 41481944 , 1509336 ).

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Stuur ons een suggestie of feedback via crbug.com .
Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
Tweet op @ChromeDevTools .
Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .