Wat is er nieuw in DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova

Vind het paasei

Om de grap van 1 april te vieren, heeft het DevTools-team een ​​paasei verstopt in DevTools.

Om het te vinden, zoek je naar een kleurrijke 💫 emoji.

Updates van het elementenpaneel

Deze versie bevat diverse updates voor het Elementenpaneel .

Simuleer een pagina met focus in Elementen > Stijlen

Het tabblad Elementen > Stijlen heeft nu de optie ' Een gefocuste pagina emuleren' de knop 'Elementenstatus wisselen' ( :hov ). Voorheen was deze optie alleen te vinden in het paneel 'Rendering' .

Als je de focus van de pagina naar de ontwikkelaarstools verplaatst, worden sommige overlay-elementen automatisch verborgen als ze door de focus worden geactiveerd. Denk bijvoorbeeld aan vervolgkeuzelijsten, menu's of datumkiezers. Met de optie 'Een pagina met focus simuleren' kun je een dergelijk element debuggen alsof het daadwerkelijk de focus heeft.

De afbeelding voor en na het simuleren van een gefocuste pagina in het tabblad Stijlen.

Chromium-probleem: 1468393 .

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

Om het bewerken van CSS te vereenvoudigen, kun je in het tabblad Elementen > Stijlen nu de Kleurenkiezer , Hoekklok en Easing Editor gebruiken als terugvalopties voor var() .

De tools Color Picker, Angle Clock en Easing Editor vóór en na het renderen in var() fallbacks.

Chromium-probleem: 1520417 .

De CSS-lengtetool is verouderd.

De tool voor het aanpassen van de CSS-lengte is niet langer beschikbaar vanwege feedback dat deze de workflow vertraagt ​​en weinig toegevoegde waarde biedt.

Je kunt de waarde niet langer verslepen om deze aan te passen of een eenheidstype selecteren uit het keuzemenu. Dubbelklik in plaats daarvan op de waarde en typ een nieuwe waarde in.

Om de lengtetool weer in te schakelen, wis je Instellingen > Experimenten > vink 'CSS <length> authoring tool afschaffen' aan in het tabblad Stijlen .

Als je deze tool nog steeds wilt gebruiken, hoort het DevTools-team graag je mening en hoe de lengtetool je helpt in je workflow. Je kunt feedback achterlaten in crbug/1522657 .

Het experiment met de uitfasering is uitgeschakeld.

Pop-upvenster voor het geselecteerde zoekresultaat in het gedeelte Prestaties > Hoofdtrack

Om het zoeken te vereenvoudigen, toont de vlamgrafiek in het onderdeel Prestaties > Hoofdtrack nu een pop-upvenster boven de betreffende gebeurtenis wanneer u door de zoekresultaten bladert.

De voor- en na-afbeelding toont een pop-upvenster boven het geselecteerde zoekresultaat.

Chromium-probleem: 1523279 .

Updates van het netwerkpaneel

Deze versie bevat een aantal updates voor het netwerkpaneel .

Wis de knop en het zoekfilter in het tabblad Netwerk > EventStream.

Het tabblad Netwerk > EventStream toont het volgende:

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

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

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

Daarnaast registreert het tabblad EventStream nu ook gebeurtenissen die servers via fetch/XHR verzenden, en niet alleen die van de EventSource API . Probeer het uit op deze demopagina .

Chromium-probleem: 1488863 , 40659493 .

Tooltips met redenen voor uitzonderingen op cookies van derden in Netwerk > Cookies

Het tabblad Netwerk > Cookies toont nu tooltips met de redenen voor de uitzondering naast cookies die anders door de uitfasering van cookies van derden geblokkeerd zouden moeten worden.

De afbeelding voor en na toont een tooltip met een reden voor de uitzondering op een cookie van een derde partij.

Cookies van derden kunnen om de volgende redenen zijn toegestaan:

Chromium-probleem: 41491846 .

Schakel alle breakpoints in en uit in de broncode.

In het gedeelte Bronnen > Breakpoints zijn de opties 'Alle breakpoints inschakelen' en 'Alle breakpoints uitschakelen' weer beschikbaar in het vervolgkeuzemenu. Deze opties waren eerder weggelaten bij de herziening van de breakpoints .

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

De situatie vóór en na het terugplaatsen van de inschakel- en uitschakelopties.

Chromium-probleem: 1522037 .

Bekijk geladen scripts in DevTools voor Node.js

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

De situatie vóór en na het toevoegen van het tabblad Scripts, met een boomstructuur van geladen scripts.

Chromium-probleem: 1518364 .

Lighthouse 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 hoofdoorzaken van lay-outwijzigingen in kaart brengt. Deze audit vervangt de lay-outwijzigingsaudit, die alleen de elementen opsomde die door lay-outwijzigingen werden beïnvloed.

Een nieuwe audit die de oorzaken van lay-outwijzigingen in kaart brengt.

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Toegankelijkheid

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

  • Schermlezers kondigen nu aan:
    • De link ' Meer informatie ' naast de selectietypen in het opnamepaneel .
    • 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 > Locaties wordt nu correct weergegeven als een tabel voor toegankelijkheidstools.

Chromium-problemen: 1516957 , 324282443 , 324467508 , 324930007 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • De lettertypen in DevTools zijn bijgewerkt om overeen te komen met Chrome ( 1523538 ).
  • Prestatie : Opgelost probleem met het weergeven van schermafbeeldingen bij het hoveren over de tijdlijn ( 1519469 ).
  • Bronnen : De regelhoogte in de editor is verhoogd voor betere leesbaarheid van de code ( 1523640 ).
  • Netwerk > Reacties : Diverse weergaveproblemen met verschillende formaten en coderingen opgelost ( 1523128 , 1509336 , 1523128 , 41481944 , 1509336 ).

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