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 door te voeren.

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

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. 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 lijst met suggesties navigeert met behulp van de sneltoetsen Arrow up en Arrow down . Hoogtepunten tijdens suggestienavigatie.

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

  • 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. Bewerken midden in de code.

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 ) Automatisch aanvullen in fragmenten.

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 .

,

Jecelyn Yeen

Prestatiepaneel wissen bij herladen

Het prestatiepaneel wist nu zowel de screenshot als het sporen wanneer u op de knop Start Profile and Reload Pagin op de pagina Start en opnieuw laadt.

Eerder toonde het prestatiepaneel een tijdlijn met screenshots uit eerdere opnames. Dit maakte het moeilijk om te zien wanneer de daadwerkelijke meting begon. Het paneel navigeert nu altijd naar de about:blank pagina om te garanderen dat de opname begint met een leeg spoor. Dit sluit aan bij het Performance Insights -paneel dat al hetzelfde deed.

Prestatiepaneel opruimen bij herladen.

Chromium -problemen: 1101268 , 1382044

Recorderupdates

Bekijk en markeer de code van uw gebruikersstroom in de recorder

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

De recorder benadrukt de bijbehorende code terwijl u over elke stap links zweeft, waardoor het gemakkelijk is om uw stroom te volgen. U kunt het codeformaat wijzigen met behulp van de vervolgkeuzelijst, waarmee u kunt schakelen tussen formaten zoals NightWatch Test Script.

Codeweergave in de recorder.

Chromium -probleem: 1385489

Pas selector -soorten van een opname aan

U kunt opnames 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 selectoren zoals XPath opnemen of uitsluiten, zodat u alleen de selecteurs vastlegt die u in uw gebruikersstromen wilt.

Nieuwe optie om selectortypen aan te passen.

Chromium -probleem: 1384431

Bewerk gebruikersstroom tijdens het opnemen

De recorder maakt het mogelijk om tijdens het opnemen te bewerken, waardoor u de flexibiliteit krijgt om in realtime wijzigingen aan te brengen. U hoeft de opname niet langer te beëindigen om aanpassingen aan te brengen.

Bewerken tijdens het opnemen van gebruikersstroom.

Chroomprobleem: 1381971

Automatisch op de plaats mooie print

Het bronnenpaneel print nu automatisch Minified Minified Source -bestanden op zijn plaats. U kunt op de knop Pretty Afdrukken { } klikken om deze ongedaan te maken.

Eerder vertoonde het source -paneel standaard geminificeerde inhoud. Om de inhoud op te maken, moest u handmatig op de knop Pretty Afdrukken klikken. Bovendien werd de mooie gedrukte inhoud niet op hetzelfde tabblad weergegeven, maar op een ander ::formatted tabblad.

Toon een geminifieerd bestand voor en na automatische in-place mooie print.

Chromium -problemen: 1383453 , 1382752 , 1382397

Betere syntaxis Hoogtepunten en inline preview voor Vue, SCSS en meer

Het bronnenpaneel verbeterde de syntaxis die voor verschillende veelgebruikte bestandsformaten benadrukt, waardoor u code gemakkelijker kunt lezen en de structuur ervan, waaronder Vue, JSX, DART, Less, SCSS, SASS en Inline CSS, kunt herkennen.

Syntaxis markering in Vue.

Bovendien verbeterde Devtools ook de inline -preview voor Vue, Inline HTML en TSX. Beweeg over een variabele om een ​​voorbeeld van zijn waarde te bekijken.

Inline preview voor Vue.

Afgezien daarvan toont Devtools nu de brongap van een stylesheet in het paneel Bronnen . Wanneer u bijvoorbeeld een SCSS -bestand opent, hebt u toegang tot het gerelateerde CSS -bestand door op de Sourcemap -link te klikken.

Bronkaartlink voor sass.

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

Ergonomische en consistente autocomplete in de console

DevTools verbetert de autocompletie -ervaring door de volgende wijzigingen door te voeren:

  • Tab wordt altijd gebruikt voor autocompletie.
  • Het gedrag van Arrow right en Enter varieert op basis van context.
  • De autocompletie -ervaring is consistent in de teksteditors, in de console , bronnen en elementenpanelen

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

  • De console toont een lijst met autocomplete suggesties, met een subtiele gestippelde rand rond de bovenste optie die aangeeft dat navigatie nog niet is begonnen. Gestippelde rand rond de bovenste autocomplete optie.

  • De console voert de regel uit wanneer u op Enter drukt. Eerder zou het de lijn automatisch voltooien met de topsuggestie. Om automatisch te completeren, drukt u op Tab of Arrow Right op. Voert de regel uit op Enter.

  • De console benadrukt de geselecteerde optie terwijl u door de suggestielijst navigeert met behulp van de Arrow up en Arrow down snelkoppelingen. Hoogtepunten tijdens suggesties navigatie.

  • Gebruik het Tab , voer het tabboardtoetsen in, Enter of Arrow Right aan. Auto-complete met de geselecteerde optie tijdens navigatie.

  • Bij het bewerken in het midden van de code bijvoorbeeld, wanneer de cursor tussen n en s is, gebruik Tab voor autocompletie, Enter om de lijn uit te voeren en Arrow Right om de cursor naar voren te verplaatsen. Bewerken in het midden van de code.

Chromium -problemen: 1399436 , 1276960

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

  • Een regressieprobleem in Devtools, waar het niet zou stoppen bij de debugger -verklaring in Inline Scripts, is opgelost. ( 1385374 )
  • Een nieuwe console -instelling waarmee u standaard console.trace() berichten kunt uitbreiden of instorten. Schakel de instellingen in via Instellingen > Voorkeuren > Console.trace () berichten standaard uitbreiden . ( 1139616 )
  • Het stukje fragmenten in het bronnenpaneel ondersteunt verbeterde autocomplete, vergelijkbaar met de console . ( 772949 ) Autocomplete in fragmenten.

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en u helpen problemen op uw site te vinden 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 met betrekking tot Devtools te bespreken.

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .