Editable CSS container queries in the Styles pane
You can now view and edit
CSS container queries
in the
Styles
pane.
Container queries provide a much more dynamic approach to responsive design. The
@container
at-rule works in a similar way to a media query with
@media
. However, instead of querying the viewport and user agent for information,
@container
queries the ancestor container that matches certain criteria.
In the
Elements
panel, click on a DOM element with
@container
at-rule, DevTools now displays the
@container
information in the
Styles
pane. Click on it to edit the size. The
Styles
pane displays the corresponding container information too. Hover on it to highlight the container element on the page and check the container size. Click on it to select the container element.
The container queries feature is experimental currently. Please turn on the
#enable-container-queries
flag under
chrome://flags
to test it.
Chromium issue:
1146422
Web bundle preview in the Network panel
Web bundle
is a file format for encapsulating one or more HTTP resources in a single file. You can now preview the web bundle content in the
Network
panel.
The web bundle feature is experimental currently. Please enable
#enable-experimental-web-platform-features
flag under
chrome://flags
to test it.
Chromium issue:
1182537
Attribution Reporting API debugging
Attribution Reporting API errors are now reported in the
Issues
tab.
Attribution Reporting
is a new API to help you measure when a user action (such as an ad click or view) leads to a conversion, without using cross-site identifiers.
Chromium issue:
1190735
Better string handling in the Console
New context menu in the
Console
allows you to copy any string in as content, JavaScript literal or JSON literal.
In Chrome 90, DevTools updated the
Console
to always
format string outputs as valid JSON literals
. We received feedback from the developers that this change could be confusing, some feel that the amount of escaping is excessive and makes the output unreadable.
The
Console
now formats string outputs as valid JavaScript literals, and furthermore provides you 3 copy string options. The
Copy as JavaScript literal
option will escape appropriate special characters and wrap the string in either single quotes, double quotes, or backticks depending on the string content. The
Copy string contents
instead copies the raw string contents (including new lines and other special characters) verbatim to the clipboard. Finally,
Copy as JSON literal
formats the string as a valid JSON literal and copies it to the clipboard.
Chromium issue:
1208389
Improved CORS debugging
CORS-related TypeErrors in the
Console
are now linked to the Network panel and Issues tab.
Click on the two new icons next to the CORS-related error message to view the network request, or understand the error message further and get potential solutions in the Issues tab.
Chromium issue:
1213393
Lighthouse 8.1
The
Lighthouse
panel is now running Lighthouse 8.1.
If your site exposes source maps to Lighthouse, look for the
View Treemap
button to see a breakdown of your shipped JavaScript, filterable by size and coverage on load.
The report also includes a new metric filter (Refer to the
Show audits relevant to
filter in the screenshot). Pick a metric to focus on the opportunities and diagnostics most relevant to improving just that metric.
The
Performance Category
had a number of scoring changes to align with other performance tools and to better reflect the state of the web.
Check out the
release notes
for a full list of changes.
Chromium issue:
772558
Display new note URL in the Manifest pane
The Manifest pane now displays the the
new note URL
.
Currently on ChromeOS (CrOS), Chrome Apps and Android Apps that declare a "new-note" capability may be selected as a note-taking app in the Stylus settings (shows up if the CrOS device has been used with a stylus). When selected as a note-taking app, the app can be launched from the stylus palette's "Create Note" button. Adding
new-note-url
field in the application manifest is part of the effort to add equivalent functionality to web apps.
Chromium issue:
1185678
Fixed CSS matching selectors
DevTools fixed the CSS matching selectors, it was not working in the last release.
The comma separated selectors in the
Styles
pane are colored differently depending on whether they match the selected DOM node:
- An unmatched portion is shown in a light grey.
- A matching selector portion is shown in black.
Chromium issue:
1219153
Pretty-printing JSON responses in the Network panel
You can now pretty print JSON responses in the
Network
panel.
Open a JSON response in the
Network
panel, click on the
{}
icon to pretty-print it.
Chromium bug:
998674
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