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

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