Wat is er nieuw in DevTools (Chrome 103)

Leg dubbelklik- en rechterklikgebeurtenissen vast in het opnamepaneel.

Het opnamepaneel kan nu dubbelklik- en rechterklikgebeurtenissen vastleggen.

Leg dubbelklik- en rechterklikgebeurtenissen vast in het opnamepaneel.

Start in dit voorbeeld een opname en probeer de volgende stappen uit te voeren:

  • Dubbelklik op de kaart om deze te vergroten.
  • Klik met de rechtermuisknop op de kaart en selecteer een actie in het contextmenu.

Om te begrijpen hoe Recorder deze gebeurtenissen heeft vastgelegd, kunt u de stappen uitbreiden:

  • Dubbelklikken wordt vastgelegd als type: doubleClick .
  • Een rechtermuisklik wordt vastgelegd als type: click maar de eigenschap button is ingesteld op secondary . De waarde van button bij een normale muisklik is primary .

Chromium-problemen: 1300839 , 1322879 , 1299701 , 1323688

Nieuwe tijdsduur en momentopnamemodus in het Lighthouse-paneel

Je kunt Lighthouse nu gebruiken om de prestaties van je website te meten, ook buiten de laadtijd van de pagina.

Nieuwe tijdsduur en momentopnamemodus in het Lighthouse-paneel

Het Lighthouse- paneel ondersteunt nu 3 modi voor het meten van gebruikersstromen:

  • Navigatierapporten analyseren één enkele paginalading. Navigatie is het meest voorkomende rapporttype. Alle Lighthouse-rapporten van vóór de huidige versie zijn navigatierapporten.
  • Tijdsbestekrapporten analyseren een willekeurige tijdsperiode, die doorgaans gebruikersinteracties omvat.
  • Snapshotrapporten analyseren de pagina in een bepaalde staat, meestal nadat de gebruiker ermee heeft geïnteracteerd.

Laten we bijvoorbeeld de prestaties van het toevoegen van artikelen aan de winkelwagen op deze demopagina meten. Selecteer de modus 'Tijdsbestek' en klik op 'Start tijdsbestek' . Scroll naar beneden en voeg een paar artikelen toe aan de winkelwagen. Klik vervolgens op 'Einde tijdsbestek' om een ​​Lighthouse-rapport van de gebruikersinteracties te genereren.

Tijdsduurmodus

Bekijk de gebruikersstromen in Lighthouse voor meer informatie over de unieke gebruiksscenario's, voordelen en beperkingen van elke modus.

Chromium-probleem: 1291284

Updates van Performance Insights

Verbeterde zoomregeling in het paneel Prestatie-inzichten

DevTools zoomt nu in op basis van je muiscursor in plaats van de positie van de afspeelkop. Met de nieuwste cursor-gebaseerde zoomfunctie kun je je muis overal in de track plaatsen en direct inzoomen op het gewenste gebied.

Bekijk Prestatie-inzichten om te leren hoe u bruikbare inzichten kunt verkrijgen en de prestaties van uw website kunt verbeteren met behulp van het paneel.

Chromium-probleem: 1313382

Bevestig dat u een opname van een optreden wilt verwijderen.

DevTools toont nu een bevestigingsvenster voordat een prestatie-opname wordt verwijderd .

Bevestig dat u een opname van een optreden wilt verwijderen.

Chromium-probleem: 1318087

De volgorde van de vensters in het Elementenpaneel wijzigen

Je kunt de vensters in het paneel Elementen nu naar eigen voorkeur opnieuw rangschikken.

Als u bijvoorbeeld DevTools op een smal scherm opent, is het deelvenster Toegankelijkheid verborgen achter de knop 'Meer weergeven '. Als u regelmatig toegankelijkheidsproblemen oplost, kunt u het deelvenster nu naar voren slepen voor gemakkelijker toegang.

De volgorde van de vensters in het Elementenpaneel wijzigen

Chromium-probleem: 1146146

Een kleur selecteren buiten de browser

DevTools biedt nu de mogelijkheid om een ​​kleur buiten de browser te selecteren. Voorheen kon dit alleen binnen de browser.

Klik in het deelvenster Stijlen op een kleurvoorbeeld om een ​​kleurenkiezer te openen. Gebruik het pipet om een ​​kleur te selecteren.

Een kleur selecteren buiten de browser

Chromium-probleem: 1245191

Verbeterde inline-waardeweergave tijdens het debuggen.

De debugger toont nu de inline-waarden in de preview correct.

In dit voorbeeld heeft de functie double een invoerparameter a en een variabele x . Plaats een breakpoint op de return regel en voer de code uit. De inline preview toont de waarden a en x correct. Eerder toonde de debugger de waarde x niet in de inline preview.

Verbeterde inline-waardeweergave tijdens het debuggen.

Chromium-probleem: 1316340

Ondersteuning voor grote blobs voor virtuele authenticatie.

Het tabblad WebAuthn bevat nu een nieuw selectievakje ' Ondersteunt grote blobs' voor virtuele authenticators.

Dit selectievakje is standaard uitgeschakeld. U kunt het alleen inschakelen voor authenticators met ctap2 protocol die resident keys ondersteunen.

Ondersteuning voor grote blobs voor virtuele authenticatie.

Chromium-probleem: 1321803

Nieuwe sneltoetsen in het paneel Bronnen

In het paneel Bronnen zijn nu twee nieuwe sneltoetsen beschikbaar:

  • Schakel de navigatiezijbalk (links) in/uit met Control/Command + Shift + Y.
  • Schakel de zijbalk van de foutopsporing (rechts) in/uit met Control/Command + Shift + H.

Nieuwe sneltoetsen voor het paneel Bronnen

Chromium-problemen: 1226363

Bronkaarten verbeteringen

Voorheen ondervonden ontwikkelaars willekeurige fouten tijdens:

  • Foutopsporing met een Codepen- voorbeeld
  • Het opsporen van de oorzaak van prestatieproblemen in een Codepen- voorbeeld.
  • Het tabblad Componenten ontbreekt wanneer React DevTools is ingeschakeld.

Hieronder volgen enkele verbeteringen aan source maps om de algehele debugervaring te optimaliseren:

  • Correcte koppeling tussen locatie en offset voor inline scripts en bronlocatie
  • Gebruik fallback-informatie voor de tekstlocatie van het frame.
  • Relatieve URL's correct oplossen met de URL van het frame.

Chromium-problemen: 1319828 , 1318635 , 1305475

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' .