Wat is er nieuw in DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

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

Popover voor het geselecteerde zoekresultaat in Prestatie > Hoofdtrack

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 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:

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.

De voor en na het terugbrengen van de in- en uitschakelopties.

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 > Experimenten .
    • De actiebevestiging bij het verwijderen, bevestigen of herstellen van een snelkoppeling in Instellingen > Snelkoppelingen .
  • De tabel in 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 zweeft ( 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 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 .