What's New In DevTools (Chrome 100)

Published on Tuesday, March 8, 2022 • Updated on Tuesday, March 8, 2022

Developer advocate working on Chrome DevTools at Google.

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

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.

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.

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]).

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.

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.

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