Wat is er nieuw in DevTools (Chrome 104)

Jecelyn Yeen

Start het frame opnieuw tijdens het debuggen

De functie Frame opnieuw starten is terug! U kunt de voorgaande code opnieuw uitvoeren wanneer u ergens in een functie bent gepauzeerd. Voorheen werd deze functie in Chrome 92 beëindigd en verwijderd vanwege stabiliteitsproblemen.

In dit voorbeeld pauzeerde de debugger aanvankelijk bij het breekpunt (regel 343) aan het einde van de functie toggleColorScheme . Om de foutopsporing opnieuw te starten vanaf het begin van de functie toggleColorScheme , vouwt u de sectie Aanroepstapel uit in het deelvenster Debugger , klikt u met de rechtermuisknop op toggleColorScheme en selecteert u Frame opnieuw starten .

Start het frame opnieuw tijdens het debuggen

Chroomuitgave: 1303521

Opties voor langzaam afspelen in het Recorder-paneel

U kunt gebruikersstromen nu langzamer afspelen: langzaam, zeer langzaam en extreem langzaam. Met deze opties kunt u elke stapherhaling beter op het scherm bekijken.

Open het Recorderpaneel en start een nieuwe opname . Zodra de opname is voltooid, klikt u op de vervolgkeuzeknop Opnieuw afspelen . Selecteer een snelheid om een ​​herhaling te starten.

Opties voor langzaam afspelen in het Recorder-paneel

Chroomuitgave: 1306756

Bouw een uitbreiding voor het Recorderpaneel

U kunt nu een Chrome-extensie bouwen of installeren om herhalingsscripts in uw favoriete formaat te exporteren. Zie de API-documentatie voor Recorder-extensies om te leren hoe u er een kunt bouwen.

Volg deze stappen in de documentatie om een ​​demo-extensie te installeren.

aangepaste extensie voor het Recorder-paneel

Chroomuitgave: 1325751

Groepeer bestanden op Auteur/Geïmplementeerd in het Bronnenpaneel

Schakel de nieuwe optie Groepeer bestanden op Auteur/Geïmplementeerd in om uw bestanden in het Bronnenpaneel te ordenen. Bij het ontwikkelen van webapplicaties met frameworks (bijvoorbeeld React, Angular) kan het moeilijk zijn om door de bronbestanden te navigeren vanwege de verkleinde bestanden die worden gegenereerd door de buildtools (bijvoorbeeld Webpack, Vite).

Met dit selectievakje kunt u bestanden in 2 categorieën groeperen, zodat u sneller naar bestanden kunt zoeken:

  • Geschreven . Vergelijkbaar met de bronbestanden die u in uw IDE bekijkt. DevTools genereert deze bestanden op basis van bronkaarten (aangeleverd door uw buildtools).
  • Ingezet . De daadwerkelijke bestanden die de browser leest. Meestal zijn deze bestanden verkleind.

Probeer het zelf met deze React-demo !

Groepeer bestanden op Auteur/Geïmplementeerd in het Bronnenpaneel

Chroomuitgave: 960909

Nieuwe track Gebruikerstimings in het paneel Prestatie-inzichten

Visualiseer performance.measure() -markeringen in uw opname met de nieuwe track User Timings in het paneel Prestatie-inzichten .

Deze webpagina gebruikt bijvoorbeeld de methode performance.measure() om de verstreken tijd voor het laden van tekst te berekenen.

Wanneer u de paginalading begint te meten , wordt de track User Timings in de opname weergegeven. Klik op het timingitem om de details ervan in het zijvenster te bekijken.

Track Gebruikerstimings in het paneel Prestatie-inzichten

Chroomuitgave: 1322808

Onthul toegewezen slot van een element

Gesleufde elementen in het Elementenpaneel hebben een nieuwe slot . Bij het opsporen van problemen met de lay-out kunt u deze functie gebruiken om sneller het element te identificeren dat de lay-out van het knooppunt beïnvloedt.

Dit voorbeeld bevat kaarten met een paar benoemde slots. Inspecteer de person-occupation van een kaart, klik op de slot ernaast om de toegewezen gleuf te onthullen.

