Wat is er nieuw in DevTools (Chrome 109)

Jecelyn Yeen

Recorder: Kopieer als opties voor stappen, herhaling op de pagina, contextmenu van de stap

Nieuwe kopieeropties in het paneel Recorder.

Open een bestaande gebruikersstroom in de Recorder . Voorheen startte DevTools de herhaling altijd door naar de pagina te navigeren of deze opnieuw te laden wanneer u de gebruikersstroom opnieuw afspeelde.

Met de nieuwste updates toont de Recorder de navigatiestap apart. U kunt er met de rechtermuisknop op klikken en deze verwijderen om de weergave op de pagina te herhalen!

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. Dit werkt ook met extensies . Probeer bijvoorbeeld een stap te kopiëren als een Nightwatch- testscript. Met deze functie kunt u 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 ergens op de stap klikken om het menu te openen.

Chromium-problemen: 1322313 , 1351649 , 1322313 , 1339767

Toon de werkelijke functienamen in de opnames van de uitvoering

In het paneel Prestaties worden nu de daadwerkelijke functienamen en hun bronnen in de trace weergegeven (als er een bronkaart is).

Bekijk de vergelijking van de functienamen voor en na de weergave in het deelvenster Prestaties.

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

Bestanden weergeven voor en na minificatie.

Voorheen werden bij het vastleggen van een trace in het Prestatiepaneel alleen de geminimaliseerde functienamen weergegeven. Dit maakte het debuggen lastiger.

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

Chromium-problemen: 1364601 , 1364601

Nieuwe sneltoetsen in het paneel Console en bronnen

U kunt schakelen tussen tabbladen in het Bronnenpaneel met: Op MacOS, Functie + Command + Pijltje omhoog en omlaag Op Windows en Linux, Control + Pagina omhoog of omlaag

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

Bovendien accepteert DevTools nu alleen de pijl naar rechts voor automatische aanvulling aan het einde van een regel. Zo verschijnt er een dialoogvenster voor automatische aanvulling wanneer u iets midden in de code bewerkt. Wanneer u op de pijl naar rechts drukt, wilt u waarschijnlijk de cursor naar de volgende positie verplaatsen in plaats van automatisch aanvullen. Deze UX-wijziging sluit beter aan bij uw schrijfworkflow.

Chromium-probleem: 1167965 , 1172535 , 1371585. 1369503

Verbeterde JavaScript-foutopsporing

Dit zijn enkele verbeteringen op het gebied van JavaScript-foutopsporing in deze release:

  • new.target is een meta-eigenschap waarmee u kunt detecteren of een functie of constructor is aangeroepen met de operator new. U kunt new.target nu in de console loggen om de waarde ervan te controleren tijdens het debuggen. Voorheen gaf het fouten wanneer u new.target invoerde. Toon de vergelijking voor en na van de new.target-evaluatie voor foutopsporing.
  • Met een WeakRef -object kunt u een zwakke verwijzing naar een ander object opslaan, 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 u expliciet "deref" aanroepen om het probleem op te lossen. Toon een vergelijking voor en na de WeakRef-evaluatie tijdens het debuggen.
  • Inline preview voor schaduwvariabele hersteld. Voorheen was de weergegeven waarde onjuist. Toon inline voorbeeld van voor- en navergelijking voor de gearceerde variabele.
  • Maak variabelenamen in Generator en async -functies duidelijk zichtbaar in het deelvenster Bereik van het paneel Bronnen .

Chromium-problemen: 1267690 , 1246863 , 1371322 , 1311637

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

  • Ondersteuning voor meer tips voor inactieve CSS-eigenschappen in het deelvenster Stijlen - inline hoogte en breedte, flex- en rastereigenschappen. ( 1373597 , 1178508 , 1178508 , 1178508 )
  • Syntaxisaccentuering is hersteld. Deze werkte niet goed sinds de recente upgrade van de code-editor in DevTools. ( 1290182 )
  • Leg invoerwijzigingen correct vast na een onscherptegebeurtenis in de recorder . ( 1378488 )
  • Werk het Puppeteer-herhalingsscript bij bij export voor een betere foutopsporingservaring in de recorder . ( 1351649 )
  • Ondersteunt opnemen en afspelen in de recorder voor foutopsporing op afstand. ( 1185727 )
  • Het parsen van speciale CSS-variabelenamen in var() is hersteld. Voorheen ondersteunde DevTools het parsen van variabelen met escape-tekens zoals var(--fo\ o) niet. , ( 1378992 )

[Experimenteel] Verbeterde UX bij het beheren van breekpunten

Het huidige venster 'Breukpunten' biedt weinig visuele ondersteuning bij het overzien van alle breekpunten. Bovendien zijn veelgebruikte acties verborgen achter het contextmenu.

Dit experimentele UX-herontwerp brengt structuur aan in het venster Breekpunten en geeft ontwikkelaars snel toegang tot veelgebruikte functies, zoals het bewerken en verwijderen van breekpunten.

Dit zijn enkele hoogtepunten:

  • Beide pauzeopties bevinden zich in het deelvenster Breekpunten . Ze hebben expliciete tekstlabels die de opties voor zichzelf laten spreken.
  • Breekpunten worden gegroepeerd per bestand, gesorteerd op regel- of kolomnummer. U kunt ze in- en uitvouwen.**
  • Nieuwe opties om een ​​breekpunt te verwijderen en te bewerken wanneer u de muisaanwijzer op het breekpunt of een bestandsnaam in het deelvenster Breekpunt plaatst.

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

Toon het breekpuntvenster vóór en na het nieuwe ontwerp.

Chromium-problemen: 1346231 , 1324904

[Experimenteel] Automatische, op de plaats zelf gemaakte, mooie afdruk

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

Voorheen toonde het Bronnenpaneel standaard geminimaliseerde inhoud. Je moest handmatig op de knop 'mooie afdruk' klikken om de inhoud op te maken. Bovendien werd de mooi afgedrukte inhoud niet in hetzelfde bestand weergegeven, maar in een ander tabblad ::formatted .

Geef een geminimaliseerd bestand weer voor en na de automatische, mooie afdruk.

Chromium-probleem: 1164184

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