Wat is er nieuw in DevTools (Chrome 110)

Jecelyn Yeen

Prestatiepaneel wissen bij herladen

Het prestatiepaneel wist nu zowel de schermafbeelding als de tracering wanneer u op de knop Start profilering en pagina opnieuw laden klikt.

Voorheen toonde het paneel Prestaties een tijdlijn met schermafbeeldingen van eerdere opnames. Hierdoor was het moeilijk om te zien wanneer de daadwerkelijke meting begon. Het paneel navigeert nu altijd eerst naar de about:blank -pagina om te garanderen dat de opname begint met een blanco spoor. Dit komt overeen met het Performance Insights- paneel dat al hetzelfde deed.

Chroomuitgaves: 1101268 , 1382044

Recorder-updates

Bekijk en markeer de code van uw gebruikersstroom in de Recorder

De Recorder biedt nu een gesplitste codeweergave, waardoor het gemakkelijker wordt om uw gebruikersstroomcode te bekijken. Om toegang te krijgen tot de codeweergave, opent u een gebruikersstroom en klikt u op Code weergeven .

De Recorder markeert de bijbehorende code terwijl u over elke stap aan de linkerkant beweegt, waardoor u uw stroom gemakkelijk kunt volgen. U kunt het codeformaat wijzigen via de vervolgkeuzelijst, waarmee u kunt schakelen tussen formaten zoals Nightwatch Test- script.

Chroomuitgave: 1385489

Pas de selectortypen van een opname aan

U kunt opnamen maken die alleen de selectortypen vastleggen die voor u belangrijk zijn. Met de nieuwe optie om selectortypen aan te passen bij het maken van een nieuwe opname, kunt u selectors zoals XPath opnemen of uitsluiten, zodat u alleen de selectors vastlegt die u in uw gebruikersstromen wilt hebben.

Chroomuitgave: 1384431

Bewerk de gebruikersstroom tijdens het opnemen

Met de Recorder kunt u nu bewerken tijdens de opname, waardoor u de flexibiliteit heeft om in realtime wijzigingen aan te brengen. Je hoeft de opname niet meer te beëindigen om aanpassingen door te voeren.

Chroomuitgave: 1381971

Automatische mooie print ter plaatse

Het Bronnenpaneel drukt nu automatisch verkleinde bronbestanden op hun plaats af. U kunt op de mooie afdrukknop { } klikken om deze ongedaan te maken.

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

Chroomuitgaves: 1383453 , 1382752 , 1382397

Betere syntaxisaccentuering en inline preview voor Vue, SCSS en meer

Het Bronnenpaneel verbeterde de syntaxisaccentuering voor verschillende veelgebruikte bestandsindelingen, waardoor u code gemakkelijker kunt lezen en de structuur ervan kunt herkennen, waaronder Vue, JSX, Dart, LESS, SCSS, SASS en inline CSS.

Daarnaast heeft DevTools ook de inline preview voor Vue, inline HTML en TSX verbeterd. Beweeg over een variabele om een ​​voorbeeld van de waarde ervan te bekijken.

Daarnaast toont DevTools nu de bronkaart van een stylesheet in het Bronnenpaneel . Wanneer u bijvoorbeeld een SCSS-bestand opent, kunt u toegang krijgen tot het gerelateerde CSS-bestand door op de sourcemap-link te klikken.

Chroomuitgaves: 1385374 , 1385632 , 1385281 , 1385269 , 1383892 , 1361862 , 1383451 , 1392106 , 1149734

Ergonomisch en consistent automatisch aanvullen in de console

DevTools verbetert de ervaring met automatisch aanvullen door de volgende wijzigingen te implementeren:

• Tab wordt altijd gebruikt voor automatisch aanvullen.
• Het gedrag van Arrow right en Enter varieert afhankelijk van de context.
• De ervaring met automatisch aanvullen is consistent in alle teksteditors, in de panelen Console , Bronnen en Elementen

Dit is bijvoorbeeld wat er gebeurt als u cons in de console typt:

• De console geeft een lijst met suggesties voor automatisch aanvullen weer, met een subtiele gestippelde rand rond de bovenste optie, die aangeeft dat de navigatie nog niet is begonnen.

• De console voert de regel uit wanneer u op Enter drukt. Voorheen werd de regel automatisch aangevuld met de bovenste suggestie. Om automatisch aan te vullen, drukt u op Tab of Arrow Right .

• De console markeert de geselecteerde optie terwijl u door de lijst met suggesties navigeert met behulp van de sneltoetsen Arrow up en Arrow down .

• Om tijdens het navigeren automatisch de geselecteerde optie aan te vullen, gebruikt u de toetsenbordtoetsen Tab , Enter of Arrow Right .

• Wanneer u bijvoorbeeld midden in de code bewerkt, wanneer de cursor tussen n en s staat, gebruikt u Tab voor automatisch aanvullen, Enter om de regel uit te voeren en Arrow Right om de cursor vooruit te verplaatsen.

Chroomuitgaves: 1399436 , 1276960

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• Een regressieprobleem in DevTools, waarbij het niet stopte bij de debugger instructie in inline-scripts, is opgelost. ( 1385374 )
• Een nieuwe console- instelling waarmee u console.trace() -berichten standaard kunt uit- of samenvouwen. Schakel de instellingen in via Instellingen > Voorkeuren > Standaard console.trace()-berichten uitvouwen . ( 1139616 )
• Het deelvenster Fragmenten in het paneel Bronnen ondersteunt verbeterde automatische aanvulling, vergelijkbaar met de Console . ( 772949 )

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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .