Wat is er nieuw in DevTools (Chrome 97)

Voorbeeldfunctie: Nieuw opnamepaneel

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

Open het paneel 'Opname' . Volg de instructies op het scherm om een ​​nieuwe opname te starten.

Je kunt bijvoorbeeld het afrekenproces voor koffie opnemen met deze demo-applicatie voor koffiebestellingen . Nadat je een koffie hebt toegevoegd en de betaalgegevens hebt ingevuld, kun je 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 handleiding!

Het paneel 'Opname' is een preview-functie. Ons team werkt er nog actief aan en we stellen uw feedback op prijs voor verdere verbeteringen.

Opnamepaneel

Chromium-probleem: 1257499

Vernieuw de apparatenlijst in de apparaatmodus.

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

Vernieuw de apparatenlijst in de apparaatmodus.

Chromium-probleem: 1223525

Automatisch aanvullen met 'Bewerken als HTML'

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

Automatisch aanvullen met 'Bewerken als HTML'

Chromium-probleem: 1215072

Verbeterde ervaring bij het debuggen van code

Kolomnummers worden nu weergegeven in de foutmelding in de console. Gemakkelijke toegang tot het kolomnummer is essentieel voor het debuggen, vooral bij geminificeerde JavaScript-code.

Kolomnummer in de uitvoerfout

Chromium-probleem: 1073064

[Experimenteel] Synchronisatie van DevTools-instellingen tussen apparaten

Je DevTools-instellingen worden nu standaard gesynchroniseerd tussen apparaten wanneer je Chrome-profielsynchronisatie inschakelt. Je kunt de DevTools-synchronisatie-instellingen wijzigen via Instellingen > Synchronisatie > Instellingensynchronisatie inschakelen .

DevTools synchronisatie-instellingen

Deze nieuwe instelling maakt het eenvoudiger om op verschillende apparaten te werken. De volgende uiterlijke instellingen worden bijvoorbeeld gesynchroniseerd, zodat u een consistente ervaring hebt op al uw apparaten en dezelfde instellingen niet opnieuw hoeft te definiëren. Lees meer over de synchronisatiefunctie in de aanpassingsopties van DevTools .

uiterlijke instellingen

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

Chromium-probleem: 1245541

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