Wat is er nieuw in DevTools (Chrome 97)

Preview-functie: Nieuw Recorder-paneel

Gebruik het nieuwe Recorder- paneel om gebruikersstromen op te nemen, af te spelen en te meten.

Open het Recorderpaneel . Volg de instructies op het scherm om een ​​nieuwe opname te starten.

Met deze demo-applicatie voor het bestellen van koffie kunt u bijvoorbeeld het afrekenproces voor koffie vastleggen. Nadat u een kopje koffie heeft toegevoegd en de betalingsgegevens heeft ingevuld, kunt u de opname beëindigen, het proces opnieuw afspelen of op de knop Prestaties meten klikken om de gebruikersstroom in het prestatiepaneel te meten.

Ga naar de documentatie van het Recorder- paneel voor meer informatie met de stapsgewijze zelfstudie!

Het Recorder- paneel is een voorbeeldfunctie. Ons team werkt er nog steeds actief aan en we zijn op zoek naar uw feedback voor verdere verbeteringen.

Recorderpaneel

Chroomuitgave: 1257499

Vernieuw de apparaatlijst in Apparaatmodus

Door de Apparaatwerkbalk in te schakelen , worden er nu modernere apparaten toegevoegd aan de apparatenlijst. Selecteer een apparaat om de afmetingen ervan te simuleren.

Vernieuw de apparaatlijst in Apparaatmodus

Chroomuitgave: 1223525

Automatisch aanvullen met Bewerken als HTML

De gebruikersinterface Bewerken als HTML ondersteunt nu automatisch aanvullen en syntaxishighlights. Klik in het paneel Elementen met de rechtermuisknop op een element en selecteer Bewerken als HTML . Probeer een DOM-eigenschap te typen (bijvoorbeeld id , aria ). De automatische aanvulling zou u moeten helpen de naam van de eigenschap te vinden waarnaar u op zoek bent.

Automatisch aanvullen met Bewerken als HTML

Chroomuitgave: 1215072

Verbeterde ervaring met het opsporen van fouten in code

Kolomnummers zijn nu opgenomen in de uitvoerfout in de console. Gemakkelijke toegang tot het kolomnummer is essentieel voor foutopsporing, vooral met verkleind JavaScript.

Kolomnummer in de uitvoerfout

Chroomuitgave: 1073064

[Experimenteel] DevTools-instellingen op verschillende apparaten synchroniseren

Uw DevTools-instellingen worden nu standaard op verschillende apparaten gesynchroniseerd wanneer u Chrome-profielsynchronisatie inschakelt. U kunt de synchronisatie-instellingen van DevTools wijzigen via Instellingen > Synchroniseren > Synchronisatie van instellingen inschakelen .

DevTools-synchronisatie-instellingen

Met deze nieuwe instelling kunt u gemakkelijker op verschillende apparaten werken. De volgende weergave-instellingen worden bijvoorbeeld gesynchroniseerd, zodat u een consistente ervaring op alle apparaten heeft en dezelfde instellingen niet opnieuw hoeft te definiëren. Meer informatie over de synchronisatiefunctie in DevTools-aanpassing .

weergave-instellingen

Deze functie is momenteel experimenteel, het team werkt er nog steeds actief aan. Als u feedback heeft, kunt u deze hier met ons delen.

Chroomuitgave: 1245541

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 .