Leer hoe u <template> en <slot> -elementen kunt gebruiken om een ​​flexibele sjabloon te maken die vervolgens kan worden gebruikt om de schaduw-DOM van een webcomponent te vullen.

Onthul toegewezen slot van een element

Chroomuitgave: 1018906

Simuleer hardware-concurrency voor prestatie-opnames

Met de nieuwe instelling voor gelijktijdigheid van hardware in het paneel Prestaties kunnen ontwikkelaars de waarde configureren die wordt gerapporteerd door navigator.hardwareConcurrency .

Sommige toepassingen gebruiken navigator.hardwareConcurrency om de mate van parallelliteit van hun toepassing te bepalen, bijvoorbeeld om de grootte van de Emscripten pthread-pool te bepalen. Met deze functie kunnen ontwikkelaars de prestaties van hun applicaties testen met verschillende kernaantallen.

Simuleer hardware-concurrency voor prestatie-opnames

Chroomuitgave: 1297439

Bekijk een voorbeeld van niet-kleurwaarde bij het automatisch aanvullen van CSS-variabelen

Bij het automatisch aanvullen van CSS-variabelen vult DevTools nu de niet-kleurvariabele met een betekenisvolle waarde, zodat u een voorbeeld kunt zien van de verandering die de waarde op het knooppunt zal hebben.

Bekijk een voorbeeld van niet-kleurwaarde bij het automatisch aanvullen van CSS-variabelen

Chroomuitgave: 1285091

Identificeer blokkerende frames in het deelvenster Terug/vooruit-cache

Het paneel Terug/vooruit-cache in het toepassingspaneel heeft een nieuwe frames -sectie om u te helpen blokkerende frames te identificeren die mogelijk voorkomen dat de pagina in aanmerking komt voor bfcache.

Identificeer blokkerende frames in het deelvenster Terug/vooruit-cache

Chroomuitgave: 1288158

Verbeterde suggesties voor automatisch aanvullen voor JavaScript-objecten

De automatische aanvulling voor JavaScript-objecteigenschappen wordt nu weergegeven op basis van deze volgorde:

  1. Eigen optelbare eigenschappen
  2. Eigen niet-optelbare eigenschappen
  3. Overerfde optelbare eigenschappen
  4. Overerfde niet-optelbare eigenschappen

Voorheen vonden ontwikkelaars het lastiger om relevante eigenschappen te vinden, omdat de suggestie alleen de voorkeur gaf aan eigen eigenschappen boven overgeërfde eigenschappen, en alle overgeërfde eigenschappen dezelfde prioriteit kregen.

Verbeterde suggesties voor automatisch aanvullen voor JavaScript-objecten

Chroomuitgave: 1299241

Verbeteringen in bronkaarten

Hier zijn een paar oplossingen voor bronkaarten om de algehele foutopsporingservaring te verbeteren:

  • Breekpunten werken nu in inline <script> met sourceURL-annotaties.
  • De debugger lost nu variabelen met een blokbereik op in de Scope- weergave met brontoewijzingen. Lost variabelen met een blokbereik op
  • De debugger lost nu variabelen op in pijlfuncties in de Scope -weergave met bronkaarten. Lost variabelen op in pijlfuncties

Chroomuitgaves: 1329113 , 1322115

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • De instelling voor automatisch aanvullen voor het paneel Bronnen is opgelost. Voorheen was automatisch aanvullen altijd ingeschakeld, zelfs als de instelling was uitgeschakeld. ( 1323286 )
  • Het tabblad Manifest in het paneel Toepassing is bijgewerkt om het nieuwste kleurenschema-formaat te parseren. ( 1318305 )
  • Verbeterde suggesties voor de problemen met het blokkeren van <script async> weergave in het deelvenster Prestatie-inzichten . Eerder stelde DevTools voor om add async attribute to the script tag ook al is het script al als async gemarkeerd. ( 1334096 )
  • Het paneel Prestatie-inzichten detecteert nu iframes als mogelijke oorzaken voor lay-outverschuivingen. U kunt de iframe-details bekijken in het detailvenster . ( 1328873 )
  • Wanneer u een bestand opent in het Command-menu , worden de geschreven bestanden (bestanden gegenereerd door bronkaarten) nu hoger gerangschikt, zodat ze boven gelijknamige geïmplementeerde scripts verschijnen. ( 1312929 )

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

