Wat is er nieuw in DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Vind het paasei

Om 1 april te vieren, heeft het DevTools-team ergens in DevTools een easter egg verstopt.

Om het te vinden, moet je zoeken naar een kleurrijke 💫-emoji.

Updates van het elementenpaneel

Deze versie bevat diverse updates voor het Elementenpaneel .

Een gerichte pagina emuleren in Elementen > Stijlen

Het tabblad Elementen > Stijlen heeft nu de optie Een pagina met focus emuleren' onder de knop ' Elementstatus in-/uitschakelen' ( :hov ). Voorheen vond u deze optie alleen in het paneel Rendering .

Als u de focus van de pagina naar DevTools verplaatst, worden sommige overlay-elementen automatisch verborgen als ze door de focus worden geactiveerd. Bijvoorbeeld vervolgkeuzelijsten, menu's of datumkiezers. Met de optie Een pagina met focus emuleren kunt u een dergelijk element debuggen alsof het de focus heeft.

Voor en na het emuleren van een gefocuste pagina op het tabblad Stijlen.

Chromium-probleem: 1468393 .

Kleurenkiezer, hoekklok en easing-editor in var() fallbacks

Om CSS-bewerking te vereenvoudigen, kunt u via het tabblad Elementen > Stijlen nu Kleurenkiezer , Hoekklok en Easing Editor gebruiken in var() -fallbacks.

De voor- en na-rendering van de hulpmiddelen Color Picker, Angle Clock en Easing Editor in var() fallbacks.

Chromium-probleem: 1520417 .

CSS-lengtetool is verouderd

De tool voor het schrijven van CSS-lengtes is verouderd vanwege feedback waaruit blijkt 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 de lengtetool weer in te schakelen, wist u Instellingen > Experimenten > Verouderde CSS <lengte>-authoringtool in het tabblad Stijlen .

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

Het verouderingsexperiment is uitgeschakeld.

Popover voor het geselecteerde zoekresultaat in het spoor Prestaties > Hoofd

Om het zoeken te vergemakkelijken, wordt in het vlamdiagram in het spoor Prestaties > Hoofd nu een pop-upvenster weergegeven boven de overeenkomstige gebeurtenis wanneer u door de zoekresultaten bladert.

Voor en na het tonen van een pop-up over het geselecteerde zoekresultaat.

Chromium-probleem: 1523279 .

Updates van het netwerkpaneel

Deze versie bevat een aantal updates voor het Netwerkpaneel .

Knop Wissen en zoekfilter op het tabblad Netwerk > EventStream

Het tabblad Netwerk > EventStream bevat:

  • Een Wissen- knop waarmee vastgelegde gebeurtenissen in de tabel worden gewist.
  • Een zoekfilter dat reguliere expressies begrijpt.

Voor en na het toevoegen van een Wissen-knop en een zoekfilter.

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

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

Chromium-probleem: 1488863 , 40659493 .

Tooltips met uitzonderingsredenen voor cookies van derden in Netwerk > Cookies

Op het tabblad Netwerk > Cookies worden nu tooltips met uitzonderingsredenen weergegeven naast cookies die anders door de uitfasering van cookies van derden hadden moeten worden geblokkeerd.

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

Cookies van derden kunnen om de volgende redenen worden toegestaan:

Chromium-probleem: 41491846 .

Alle breekpunten in Bronnen in- en uitschakelen

De sectie Bronnen > Breekpunten brengt de opties ' Alle breekpunten in- en uitschakelen' terug naar het dropdownmenu. Voorheen waren deze opties weggelaten door het nieuwe ontwerp 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 nabewerking van de opties voor in- en uitschakelen.

Chromium-probleem: 1522037 .

Bekijk geladen scripts in DevTools voor Node.js

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

Het voor- en nagedeelte van het toevoegen van het tabblad Scripts, met een boomstructuur van geladen scripts.

Chromium-probleem: 1518364 .

Vuurtoren 11.5.0

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

Een van de opvallende wijzigingen is een nieuwe audit die de grondoorzaken van lay-outverschuivingen inschat. Deze audit vervangt de layout-shift-elementen audit, die alleen de elementen vermeldde die door lay-outverschuivingen werden beïnvloed.

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

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 772558 .

Toegankelijkheid

Deze versie heeft de volgende verbeteringen op het gebied van toegankelijkheid:

  • Schermlezers kondigen nu aan:
    • De tekst van de koppeling Meer informatie naast de selectortypen in het paneel Recorder .
    • Wanneer er geen experimenten zijn die voldoen aan het filter in Instellingen > Experimenten .
    • De actiebevestiging bij het verwijderen, bevestigen of herstellen van een snelkoppeling in Instellingen > Snelkoppelingen .
  • De tabel in > Locaties wordt nu correct weergegeven als een tabel voor toegankelijkheidshulpmiddelen.

Chromium-problemen: 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 : Schermafbeeldingen worden weergegeven 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 ( 1523128 , 1509336 , 1523128 , 41481944 , 1509336 ) zijn opgelost.

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 wat in de serie Wat is er nieuw in DevTools is behandeld.