Wat is er nieuw in DevTools (Chrome 110)

Jecelyn Yeen

Prestatiepaneel wissen bij herladen

Het paneel Prestaties wist nu zowel de schermafbeelding als de tracering wanneer u op de knop Start profilering en laad pagina opnieuw klikt.

Voorheen toonde het paneel Prestaties een tijdlijn met screenshots van eerdere opnames. Dit maakte het moeilijk om te zien wanneer de daadwerkelijke meting begon. Het paneel navigeert nu altijd eerst naar de pagina about:blank om te garanderen dat de opname begint met een lege trace. Dit komt overeen met het paneel Prestatie-inzichten dat dit al deed.

Prestatiepaneel wissen bij herladen.

Chromium-problemen: 1101268 , 1382044

Recorder-updates

Bekijk en markeer de code van uw gebruikersstroom in de Recorder

De Recorder biedt nu een gesplitste codeweergave, waardoor u uw gebruikersstroomcode gemakkelijker kunt bekijken. Om de codeweergave te openen, opent u een gebruikersstroom en klikt u op Code weergeven .

De Recorder markeert de bijbehorende code wanneer u met de muis over elke stap aan de linkerkant beweegt, zodat u uw flow gemakkelijk kunt volgen. U kunt de code-indeling wijzigen met de dropdown, waarmee u kunt schakelen tussen indelingen zoals Nightwatch Testscript.

Codeweergave in de Recorder.

Chromium-probleem: 1385489

Pas de selectortypen van een opname aan

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

Nieuwe optie om selectortypen aan te passen.

Chromium-probleem: 1384431

Gebruikersstroom bewerken tijdens het opnemen

De recorder maakt nu bewerking tijdens de opname mogelijk, waardoor u de flexibiliteit hebt om in realtime wijzigingen aan te brengen. U hoeft de opname niet langer te beëindigen om aanpassingen te maken.

Bewerken tijdens het opnemen van de gebruikersstroom.

Chromium-probleem: 1381971

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 content. Om de content op te maken, moest je handmatig op de knop 'Pretty Print' klikken. Bovendien werd de 'Pretty Print'-content niet in hetzelfde tabblad weergegeven, maar in een ander tabblad ::formatted .

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

Chromium-problemen: 1383453 , 1382752 , 1382397

Betere syntaxisaccentuering en inline-voorvertoning voor Vue, SCSS en meer

In het paneel Bronnen is de syntaxisaccentuering voor diverse veelgebruikte bestandsindelingen verbeterd, waardoor u code gemakkelijker kunt lezen en de structuur ervan kunt herkennen. Voorbeelden hiervan zijn 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 de muis over een variabele om een ​​preview van de waarde te bekijken.

Inline preview voor Vue.

Daarnaast toont DevTools nu de bronmap van een stylesheet in het paneel Bronnen . Wanneer u bijvoorbeeld een SCSS-bestand opent, kunt u het bijbehorende CSS-bestand openen door op de link 'sourcemap' te klikken.

Bronkaartlink voor SASS.

Chromium-problemen: 1385374 , 1385632 , 1385281 , 1385269 , 1383892 , 1361862 , 1383451 , 1392106 , 1149734

Ergonomische en consistente Autocomplete in de console

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

  • 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 typt in de Console :

  • Op de console wordt een lijst met suggesties voor automatisch aanvullen weergegeven, met een subtiele gestippelde rand rond de bovenste optie. Dit geeft aan dat de navigatie nog niet is begonnen. Gestippelde rand rond de bovenste optie voor automatisch aanvullen.

  • 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 . Voert de regel uit bij Enter.

  • De console markeert de geselecteerde optie terwijl u door de suggestielijst navigeert met behulp van de sneltoetsen Arrow up en Arrow down . Hoogtepunten tijdens het navigeren door suggesties.

  • Om tijdens het navigeren automatisch de geselecteerde optie aan te vullen, gebruikt u de toetsen Tab , Enter of Arrow Right op het toetsenbord. Automatisch aanvullen met de geselecteerde optie tijdens navigatie.

  • Wanneer u midden in de code aan het bewerken bent, bijvoorbeeld wanneer de cursor zich tussen n en s bevindt, gebruikt u Tab voor automatisch aanvullen, Enter om de regel uit te voeren en Arrow Right om de cursor naar voren te verplaatsen. Bewerken midden in de code.

Chromium-problemen: 1399436 , 1276960

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

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

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.