Wat is er nieuw in DevTools (Chrome 109)

Jecelyn Yeen

Recorder: Opties voor kopiëren voor stappen, afspelen op de pagina, contextmenu van de stap

Nieuwe kopieeropties in het paneel 'Opnameprogramma'.

Open een bestaande gebruikersflow in de Recorder . Voorheen startte DevTools de herhaling van de gebruikersflow altijd door naar de pagina te navigeren of deze opnieuw te laden.

Met de nieuwste updates toont de Recorder de navigatiestap apart. Je kunt met de rechtermuisknop klikken en deze verwijderen om de weergave direct op de pagina te starten!

Daarnaast kun je in het * Recorder- paneel met de rechtermuisknop op een stap klikken en deze naar het klembord kopiëren in plaats van de hele gebruikersflow te exporteren. Dit werkt ook met extensies . Probeer bijvoorbeeld een stap te kopiëren als een Nightwatch- testscript. Met deze functie kun je elk bestaand script eenvoudig bijwerken.

Voorheen kon je het stappenmenu alleen openen via de knop met de drie puntjes. Nu kun je met de rechtermuisknop op een willekeurige plek in de stap klikken om het menu te openen.

Chromium-problemen: 1322313 , 1351649 , 1322313 , 1339767

Toon de daadwerkelijke functienamen in de opnames van de performance.

Het paneel Prestaties toont nu de daadwerkelijke functienamen en hun bronnen in de trace, indien er een bronkaart aanwezig is.

Toon een vergelijking van de weergave van functienamen in het paneel Prestaties vóór en na de aanpassing.

In dit voorbeeld wordt een bronbestand tijdens de productie geminificeerd. Zo wordt de functie sayHi geminificeerd als n en de functie takeABreak als o in deze demo .

Toon bestanden vóór en na minificatie.

Voorheen werden in het paneel Prestaties alleen de geminificeerde functienamen weergegeven wanneer je een trace opnam. Dit maakte debuggen lastiger.

Met de nieuwste wijzigingen leest DevTools nu de source map en toont het de daadwerkelijke functienamen en de locatie van de broncode.

Chromium-problemen: 1364601 , 1364601

Nieuwe sneltoetsen in het paneel Console & Bronnen

Je kunt tussen tabbladen in het paneel Bronnen schakelen met: Op macOS: Functie + Command + Pijl omhoog en omlaag. Op Windows en Linux: Control + Page omhoog of omlaag.

Bovendien kun je op macOS door de suggesties voor automatisch aanvullen navigeren met Ctrl + N en Ctrl + P , net als in Emacs . Je kunt bijvoorbeeld window. in de Console typen en deze sneltoetsen gebruiken om te navigeren.

Bovendien accepteert DevTools de pijltoets naar rechts nu alleen nog voor automatisch aanvullen aan het einde van een regel. Als je bijvoorbeeld midden in de code aan het bewerken bent, verschijnt er een dialoogvenster voor automatisch aanvullen. Wanneer je dan op de pijltoets naar rechts drukt, wil je waarschijnlijk de cursor naar de volgende positie verplaatsen in plaats van automatisch aanvullen te gebruiken. Deze UX-wijziging sluit beter aan op je workflow.

Chromium-probleem: 1167965 , 1172535 , 1371585 , 1369503

Verbeterde JavaScript-debugging

Dit zijn enkele verbeteringen voor het debuggen van JavaScript in deze release:

  • new.target is een meta-eigenschap waarmee je kunt detecteren of een functie of constructor is aangeroepen met de `new`-operator. Je kunt new.target nu in de console loggen om de waarde ervan tijdens het debuggen te controleren. Voorheen gaf het een foutmelding wanneer je new.target invoerde. Toon een vergelijking van de situatie vóór en na het debuggen van de evaluatie van new.target.
  • Met een WeakRef -object kun je een zwakke verwijzing naar een ander object bewaren, zonder dat dit object door de garbage collector wordt verwijderd. DevTools toont nu een inline preview van de waarde en evalueert de zwakke verwijzing direct in de console tijdens het debuggen. Voorheen moest je expliciet "deref" aanroepen om dit op te lossen. Toon een vergelijking van de evaluatie van WeakRef vóór en na het debuggen.
  • De inline-preview voor de variabele met schaduw is gecorrigeerd. Voorheen was de weergegeven waarde onjuist. Toon een inline-voorbeeldweergave van de voor- en na-vergelijking voor de gearceerde variabele.
  • Ontcijfer de variabelenamen in Generator en async functies in het deelvenster Bereik in het deelvenster Bronnen.

Chromium-problemen: 1267690 , 1246863 , 1371322 , 1311637

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

  • Ondersteuning voor meer hints voor inactieve CSS-eigenschappen in het deelvenster Stijlen - inline hoogte en breedte, flex- en grid-eigenschappen. ( 1373597 , 1178508 , 1178508 , 1178508 )
  • Syntaxmarkering is gecorrigeerd. Deze werkte niet goed sinds de recente upgrade van de code-editor in DevTools. ( 1290182 )
  • Leg gebeurtenissen met betrekking tot invoerwijzigingen correct vast na een on blur-gebeurtenis in de Recorder . ( 1378488 )
  • Update het Puppeteer-replayscript bij het exporteren voor een betere debugervaring in de Recorder . ( 1351649 )
  • Ondersteuning voor opnemen en afspelen in de Recorder voor debuggen op afstand. ( 1185727 )
  • Het parsen van speciale CSS-variabelnamen in var() is nu correct. Voorheen ondersteunde DevTools het parsen van variabelen met escapetekens zoals var(--fo\ o) niet. , ( 1378992 )

[Experimenteel] Verbeterde UX bij het beheren van breakpoints

Het huidige deelvenster 'Breakpoints' biedt weinig visuele ondersteuning bij het overzien van alle breakpoints. Bovendien zijn veelgebruikte acties verborgen achter het contextmenu.

Deze experimentele UX-herontwerp brengt structuur aan in het deelvenster 'Breakpoints' en stelt ontwikkelaars in staat snel toegang te krijgen tot veelgebruikte functies, zoals het bewerken en verwijderen van breakpoints.

Dit zijn enkele hoogtepunten:

  • Beide pauze-opties vindt u in het deelvenster 'Breakpoints' . Ze hebben duidelijke tekstlabels die de opties zelfverklarend maken.
  • Breakpoints zijn gegroepeerd per bestand en gesorteerd op regel- of kolomnummer. Je kunt ze in- en uitklappen.**
  • Nieuwe opties om een ​​breekpunt te verwijderen en te bewerken wanneer u de muis over het breekpunt of een bestandsnaam in het deelvenster Breekpunten beweegt.

Lees alle wijzigingen in onze (gesloten) RFC en geef hier uw feedback.

Toon het breakpoint-venster vóór en na de herontwerp.

Chromium-problemen: 1346231 , 1324904

[Experimenteel] Automatische in-place pretty print

Het paneel 'Bronnen' print nu automatisch de geminificeerde bronbestanden netjes op. Je kunt op de knop 'Mooi opmaken { } klikken om dit ongedaan te maken.

Voorheen toonde het paneel 'Bronnen' standaard geminificeerde inhoud. Je moest handmatig op de knop 'Opmaak' klikken om de inhoud te formatteren. Bovendien werd de opgemaakte inhoud niet in hetzelfde bestand weergegeven, maar in een ander tabblad ::formatted .

Toon een geminificeerd bestand vóór en na automatische in-place pretty print.

Chromium-probleem: 1164184

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