Wat is er nieuw in DevTools (Chrome 101)

Gebruikersstromen importeren en exporteren als JSON-bestand

Het paneel 'Opname' ondersteunt nu het importeren en exporteren van gebruikersstroomopnames als JSON-bestand. Deze toevoeging maakt het delen van gebruikersstromen eenvoudiger en kan handig zijn voor het rapporteren van bugs.

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

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

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

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

Exportopties in het Recorder-paneel

Chromium-probleem: 1257499

Bekijk cascade-lagen in het deelvenster Stijlen.

Cascade-lagen bieden meer expliciete controle over uw CSS-bestanden om conflicten met 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 cascade-lagen 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 van het box groen.

Bekijk cascade-lagen in het deelvenster Stijlen.

Chromium-probleem: 1240596

Ondersteuning voor de hwb() kleurfunctie

Je 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 de kleurindeling te wijzigen. De HWB-kleurindeling wordt toegevoegd.

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

hwb() kleurfunctie

De weergave van privé-eigendommen is verbeterd.

DevTools evalueert en toont nu correct private accessors. Voorheen was het niet mogelijk om klassen met private accessors uit te vouwen in de console en het bronnenpaneel .

privé-eigenschappen in de console

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

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

  • De back/forward-cache geeft nu de extensie-ID weer die bfcache blokkeerde ( 1284548 ).
  • De ondersteuning voor automatisch aanvullen van array-achtige objecten, CSS-klassenamen, map.get en HTML-tags is verbeterd. ( 1297101 , 1297491 , 1293807 , 1296983 )
  • De onjuiste markering bij dubbelklikken op woorden en het ongedaan maken van automatisch aanvullen is gecorrigeerd. ( 1298437 , 1298667 )
  • De sneltoets voor opmerkingen in het paneel Bronnen is gecorrigeerd. ( 1296535 )
  • De ondersteuning voor het gebruik van de Alt- toets (Options) voor meervoudige selectie in het paneel Bronnen opnieuw inschakelen. ( 1304070 )

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

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

Je kunt bijvoorbeeld de tijdsinteractierapporten gebruiken om gebruikersinteracties te analyseren. Open deze demopagina . Selecteer de modus 'Tijdsinterval' en klik op 'Tijdsinterval starten' . Klik op de pagina op een koffiepictogram om het tijdsinterval te beëindigen. Lees het rapport om de totale blokkeringstijd en de cumulatieve lay-outverschuiving te achterhalen die door de interactie zijn veroorzaakt.

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

Tijdsduur en momentopnamemodus in het Lighthouse-paneelhuis

Chromium-probleem: 772558

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .