What's New In DevTools (Chrome 97)

Jecelyn Yeen

Preview feature: New Recorder panel

Use the new Recorder panel to record, replay and measure user flows.

Open the Recorder panel. Follow the instructions on screen to start a new recording.

For example, you can record the coffee checkout process with this coffee ordering demo application. After adding a coffee and filling out payment details, you can end the recording, replay the process or click on the Measure performance button to measure the user flow in the Performance panel.

Go to the Recorder panel documentation to learn more with the step-by-step tutorial!

The Recorder panel is a preview feature. Our team is still actively working on it and we are looking for your feedback for further enhancements.

Recorder panel

Chromium issue: 1257499

Refresh device list in Device Mode

Enabling the Device Toolbar, more modern devices are now added in the device list. Select a device to simulate its dimensions.

Refresh device list in Device Mode

Chromium issue: 1223525

Autocomplete with Edit as HTML

The Edit as HTML UI now supports autocomplete and syntax highlights. In the Elements panel, right click on an element, and select Edit as HTML. Try typing a DOM property (e.g. id, aria), the autocomplete should help you find the property name you're looking for.

Autocomplete with Edit as HTML

Chromium issue: 1215072

Improved code debugging experience

Column numbers are now included in the output error in the Console. Having easy access to the column number is essential for debugging especially with minified JavaScript.

Column number in the output error

Chromium issue: 1073064

[Experimental] Syncing DevTools settings across devices

Your DevTools settings are now synced across devices by default when you turn on Chrome profile sync. You can change the DevTools sync settings via Settings > Sync > Enable settings sync.

DevTools sync settings

This new setting makes it easier for you to work across devices. For example, the following appearance settings are synced so you have a consistent experience across devices and don’t need to re-define the same settings again. Learn more about the sync feature in DevTools customization.

appearance settings

This feature is experimental at the moment, the team is still actively working on it. If you have any feedback, please share with us here.

Chromium issue: 1245541

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

Submit a suggestion or feedback to us via crbug.com.
Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
Tweet at @ChromeDevTools.
Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.