Wat is er nieuw in DevTools (Chrome 97)

Jecelyn Yeen
Jecelyn Yeen

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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .