Deze pagina is vertaald door de Cloud Translation API.

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.

Prestatiepaneel wissen bij herladen.

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.

Codeweergave in de Recorder.

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.

Nieuwe optie om selectortypen aan te passen.

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 te maken.

Bewerken tijdens opname van gebruikersstroom.

Chroomuitgave: 1381971

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

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

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.

Syntaxisaccentuering in Vue.

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.

Inlinevoorbeeld voor Vue.

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.

Bronkaartlink voor SASS.

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 automatische aanvullingservaring 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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Stuur ons een suggestie of feedback via crbug.com .
Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
Tweet op @ChromeDevTools .
Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .