Wat is er nieuw in DevTools (Chrome 104)

Jecelyn Yeen

Frame opnieuw starten tijdens foutopsporing

De functie 'Frame opnieuw starten' is terug! Je kunt de voorgaande code opnieuw uitvoeren wanneer je ergens in een functie bent gepauzeerd. Voorheen was deze functie verouderd en verwijderd in Chrome 92 vanwege stabiliteitsproblemen.

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

Chromium-probleem: 1303521

Opties voor langzame herhaling in het paneel Recorder

Je kunt gebruikersstromen nu langzamer afspelen: langzaam, heel langzaam en extreem langzaam. Met deze opties kun je elke stap beter op het scherm zien.

Open het Recorder -paneel en start een nieuwe opname . Zodra de opname klaar is, klikt u op de vervolgkeuzeknop ' Herhalen' . Selecteer een snelheid om een herhaling te starten.

Chromium-probleem: 1306756

Bouw een extensie voor het Recorder-paneel

Je kunt nu een Chrome-extensie bouwen of installeren om replayscripts te exporteren in je favoriete formaat. Zie de documentatie van de Recorder-extensie API voor meer informatie over hoe je er een bouwt.

Als u een demo-extensie wilt installeren, volgt u deze stappen die in de documentatie worden beschreven.

Chromium-probleem: 1325751

Groepeer bestanden op Auteur/Geïmplementeerd in het Bronnenpaneel

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

Met dit selectievakje kunt u bestanden in twee categorieën groeperen voor een snellere bestandszoekopdracht:

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

Probeer het zelf met deze React-demo !

Chromium-probleem: 960909

Nieuwe gebruikerstimings volgen in het paneel Prestatie-inzichten

Visualiseer performance.measure() -markeringen in uw opname met het nieuwe spoor Gebruikerstiming in het paneel Prestatie-inzichten .

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

Wanneer u begint met het meten van de paginalaadtijd , wordt de gebruikerstimingtrack weergegeven in de opname. Klik op het timingitem om de details ervan in het zijpaneel te bekijken.

Chromium-probleem: 1322808

De toegewezen sleuf van een element onthullen

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

Dit voorbeeld bevat kaarten met een paar benoemde vakken. Bekijk het vak voor de person-occupation van een kaart en klik op de slot ernaast om het toegewezen vak te onthullen.

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

Chromium-probleem: 1018906

Simuleer hardware-gelijktijdigheid voor prestatie-opnamen

Met de nieuwe instelling Hardwareconcurrency in het paneel Prestaties kunnen ontwikkelaars de waarde configureren die wordt gerapporteerd door navigator.hardwareConcurrency .

Sommige applicaties gebruiken navigator.hardwareConcurrency om de mate van parallelliteit van hun applicatie te bepalen, bijvoorbeeld om de pthread-poolgrootte van Emscripten te bepalen. Met deze functie kunnen ontwikkelaars de prestaties van hun applicatie testen met verschillende coreaantallen.

Chromium-probleem: 1297439

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 vooraf kunt zien wat voor soort wijziging de waarde op het knooppunt teweegbrengt.

Chromium-probleem: 1285091

Blokkerende frames identificeren in het paneel Back/forward cache

Het deelvenster Back/forward cache in het toepassingspaneel heeft een nieuwe sectie voor frames waarmee u blokkerende frames kunt identificeren die mogelijk verhinderen dat de pagina in aanmerking komt voor bfcache.

Chromium-probleem: 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 opsombare eigenschappen
2. Eigen niet-opsombare eigenschappen
3. Overgeërfde opsombare eigenschappen
4. Overgeërfde niet-opsombare eigenschappen

Voorheen vonden ontwikkelaars het lastiger om relevante panden te vinden, omdat het voorstel alleen voorrang gaf aan eigen panden boven geërfde panden en alle geërfde panden dezelfde prioriteit kregen.

Chromium-probleem: 1299241

Verbeteringen aan 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 blok-scoped variabelen op in de Scope -weergave met bronkaarten.
• De debugger lost nu variabelen op in pijlfuncties in de Scope -weergave met bronkaarten.

Chromium-problemen: 1329113 , 1322115

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• De instelling Automatisch aanvullen voor het Bronnenpaneel is aangepast. Voorheen was de instelling Automatisch aanvullen altijd uitgeschakeld, zelfs als deze instelling niet actief was. ( 1323286 )
• Het tabblad Manifest in het paneel Toepassing is bijgewerkt om de nieuwste kleurenschema-indeling te parseren. ( 1318305 )
• Verbeterde suggesties voor de problemen met het blokkeren van <script async> -rendering in het paneel 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 deelvenster Prestatie-inzichten detecteert nu iframes als mogelijke oorzaken voor lay-outverschuivingen. U kunt de iframedetails bekijken in het deelvenster Details . ( 1328873 )
• Bij het openen van een bestand in het menu Opdracht worden de gemaakte bestanden (bestanden die zijn gegenereerd door bronkaarten) nu hoger gerangschikt, zodat ze boven gelijknamige geïmplementeerde scripts verschijnen. ( 1312929 )

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.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.