Wat is er nieuw in DevTools (Chrome 103)

Dubbelklik- en rechtsklikgebeurtenissen vastleggen in het Recorder-paneel

Het paneel Recorder kan nu dubbelklik- en rechtermuisknopgebeurtenissen vastleggen.

Dubbelklik- en rechtsklikgebeurtenissen vastleggen in het Recorder-paneel

In dit voorbeeld start u een opname en probeert u 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 uit het contextmenu

Om te begrijpen hoe Recorder deze gebeurtenissen heeft vastgelegd, breidt u de volgende stappen uit:

  • Dubbelklikken wordt vastgelegd als type: doubleClick .
  • De gebeurtenis 'rechts klikken' wordt vastgelegd als type: click , maar de button is ingesteld op secondary . De button van een normale muisklik is primary .

Chromium-problemen: 1300839 , 1322879 , 1299701 , 1323688

Nieuwe tijdspanne- en momentopnamemodus in het Lighthouse-paneel

Met Lighthouse kunt u nu de prestaties van uw website meten, en wel verder dan alleen het laden van de pagina.

Nieuwe tijdspanne- en momentopnamemodus in het Lighthouse-paneel

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

  • Navigatierapporten analyseren het laden van één pagina. Navigatie is het meest voorkomende rapporttype. Alle Lighthouse-rapporten vóór de huidige versie zijn navigatierapporten.
  • Tijdspannerapporten analyseren een willekeurige tijdsperiode, die doorgaans gebruikersinteracties bevat.
  • Snapshots -rapporten analyseren de pagina in een bepaalde staat, meestal nadat de gebruiker ermee heeft geinteracteerd.

Laten we bijvoorbeeld de prestaties meten van het toevoegen van artikelen aan de winkelwagen op deze demopagina . Selecteer de modus Tijdspanne en klik op Starttijdspanne . Scrol en voeg een paar artikelen toe aan de winkelwagen. Klik zodra u klaar bent op Eindtijdspanne om een ​​Lighthouse-rapport van de gebruikersinteracties te genereren.

Tijdspannemodus

Zie Gebruikersstromen in Lighthouse voor meer informatie over de unieke use cases, voordelen en beperkingen van elke modus.

Chromium-probleem: 1291284

Prestatie-inzichten-updates

Verbeterde zoomcontrole in het paneel Prestatie-inzichten

DevTools zoomt nu in op basis van uw muiscursor in plaats van op de positie van de afspeelkop. Met de nieuwste cursorgebaseerde zoom kunt u uw muis naar elke gewenste plek in het spoor verplaatsen en direct inzoomen op het gewenste gebied.

Zie Prestatie-inzichten voor meer informatie over 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 uitvoeringsopname wilt verwijderen

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

Bevestig dat u een uitvoeringsopname wilt verwijderen

Chromium-probleem: 1318087

Deelvensters in het Elementenpaneel opnieuw ordenen

U kunt nu de volgorde van de deelvensters in het paneel Elementen naar wens aanpassen.

Wanneer u DevTools bijvoorbeeld op een smal scherm opent, is het deelvenster Toegankelijkheid verborgen onder de knop 'Meer weergeven' . Als u regelmatig problemen met toegankelijkheid oplost, kunt u het deelvenster nu naar voren slepen voor gemakkelijkere toegang.

Deelvensters in het Elementenpaneel opnieuw ordenen

Chromium-probleem: 1146146

Een kleur kiezen buiten de browser

DevTools ondersteunt nu het kiezen van een kleur buiten de browser. Voorheen kon je alleen een kleur kiezen binnen de browser.

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

Een kleur kiezen buiten de browser

Chromium-probleem: 1245191

Verbeterde inline-waardevoorvertoning tijdens het debuggen

De debugger geeft nu de voorvertoning van de inlinewaarden correct weer.

In dit voorbeeld heeft de double functie een invoerparameter a en een variabele x . Plaats een breekpunt op de return en voer de code uit. De inline preview toont de waarden a en x correct. Voorheen gaf de debugger de waarde x niet weer in de inline preview.

Verbeterde inline-waardevoorvertoning tijdens het debuggen

Chromium-probleem: 1316340

Ondersteuning van grote blobs voor virtuele authenticators

Het tabblad WebAuthn heeft nu het nieuwe selectievakje Ondersteunt grote blobs voor virtuele authenticators.

Dit selectievakje is standaard uitgeschakeld. U kunt het alleen inschakelen voor authenticators met ctap2 protocol die residentiële sleutels ondersteunen.

Ondersteuning van grote blobs voor virtuele authenticators

Chromium-probleem: 1321803

Nieuwe sneltoetsen in het Bronnenpaneel

Er zijn nu twee nieuwe sneltoetsen beschikbaar in het paneel Bronnen :

  • Schakel de navigatiezijbalk (links) in of uit met Control / Command + Shift + Y
  • Schakel de debugger- zijbalk (rechts) in of uit met Control / Command + Shift + H

Nieuwe sneltoetsen voor het Bronnenpaneel

Chromium-problemen: 1226363

Verbeteringen aan bronkaarten

Voorheen kregen ontwikkelaars te maken met willekeurige fouten tijdens:

  • Debuggen met Codepen -voorbeeld
  • Identificatie van de bronlocatie van prestatieproblemen in een Codepen -voorbeeld
  • Ontbrekend componenttabblad wanneer React DevTools is ingeschakeld

Hier zijn een paar oplossingen voor bronkaarten om de algehele foutopsporingservaring te verbeteren:

  • Correcte toewijzing 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 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.

Wat is er nieuw in DevTools

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