Wat is er nieuw in DevTools (Chrome 109)

Jecelyn Yeen

Recorder: Kopiëren als opties voor stappen, herhaling op de pagina, contextmenu van de stap

Nieuwe kopieeropties in het Recorder-paneel.

Open een bestaande gebruikersstroom in de Recorder . Als u voorheen de gebruikersstroom opnieuw afspeelde, startte DevTools het opnieuw afspelen altijd door naar de pagina te navigeren of deze opnieuw te laden.

Bij de laatste updates toont de Recorder de navigatiestap apart. U kunt met de rechtermuisknop klikken en het verwijderen om herhaling op de pagina uit te voeren!

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

Voorheen had u alleen toegang tot het stappenmenu via de knop met drie stippen. U kunt nu met de rechtermuisknop ergens op de stap klikken om het menu te openen.

Chroomuitgaves: 1322313 , 1351649 , 1322313 , 1339767

Toon daadwerkelijke functienamen in de opnames van de uitvoering

Het paneel Prestaties toont nu de daadwerkelijke functienamen en hun bronnen in de tracering als er een brontoewijzing is.

Toon voor en na vergelijking van functienamen in het paneel Prestaties.

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

Toon bestanden voor en na minficatie.

Als u voorheen een tracering opnam in het deelvenster Prestaties , liet de tracering u alleen de verkleinde functienamen zien. Dit maakte het moeilijker om te debuggen.

Met de laatste wijzigingen leest DevTools nu de bronkaart en toont de feitelijke functienamen en bronlocatie.

Chroomuitgaves: 1364601 , 1364601

Nieuwe sneltoetsen in het paneel Console en bronnen

U kunt schakelen tussen tabbladen in het paneel Bronnen met: Op MacOS: Functie + Command + Pijl omhoog en omlaag Op Windows en Linux: Control + Pagina omhoog of omlaag

Bovendien kunt u door de suggesties voor automatisch aanvullen navigeren met Ctrl + N en Ctrl + P op MacOS, vergelijkbaar met Emacs . U kunt bijvoorbeeld window. in de Console en gebruik deze sneltoetsen om te navigeren.

Bovendien accepteert DevTools nu Arrow Right alleen voor automatische aanvulling aan het einde van de regel. Er wordt bijvoorbeeld een dialoogvenster voor automatisch aanvullen weergegeven wanneer u iets in het midden van de code bewerkt. Wanneer u op de Pijl-rechts -toets drukt, wilt u hoogstwaarschijnlijk de cursor naar de volgende positie verplaatsen in plaats van automatisch aanvullen. Deze UX-wijziging sluit beter aan bij uw auteursworkflow.

Chroomuitgave: 1167965 , 1172535 , 1371585 . 1369503

Verbeterde JavaScript-foutopsporing

Dit zijn enkele JavaScript-foutopsporingsverbeteringen in deze release:

  • new.target is een meta-eigenschap waarmee u kunt detecteren of een functie of constructor is aangeroepen met de nieuwe operator. U kunt nu new.target in de console loggen om de waarde ervan te controleren tijdens het debuggen. Voorheen retourneerde het fouten wanneer u new.target invoerde. Toon voor en na vergelijking van foutopsporing in new.target-evaluatie.
  • Met een WeakRef object kunt u een zwakke verwijzing naar een ander object behouden, zonder te voorkomen dat dat object in de war raakt. DevTools toont nu een inline voorbeeld van de waarde en evalueert de zwakke referentie rechtstreeks in de console tijdens het opsporen van fouten. Voorheen moest je expliciet “deref” bellen om het op te lossen. Toon voor en na vergelijking van WeakRef-evaluatie tijdens foutopsporing.
  • Vaste inline preview voor geschaduwde variabele. Voorheen was de weergavewaarde onjuist. Toon voor en na vergelijking inline voorbeeld voor geschaduwde variabele.
  • Maak de namen van variabelen in Generator en async functies in het deelvenster Bereik in het deelvenster Bronnen duidelijker.

Chroomuitgaves: 1267690 , 1246863 1371322 , 1311637

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • Ondersteuning van meer hints voor inactieve CSS-eigenschappen in het deelvenster Stijlen: inline hoogte en breedte, flex- en rastereigenschappen. ( 1373597 , 1178508 , 1178508 , 1178508 )
  • Syntaxisaccentuering opgelost. Het werkte niet goed sinds de recente upgrade van de code-editor in DevTools. ( 1290182 )
  • Leg invoerwijzigingsgebeurtenissen op de juiste manier vast na een vervagingsgebeurtenis in de Recorder . ( 1378488 )
  • Update het herhalingsscript van Puppeteer bij het exporteren voor een betere foutopsporingservaring in de Recorder . ( 1351649 )
  • Ondersteuning voor opnemen en afspelen in de Recorder voor foutopsporing op afstand. ( 1185727 )
  • Probleem opgelost met het parseren van speciale CSS-variabelenamen in var() . Voorheen ondersteunde DevTools geen parseervariabelen met escape-tekens zoals var(--fo\ o) . , ( 1378992 )

[Experimenteel] Verbeterde UX bij het beheren van breekpunten

Het huidige deelvenster Breekpunten biedt weinig visueel hulpmiddel bij het overzien van alle breekpunten. Bovendien zijn veelgebruikte acties verborgen achter het contextmenu.

Dit experimentele UX-herontwerp brengt structuur in het deelvenster Breakpoints en geeft ontwikkelaars snel toegang tot veelgebruikte functies, zoals het bewerken en verwijderen van breakpoints.

Dit zijn enkele hoogtepunten:

  • Beide pauzeopties bevinden zich in het deelvenster Breekpunten . Ze hebben expliciete tekstlabels waardoor de opties voor zichzelf spreken.
  • Breekpunten zijn gegroepeerd per bestand, gerangschikt op regel- of kolomnummer. Je kunt ze samenvouwen en uitvouwen.**
  • Nieuwe opties om een ​​breekpunt te verwijderen en te bewerken wanneer u over het breekpunt of een bestandsnaam beweegt in het deelvenster Breekpunt .

Lees de volledige wijzigingen in onze RFC (gesloten) en laat hier uw feedback achter.

Toon het Breakpoint-paneel voor en na het herontwerp.

Chroomuitgaves: 1346231 , 1324904

[Experimenteel] Automatische mooie print ter plaatse

Het Bronnenpaneel drukt nu automatisch verkleinde bronbestanden op hun plaats af. U kunt op de knop Mooi afdrukken { } klikken om dit ongedaan te maken.

Voorheen toonde het paneel Bronnen standaard verkleinde inhoud. U moest handmatig op de mooie afdrukknop klikken om de inhoud op te maken. Bovendien werd de mooi afgedrukte inhoud niet in hetzelfde bestand weergegeven, maar op een ander ::formatted tabblad.

Toon een verkleind bestand voor en na de automatische, mooie afdruk ter plaatse.

Chroomuitgave: 1164184

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 .