Wat is er nieuw in DevTools (Chrome 101)

Jecelyn Yeen

Importeer en exporteer geregistreerde gebruikersstromen als een JSON-bestand

Het Recorder- paneel ondersteunt nu het importeren en exporteren van gebruikersstroomopnames als JSON-bestand. Deze toevoeging maakt het delen van gebruikersstromen eenvoudiger en kan nuttig zijn voor het melden van bugs.

Download bijvoorbeeld dit JSON-bestand . U kunt het importeren met de importknop en de gebruikersstroom opnieuw afspelen .

Daarnaast kunt u de opname ook exporteren. Nadat u een gebruikersstroom hebt opgenomen , klikt u op de exportknop. Er zijn drie exportopties:

• Exporteren als JSON-bestand . Download de opname als JSON-bestand.
• Exporteer als een @puppeteer/replay-script . Download de opname als een Puppeteer Replay- script.
• Exporteren als Puppeteer-script . Download de opname als Puppeteer -script.

Raadpleeg de documentatie voor meer informatie over de verschillen tussen deze opties.

Chromium-probleem: 1257499

Bekijk cascadelagen in het deelvenster Stijlen

Cascadelagen bieden meer expliciete controle over uw CSS-bestanden om stijlspecifieke conflicten te voorkomen. Dit is vooral handig voor grote codebases, ontwerpsystemen en bij het beheren van stijlen van derden in applicaties.

In dit voorbeeld zijn er drie cascadelagen gedefinieerd: page , component en base . In het deelvenster Stijlen kunt u elke laag en de bijbehorende stijlen bekijken.

Klik op de laagnaam om de volgorde van de lagen te bekijken. De page heeft de hoogste specificiteit, daarom is de achtergrond van het box groen.

Chromium-probleem: 1240596

Ondersteuning voor de hwb()-kleurfunctie

U kunt nu de HWB-kleuropmaak bekijken en bewerken in DevTools.

Houd in het deelvenster Stijlen de Shift- toets ingedrukt en klik op een kleurvoorbeeld om de kleuropmaak te wijzigen. De HWB-kleuropmaak wordt toegevoegd.

Als alternatief kunt u in de kleurenkiezer het kleurformaat wijzigen naar HWB.

Verbeterde weergave van privé-eigendommen

DevTools evalueert en toont nu correct privé-accessors. Voorheen kon je klassen met privé-accessors niet uitvouwen in de Console en het Bronnen -paneel.

Chromium-problemen: 1296855 , https://crbug.com/1303407

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• De Back/Forward Cache geeft nu de extensie-ID weer die bfcache blokkeerde indien aanwezig. ( 1284548 )
• Ondersteuning voor automatisch aanvullen voor array-achtige objecten, CSS-klassenamen, map.get en HTML-tags is hersteld. ( 1297101 , 1297491 , 1293807 , 1296983 )
• Onjuiste markeringen bij dubbelklikken op woorden en het ongedaan maken van automatisch aanvullen zijn opgelost. ( 1298437 , 1298667 )
• De sneltoets voor opmerkingen in het bronnenpaneel is hersteld. ( 1296535 )
• Ondersteuning opnieuw inschakelen voor het gebruik van de Alt-toets (Opties) voor meervoudige selectie in het paneel Bronnen . ( 1304070 )

[Experimenteel] Nieuwe tijdspanne- en momentopnamemodus in het Lighthouse-paneel

Naast de bestaande navigatiemodus ondersteunt het Lighthouse- paneel nu twee extra modi voor het meten van gebruikersstromen: tijdspanne en momentopname .

U kunt de tijdspannerapporten bijvoorbeeld gebruiken om gebruikersinteracties te analyseren. Open deze demopagina . Selecteer de tijdspannemodus en klik op 'Tijdspanne starten' . Klik op de pagina op een kopje koffie en beëindig de tijdspanne. Lees het rapport om de totale blokkeringstijd en cumulatieve lay-outverschuiving te achterhalen die door de interactie zijn veroorzaakt.

Elke modus heeft zijn eigen unieke use cases, voordelen en beperkingen. Raadpleeg de Lighthouse-documentatie voor meer informatie.

Chromium-probleem: 772558

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 wat in de serie Wat is er nieuw in DevTools is behandeld.