Wat is er nieuw in DevTools (Chrome 97)

Previewfunctie: Nieuw opnamepaneel

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

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

U kunt bijvoorbeeld het afrekenproces van koffie opnemen met deze demo-applicatie voor koffiebestellingen . Nadat u een kopje koffie hebt toegevoegd en de betaalgegevens hebt ingevuld, kunt u de opname beëindigen, het proces opnieuw afspelen of op de knop Prestaties meten klikken om de gebruikersstroom in het paneel Prestaties te meten.

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

Het Recorder- paneel is een previewfunctie. Ons team werkt er nog steeds actief aan en we horen graag uw feedback voor verdere verbeteringen.

Recorderpaneel

Chromium-probleem: 1257499

Vernieuw de apparatenlijst in de 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 apparatenlijst in de apparaatmodus

Chromium-probleem: 1223525

Automatisch aanvullen met Bewerken als HTML

De interface 'Bewerken als HTML' ondersteunt nu automatisch aanvullen en syntaxismarkeringen. Klik in het paneel 'Elementen' met de rechtermuisknop op een element en selecteer 'Bewerken als HTML' . Typ een DOM-eigenschap (bijv. id , aria ). De automatische aanvulling zou u moeten helpen de gewenste eigenschapsnaam te vinden.

Automatisch aanvullen met Bewerken als HTML

Chromium-probleem: 1215072

Verbeterde codefoutopsporingservaring

Kolomnummers worden nu opgenomen in de uitvoerfout in de console. Gemakkelijke toegang tot het kolomnummer is essentieel voor het debuggen, vooral met geminimaliseerde JavaScript.

Kolomnummer in de uitvoerfout

Chromium-probleem: 1073064

[Experimenteel] DevTools-instellingen synchroniseren tussen apparaten

Je DevTools-instellingen worden nu standaard gesynchroniseerd op alle 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 makkelijker om op verschillende apparaten te werken. Zo worden de volgende weergave-instellingen gesynchroniseerd, zodat u een consistente ervaring op al uw apparaten hebt en dezelfde instellingen niet opnieuw hoeft te definiëren. Meer informatie over de synchronisatiefunctie vindt u in DevTools-aanpassingen .

weergave-instellingen

Deze functie is momenteel experimenteel; het team werkt er nog actief aan. Als je feedback hebt, deel het dan hier met ons.

Chromium-probleem: 1245541

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.