What's New In DevTools (Chrome 100)
Stay organized with collections
Save and categorize content based on your preferences.
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.
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!
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
.
What's new in DevTools
A list of everything that has been covered in the
What's new in DevTools
series.
Chrome 125
Chrome 124
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
Except as otherwise noted, the content of this page is licensed under the
Creative Commons Attribution 4.0 License
, and code samples are licensed under the
Apache 2.0 License
. For details, see the
Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-03-08 UTC.