Wat is er nieuw in DevTools (Chrome 110)

Het prestatiepaneel wordt gewist bij het herladen.

Het prestatiepaneel wist nu zowel de schermafbeelding als de tracering wanneer u op de knop ' Profiling starten en pagina opnieuw laden' klikt.

Voorheen toonde het paneel Prestaties een tijdlijn met schermafbeeldingen van eerdere opnames. Hierdoor was het lastig te zien wanneer de meting daadwerkelijk begon. Het paneel navigeert nu altijd eerst naar de pagina about:blank om te garanderen dat de opname begint met een lege trace. Dit is in lijn met het paneel Prestatie-inzichten, dat dit al deed.

Het prestatiepaneel wordt gewist bij het 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, waardoor u uw workflow gemakkelijk kunt volgen. U kunt het codeformaat wijzigen met behulp van het keuzemenu, waarmee u kunt schakelen tussen formaten zoals het Nightwatch Test- script.

Codeweergave in de Recorder.

Chromium-probleem: 1385489

De selectietypen van een opname aanpassen.

Je kunt opnames maken die alleen de selectortypen vastleggen die voor jou relevant zijn. Met de nieuwe optie om selectortypen aan te passen bij het maken van een nieuwe opname, kun je selectors zoals XPath wel of niet opnemen. Zo zorg je ervoor dat je alleen de selectors vastlegt die je in je gebruikersstromen wilt gebruiken.

Nieuwe optie om selectietypen aan te passen.

Chromium-probleem: 1384431

Bewerk de gebruikersstroom tijdens het opnemen.

Met de Recorder kunt u nu tijdens het opnemen bewerken, waardoor u flexibel in realtime wijzigingen kunt aanbrengen. U hoeft de opname niet langer te beëindigen om aanpassingen te maken.

Bewerken tijdens het vastleggen van de gebruikersstroom.

Chromium-probleem: 1381971

Automatische, direct toepasbare, mooie print

Het paneel 'Bronnen ' maakt nu automatisch een opmaak van geminificeerde bronbestanden. Je kunt op de knop 'Opmaak' { } klikken om dit ongedaan te maken.

Voorheen toonde het paneel 'Bronnen' standaard geminificeerde inhoud. Om de inhoud op te maken, moest je handmatig op de knop 'Opmaak' klikken. Bovendien werd de opgemaakte inhoud niet in hetzelfde tabblad weergegeven, maar in een ander tabblad ::formatted .

Toon een geminificeerd bestand vóór en na automatische in-place pretty print.

Chromium-problemen: 1383453 , 1382752 , 1382397

Betere syntaxmarkering en inline preview voor Vue, SCSS en meer.

Het paneel 'Bronnen ' heeft de syntaxmarkering voor verschillende veelgebruikte bestandsformaten verbeterd, waardoor je code gemakkelijker kunt lezen en de structuur ervan kunt herkennen. Dit geldt onder andere voor Vue, JSX, Dart, LESS, SCSS, SASS en inline CSS.

Syntaxmarkering in Vue.

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

Inline preview voor Vue.

Daarnaast toont DevTools nu de sourcemap van een stylesheet in het paneel Bronnen . Als je bijvoorbeeld een SCSS-bestand opent, kun je het bijbehorende CSS-bestand openen door op de sourcemap-link te klikken.

Link naar de broncode van SASS.

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

Ergonomische en consistente automatische aanvulling in de console

DevTools verbetert de automatische aanvulling 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 automatische aanvulling werkt consistent in alle teksteditors, in de panelen Console , Bronnen en Elementen.

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

  • De console toont een lijst met suggesties voor automatisch aanvullen, waarbij een subtiele stippellijn rond de bovenste optie aangeeft dat de navigatie nog niet is begonnen. Gestippelde rand rond de bovenste autocomplete-optie.

  • 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 het indrukken van Enter.

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

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

  • Wanneer je midden in de code aan het bewerken bent, bijvoorbeeld wanneer de cursor zich tussen n en s bevindt, gebruik dan 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 noemenswaardige verbeteringen in deze release:

  • Een regressieprobleem in DevTools, waarbij het programma niet stopte bij de debugger instructie in inline scripts, is opgelost. ( 1385374 )
  • Een nieuwe console- instelling waarmee je console.trace() -berichten standaard kunt uit- of inklappen. Schakel de instelling in of uit via Instellingen > Voorkeuren > Console.trace()-berichten standaard uitklappen . ( 1139616 )
  • Het deelvenster Snippets in het deelvenster Bronnen ondersteunt verbeterde automatische aanvulling, vergelijkbaar met de Console . ( 772949 ) Automatisch aanvullen in codefragmenten.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .