Wat is er nieuw in DevTools (Chrome 101)

Jecelyn Yeen

Importeer en exporteer opgenomen gebruikersstromen als JSON-bestand

Het Recorder- paneel ondersteunt nu het importeren en exporteren van gebruikersstroomopnamen als JSON-bestand. Deze toevoeging maakt het eenvoudiger om gebruikersstromen te delen en kan nuttig zijn voor het rapporteren 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. Na het vastleggen van een gebruikersstroom klikt u op de exportknop. Er zijn 3 exportopties:

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

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

Exportopties in het Recorder-paneel

Chroomuitgave: 1257499

Bekijk cascadelagen in het deelvenster Stijlen

Cascadelagen maken een explicietere controle over uw CSS-bestanden mogelijk om conflicten met betrekking tot stijlspecificiteit te voorkomen. Dit is met name handig voor grote codebases, ontwerpsystemen en bij het beheren van stijlen van derden in applicaties.

In dit voorbeeld zijn er 3 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 laagvolgorde te bekijken. De page heeft de hoogste specificiteit, daarom is de achtergrond box groen.

Bekijk cascadelagen in het deelvenster Stijlen

Chroomuitgave: 1240596

Ondersteuning voor de hwb()-kleurfunctie

U kunt nu het HWB-kleurformaat bekijken en bewerken in DevTools.

Houd in het deelvenster Stijlen de Shift- toets ingedrukt en klik op een kleurvoorbeeld om het kleurformaat te wijzigen. Het HWB-kleurformaat is toegevoegd.

Als alternatief kunt u het kleurformaat wijzigen in HWB in de kleurkiezer .

hwb() kleurfunctie

Verbeterde weergave van privé-eigendommen

DevTools evalueert nu op de juiste manier privétoegangen en geeft deze weer. Voorheen kon u geen klassen uitbreiden met privétoegang in de Console en het Bronnenpaneel .

privé-eigenschappen in de console

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

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • De Back/Forward-cache geeft nu de extensie-ID weer die bfcache blokkeerde indien aanwezig.( 1284548 )
  • Ondersteuning voor automatische aanvulling voor array-achtige objecten, CSS-klassenamen, map.get en HTML-tags opgelost. ( 1297101 , 1297491 , 1293807 , 1296983 )
  • Foutieve highlights opgelost bij het dubbelklikken op woorden en het ongedaan maken van automatisch aanvullen. ( 1298437 , 1298667 )
  • Probleem opgelost met de sneltoets voor commentaar in het paneel Bronnen . ( 1296535 )
  • Schakel de ondersteuning voor het gebruik van de Alt-toets (Opties) voor meervoudige selectie in het paneel Bronnen opnieuw in. ( 1304070 )

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

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

U kunt de tijdspannerapporten bijvoorbeeld gebruiken om gebruikersinteracties te analyseren. Open deze demopagina . Selecteer de Timespan- modus en klik op Start timespan . Klik op de pagina op een kopje koffie en beëindig de tijdspanne. Lees het rapport om erachter te komen wat de totale blokkeertijd en cumulatieve lay-outverschuiving zijn die door de interactie zijn veroorzaakt.

Elke modus heeft zijn eigen unieke gebruiksscenario's, voordelen en beperkingen. Raadpleeg de Lighthouse-documentatie voor meer informatie.

Tijdspanne- en momentopnamemodus in het Lighthouse-paneelhuis

Chroomuitgave: 772558

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 .