Preview feature: Full-page accessibility tree
The new
Full-page accessibility tree
makes it easier for you to get an overview of the full-page
accessibility tree
and help you better understand how your web content is exposed to assistive technology.
In the
Elements
panel, open the
Accessibility
pane and select
Enable full-page accessibility tree
checkbox. Then, reload DevTools and you will see a new accessibility button in the
Elements
panel.
You can click on it to toggle to the
Full-page accessibility tree
view. You can expand nodes or click to see details in the
Accessibility
pane.
Select a node and toggle back to the DOM tree view. The corresponding DOM node is selected now. This is a great way to understand the mapping between the DOM node and its accessibility tree node. This works for DOM tree ? Accessibility tree view too!
Previously, the accessibility tree was available in the
Accessibility
pane. The view is limited, it only enables you to explore a single node and its ancestors.
Our team is still actively working on this preview feature. We are looking for your
feedback
for further enhancements!
Chromium issue:
887173
More precise changes in the Changes tab
The code changes in the
Changes
tab is pretty-printed automatically.
Previously, it was hard to trace the actual changes of minified source code because all the code is shown in a single line.
Chromium issues:
1238818
,
1268754
,
1086491
Set longer timeout for user flow recording
You can now adjust the
Timeout
settings in the
Recorder
for all steps or a specific step. This is useful especially for pages with slow network requests and lengthy animation.
For example, I
recorded a user flow
on this
demo page
to load and click on the menu item. However, the loading of the menu items is slow (it takes 6 seconds). The
replay
of this user flow failed because it exceeds 5 seconds (the default timeout).
We can use the new
Timeout
settings to fix this. Expand the step which we click on the menu item.
Edit the step
by
Add timeout
and set it to
6000
milliseconds (equal to 6s).
Optionally, you can adjust the
Timeout
in the
Replay settings
for all the steps. Expand the
Replay settings
and edit the
Timeout
value.
Chromium issue:
1257499
Ensure your pages are cacheable with the Back/forward cache tab
Back/forward cache (or bfcache)
is a browser optimization that enables instant back and forward navigation.
The new
Back/forward cache
tab can help you test your pages to ensure they're optimized for bfcache, and identify any issues that may be preventing them from being eligible.
To test a particular page, navigate to it in Chrome and then in DevTools go to
Application
>
Back-forward Cache
. Next, click the
Test back/forward cache
button and DevTools will attempt to navigate away and back to determine whether the page could be restored from bfcache.
As web developers, it's critical to know how to optimize your pages for bfcache across all browsers because it will significantly improve the browsing experience for users?especially those with slower networks or devices.
Chromium issue:
1110752
New Properties pane filter
If you want to focus on a specific property in the
Properties
pane, you can now type that property name or value in the new
Filter
textbox.
By default, properties whose value is
null
or
undefined
are not shown. Enable the
Show all
checkbox to view all properties.
These enhancements allow you to get to the properties you care for quicker and thus improve your productivity!
Chromium issue:
1269674
Emulate the CSS forced-colors media feature
The
forced-colors
CSS media feature is used to detect if the user agent has enabled a forced colors mode (e.g. Windows High Contrast mode) where it enforces a user-chosen limited color palette on the page.
Open the
Command Menu
, run the
Show Rendering
command, and then set the
Emulate CSS media feature forced-colors
dropdown.
Chromium issue:
1130859
Show rulers on hover command
You can now open the
Command Menu
and run the
Show rulers on hover
command. The page rulers make it easier to measure the width and height of an element.
Previously, you can only enable the page rulers via
Settings
>
Show rulers
checkbox.
Chromium issue:
1270562
Support
row-reverse
and
column-reverse
in the Flexbox editor
The
Flexbox editor
added two new buttons to support
row-reverse
and
column-reverse
in
flex-direction
.
Chromium issue:
1263866
New keyboard shortcuts to replay XHR and expand all search results
Keyboard shortcuts to replay XHR in the Network panel
Select a XHR request in the
Network
panel and press
R
on the keyboard to replay the XHR. Previously, you can only replay the XHR via the context menu (right click >
Replay XHR
)
Chromium issue:
1050021
Keyboard shortcut to expand all search results
A new shortcut is added in the
Search
tab allowing you to expand and collapse all the search results. Previously, you could only expand and collapse the search results by clicking on one file at a time.
Open the search tab via
Esc
>
3-dot
menu >
Search
. Enter a search string (e.g. function) and press
Enter
to see the list of search results. Focus on the search results and use the following shortcut to expand/collapse the search files:
- Windows / Linux
-
Ctrl
+
Shift
+
{
or
}
- MacOS
-
Cmd
+
Options
+
{
or
}
Go to the
keyboard shortcuts
for reference of keyboard shortcuts in Chrome DevTools.
Chromium issue:
1255073
Lighthouse 9 in the Lighthouse panel
The
Lighthouse
panel is now running Lighthouse 9. Lighthouse will now list all the elements sharing the same id.
Non-unique element id is a common accessibility problem. For instance, the id referenced in an
aria-labelledby
attribute is used on
multiple elements
.
Check out the
What’s new in Lighthouse 9.0
for more details on the updates.
?
Chromium issue:
772558
Improved Sources panel
Loads of stability improvements in the
Sources
panel as we upgraded it to use
CodeMirror 6
. Here are few notable improvements:
- Significantly faster when opening large files (e.g. WASM, JavaScript)
- No more random scrolling when stepping through code
- Improved auto-complete suggestions for editable sources (e.g. snippets, local override)
Chromium issue:
1241848
Miscellaneous highlights
These are some noteworthy fixes in this release:
- Properly displaying the waterfall diagram of network requests. Previously, the style was broken. (
1275501
)
- The code highlight was broken when searching in documents with very long lines in the
Sources
panel. It’s now fixed. (
1275496
)
- No more duplicate
Payload
tab in network requests. (
1273972
)
- Fixed the missing layout shifts details in the
Summary
section of the
Performance
panel. (
1259606
)
- Support arbitrary characters (e.g.
,
,
.
), in
Network Search
queries. (
1267196
)
[Experimental] Endpoints in the Reporting API pane
The experimental
Reporting API
pane was introduced in
Chrome 96
to help you monitor the reports generated on your page and their status.
The
Endpoints
section is now available. It gives you an overview of all the endpoints configured in the
Reporting-Endpoints
header.
Learn to use the
Reporting API
to monitor security violations, deprecated API calls, and more.
Chromium issue:
1200732
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 126
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