Start het frame opnieuw op tijdens het debuggen

De herstartframe -functie is terug! U kunt de voorgaande code opnieuw uitvoeren wanneer u ergens in een functie wordt gepauzeerd. Eerder werd deze functie verouderd en verwijderd in Chrome 92 vanwege stabiliteitsproblemen.

In dit voorbeeld pauzeerde de debugger aanvankelijk op het breekpunt (regel 343) aan het einde van de functie toggleColorScheme . Om het foutopsporing opnieuw te starten vanaf het begin van de functie toggleColorScheme , breidt u de sectie Call Stack in het debugger- deelvenster uit, klikt u met de rechtermuisknop op toggleColorScheme en selecteer Restartframe .

Start het frame opnieuw op tijdens het debuggen

Chromium -probleem: 1303521

Slow Replay -opties in het paneel Recorder

U kunt nu de gebruiker van de gebruiker op een langzamere snelheid opnieuw spelen - langzaam, erg langzaam en extreem langzaam. Met deze opties kunt u elke stap herhaling op het scherm beter observeren.

Open het recorderpaneel en start een nieuwe opname . Nadat de opname is voltooid, klikt u op de vervolgkeuzelijst Replay . Selecteer een snelheid om een ​​herhaling te starten.

Slow Replay -opties in het paneel Recorder

Chromium -probleem: 1306756

Bouw een extensie voor het recorderpaneel

U kunt nu een Chrome -extensie bouwen of installeren om replay -scripts in uw favoriete formaat te exporteren. Zie Recorder Extension API -documentatie om te leren hoe u er een kunt bouwen.

Volg deze stappen die in de documentatie worden beschreven om een ​​demo -extensie te installeren.

Aangepaste extensie voor het recorderpaneel

Chromium -probleem: 1325751

Groepsbestanden door geschreven / geïmplementeerd in het paneel Bronnen

Schakel de nieuwe groepsbestanden in op een auteur / geïmplementeerde optie om uw bestanden in het paneel Bronnen te organiseren. Bij het ontwikkelen van webtoepassingen met frameworks (bijvoorbeeld reageren, hoekig), kan het moeilijk zijn om door de bronbestanden te navigeren vanwege de geminificeerde bestanden die zijn gegenereerd door de build -tools (bijvoorbeeld webpack, vite).

Met dit selectievakje kunt u bestanden in 2 categorieën groeperen voor snellere zoekopdrachten:

  • Geschreven . Vergelijkbaar met de bronbestanden die u in uw IDE bekijkt. DevTools genereert deze bestanden op basis van brongaarten (geleverd door uw build -tools).
  • Ingezet . De werkelijke bestanden die de browser leest. Meestal zijn deze bestanden geminifieerd.

Probeer het zelf met deze reactdemo !

Groepsbestanden door geschreven / geïmplementeerd in het paneel Bronnen

Chromium -probleem: 960909

Nieuwe gebruikstijdtimings track in het paneel Performance Insights

Visualiseer performance.measure() -markeringen in uw opname met de nieuwe gebruikstijdstimulaties in het paneel Performance Insights .

Deze webpagina gebruikt bijvoorbeeld de methode performance.measure() om de verstreken tijd van het laden van tekst te berekenen.

Wanneer u begint met het meten van de pagina -laden , wordt de track van de gebruiker timing weergegeven in de opname. Klik op het item Timings om de details op het zijvenster te bekijken.

Gebruikerstimings volgen in het paneel Performance Insights

Chromium -probleem: 1322808

Onthul toegewezen slot van een element

Sleufelementen in het elementenpaneel hebben een nieuwe slot . Gebruik bij het debuggen van lay -outproblemen deze functie om het element te identificeren dat de lay -out van het knooppunt sneller beïnvloedt.

Dit voorbeeld bevat kaarten met een paar genoemde slots. Inspecteer de person-occupation van een kaart, klik op de slot ernaast om de toegewezen slot te onthullen.

