Wat is er nieuw in DevTools (Chrome 103)

Jecelyn Yeen

Leg dubbelklik- en rechtermuisknopgebeurtenissen vast in het Recorder-paneel

Het Recorder- paneel kan nu dubbelklik- en rechtsklikgebeurtenissen vastleggen.

Leg dubbelklik- en rechtermuisknopgebeurtenissen vast 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 in het contextmenu

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

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

Chroomuitgaves: 1300839 , 1322879 , 1299701 , 1323688

Nieuwe tijdspanne en momentopnamemodus in het Lighthouse-paneel

U kunt Lighthouse nu gebruiken om de prestaties van uw website te meten, ook na het laden van de pagina.

Nieuwe tijdspanne en momentopnamemodus in het Lighthouse-paneel

Het Lighthouse -paneel ondersteunt nu 3 modi voor gebruikersstroommeting:

  • Navigatierapporten analyseren het laden van één pagina. Navigatie is het meest voorkomende rapporttype. Alle Lighthouse-rapporten vóór de huidige versie zijn navigatierapporten.
  • Timespans -rapporten analyseren een willekeurige tijdsperiode, die doorgaans gebruikersinteracties bevat.
  • Rapporten met momentopnamen analyseren de pagina in een bepaalde staat, meestal nadat de gebruiker er interactie mee heeft gehad.

Laten we bijvoorbeeld de prestaties meten van het toevoegen van items aan het winkelwagentje op deze demopagina . Selecteer de Timespan- modus en klik op Start timespan . Scroll en voeg een paar items toe aan de winkelwagen. Als u klaar bent, klikt u op Eindtijdspanne om een ​​Lighthouse-rapport van de gebruikersinteracties te genereren.

Tijdspanne-modus

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

Chroomuitgave: 1291284

Updates voor prestatie-inzichten

Verbeterde zoombediening in het deelvenster 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 een willekeurige plek in de track verplaatsen en meteen inzoomen op het gewenste gebied.

Zie Prestatie-inzichten voor informatie over hoe u bruikbare inzichten kunt verkrijgen en de prestaties van uw website kunt verbeteren met het panel.

Chroomuitgave: 1313382

Bevestig dat u een uitvoeringsopname wilt verwijderen

DevTools toont nu een bevestigingsvenster voordat een uitvoeringsopname wordt verwijderd .

Bevestig dat u een uitvoeringsopname wilt verwijderen

Chroomuitgave: 1318087

Herschik de deelvensters in het deelvenster Elementen

U kunt de deelvensters in het deelvenster Elementen nu opnieuw rangschikken op basis van uw voorkeur.

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

Herschik de deelvensters in het deelvenster Elementen

Chroomuitgave: 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 in de browser.

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

Een kleur kiezen buiten de browser

Chroomuitgave: 1245191

Verbeterd voorbeeld van inline-waarden tijdens foutopsporing

De debugger toont nu het voorbeeld van de inline-waarden correct.

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. Het inlinevoorbeeld toont de waarden a en x correct. Voorheen liet de debugger de waarde x niet zien in het inline voorbeeld.

Verbeterd voorbeeld van inline-waarden tijdens foutopsporing

Chroomuitgave: 1316340

Ondersteuning van grote blobs voor virtuele authenticators

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

Dit selectievakje is standaard uitgeschakeld. U kunt dit alleen inschakelen voor authenticators met ctap2 -protocol die residente sleutels ondersteunen.

Ondersteuning van grote blobs voor virtuele authenticators

Chroomuitgave: 1321803

Nieuwe sneltoetsen in het paneel Bronnen

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

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

Nieuwe sneltoetsen voor het paneel Bronnen

Chroomuitgaves: 1226363

Verbeteringen in bronkaarten

Voorheen ondervonden ontwikkelaars willekeurige fouten tijdens:

  • Foutopsporing met Codepen voorbeeld
  • Identificeren van de bronlocatie van prestatieproblemen in een Codepen -voorbeeld
  • Ontbrekend tabblad Component wanneer React DevTools is ingeschakeld

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

  • Correcte mapping tussen locatie en offset voor inline scripts en bronlocatie
  • Gebruik fallback-informatie voor de tekstlocatie van het frame
  • Repareer relatieve URL's op de juiste manier met de URL van het frame

Chroomuitgaves: 1319828 , 1318635 , 1305475

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 .