What's New In DevTools (Chrome 97)

Published on Updated on

Translated to: Español, Português, 한국어, 中文, Pусский, 日本語

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

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   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos.

What's New in DevTools

A list of everything that has been covered in the What's New In DevTools series.

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.