What's New In DevTools (Chrome 100)

Chrome 100

Here’s to the 100th Chrome version! Chrome DevTools will continue to provide reliable tools for developers to build on the web. Take a moment to click around in the What’s New tab to celebrate the milestones.

As usual, you can watch the latest What’s New in DevTools video by clicking on the image.

View and edit @supports at rules in the Styles pane

You can now view and edit the CSS @supports at-rules in the Styles pane. These changes make it easier to experiment with the at-rules in real time. Open this demo page, inspect the <div class=”box”> element, view the @supports at-rules in the Styles pane. Click on the rule’s declaration to edit it.

View and edit @supports at rules

Chromium issues: 1222574, 1222573

Recorder panel improvements

Support common selectors by default

When determining an unique selector during recording, the Recorder panel now automatically prefers elements with the following attributes:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

The attributes above are common selectors used in test automation.

For example, start a new recording with this demo page. Fill in an email address and observe the selector value.

Since the email element has data-testid defined, it’s used as the selector automatically instead of the id or class attributes.

Support common selectors by default

Customize the recording’s selector

You can customize the selector of a recording if you are not using the common selectors.

For example, this demo page uses the data-automate attribute as the selector. start a new recording and enter the data-automate as the selector attribute. Fill in an email address and observe the selector value ([data-automate=email-address]).

Customize the recording’s selector

The result of custom selector selection

Rename a recording

You can now rename a recording in the Recorder panel with the edit button (pencil icon) next to the recording’s title.

Rename a recording

Preview class/function properties on hover

You can now hover over a class or function in the Sources panel during debugging to preview its properties. Previously, it only showed the function name and a link to its location in the source code.

Preview class/function properties on hover

Chromium issue: 1049947

Partially presented frames in the Performance panel

Performance recording now displays a new frame category "Partially presented frames" in the Frames timeline.

Previously, the Frames timeline visualizes any frames with delayed main-thread work as "dropped frames". However, there are cases where some frames may still produce visual updates (e.g. scrolling) driven by the compositor thread.

This leads to user confusion because the screenshots of these “Dropped frames” are still reflecting visual updates.

The new "Partially presented frames" aims to indicate more intuitively that although some content is not presented timely in the frame, but the issue is not so severe as to block visual updates altogether.

Partially presented frames in the Performance panel

Chromium issue: 1261130

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • Updated iPhone user agent strings for emulated devices. All iPhone versions after 5 have a user-agent string with iPhone OS 13_2_3. (1289553)
  • You can now save snippet as a JavaScript file directly. Previously, you needed to append .js file extension manually. (1137218)
  • The Sources panel now correctly displays scope variable names when debugging with source map. Previously, the Sources panel displays minified scope variable names despite source map being provided. (1294682)
  • The Sources panel now restores scroll position correctly on page load. Previously, the position was not restored correctly causing inconvenience in debugging. (1294422)

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 or DevTools Tips YouTube videos.

What's New in DevTools

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

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