Leer hoe u <template> en <slot> elementen kunt gebruiken om een ​​flexibele sjabloon te maken die vervolgens kan worden gebruikt om de schaduwdom van een webcomponent te vullen.

Onthul toegewezen slot van een element

Chroomprobleem: 1018906

Simuleer hardware gelijktijdigheid voor prestatie -opnames

Met de nieuwe hardware -gelijktijdigheidsinstelling in het prestatiepaneel kunnen ontwikkelaars de waarde configureren die door navigator.hardwareConcurrency wordt gerapporteerd.

Sommige toepassingen gebruiken navigator.hardwareConcurrency om de mate van parallellisme van hun toepassing te regelen, bijvoorbeeld om emscripten Pthread -poolgrootte te regelen. Met deze functie kunnen ontwikkelaars hun applicatieprestaties testen met verschillende kerntellingen.

Simuleer hardware gelijktijdigheid voor prestatie -opnames

Chromium -probleem: 1297439

Voorbeeld niet-kleurwaarde bij het automatisch invullen van CSS-variabelen

Wanneer CSS-variabelen automatisch aanvullen, vult Devtools nu de niet-kleurvariabele met een zinvolle waarde, zodat u een voorbeeld kunt bekijken wat voor wijziging de waarde op het knooppunt zal hebben.

Voorbeeld niet-kleurwaarde bij het automatisch invullen van CSS-variabelen

Chroomprobleem: 1285091

Identificeer blokkeerframes in de back/forward cache paneel

Het back/forward cache -paneel in het toepassingspaneel heeft een nieuwe frames sectie om u te helpen blokkerende frames te identificeren die mogelijk voorkomen dat de pagina in aanmerking komt voor BFCache.

Identificeer blokkeerframes in de back/forward cache paneel

Chromium -probleem: 1288158

Verbeterde autocomplete suggesties voor JavaScript -objecten

De autocompletie voor JavaScript -objecteigenschappen wordt nu weergegeven op basis van deze volgorde:

  1. Eigen opsommende eigenschappen
  2. Eigen niet-inschepbare eigenschappen
  3. Geërfde opsommbare eigenschappen
  4. Overgeërfde niet-nauwkeurige eigenschappen

Eerder vonden ontwikkelaars het moeilijker om relevante eigenschappen te vinden omdat de suggestie alleen de voorkeur gaf aan eigen eigenschappen boven erfelijke eigenschappen, en alle erfelijke eigenschappen kregen gelijke prioriteit.

Verbeterde autocomplete suggesties voor JavaScript -objecten

Chromium -probleem: 1299241

Bronkaarten Verbeteringen

Hier zijn een paar fixes op brongaarten om de algehele foutopsporingservaring te verbeteren:

  • Breekpunten werken nu in inline <script> met bronurl -annotaties.
  • De debugger lost nu met blokkenvariabelen op in de reikwijdteweergave met brongaarten. Lost blokken van variabelen op
  • De debugger lost nu variabelen op in pijlfuncties in de reikwijdteweergave met bronkaarten. Lost variabelen op in pijlfuncties

Chromium -problemen: 1329113 , 1322115

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

  • De instelling voor auto-voltooiing voor het bronnenpaneel opgelost. Eerder is de auto-complete altijd op zelfs de instelling uitgeschakeld. ( 1323286 )
  • Het tabblad Manifest in het applicatiepaneel bijgewerkt om het nieuwste formaat voor kleurenschema te parseren. ( 1318305 )
  • Verbeterde de suggesties voor de <script async> het weergeven van blokkeringsproblemen in het paneel Performance Insights . Eerder stelde Devtools voor om add async attribute to the script tag hoewel het script al is gemarkeerd als async. ( 1334096 )
  • Het paneel Performance Insights detecteert nu IFRAMES omdat potentiële oorzaken voor lay -outverschuivingen. U kunt de IFRAME -details bekijken in het Details Pane. ( 1328873 )
  • Wanneer het bestand in het opdrachtmenu wordt geopend, zijn de geschreven bestanden (bestanden gegenereerd door brongaarten) nu hoger gerangschikt, zodat ze hierboven op dezelfde manier worden genoemd geïmplementeerde scripts verschijnen. ( 1312929 )

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 .