New CSS Grid debugging tools
DevTools now has better support for CSS grid debugging!
When an HTML element on your page has
display: grid
or
display: inline-grid
applied to it, you
can see a
grid
badge next to it in the
Elements
panel. Click the badge to toggle the display
of a grid overlay on the page.
The new
Layout
pane has a
Grid
section offering you a number of options for viewing the
grids.
Check out the
documentation
to learn more.
Chromium issue:
1047356
New WebAuthn tab
You can now emulate authenticators and debug the
Web Authentication API
with the new
WebAuthn
tab
.
Select
More options
>
More tools
>
WebAuthn
to open the WebAuthn tab.
Prior to the new
WebAuthn
tab, there was no native WebAuthn debugging support on Chrome.
Developers needed physical authenticators to test their web application with Web Authentication API.
With the new
WebAuthn
tab, web developers can now emulate these authenticators, customize their
capabilities, and inspect their states, without the need of any physical authenticators. This makes
the debugging experience much easier.
Check out our
documentation
to learn more about the WebAuthn feature.
Chromium issue:
1034663
DevTools now support moving tools in DevTools between the top and bottom panel. This way, you can
view any two tools at once.
For example, if you would like to view
Elements
and
Sources
panel at once, you can right
click on the
Sources
panel, and select
Move to bottom
to move it to the bottom.
Similarly, you can move any bottom tab to the top by right clicking on a tab and select
Move to
top
.
Chromium issue:
1075732
Elements panel updates
You can now toggle the
Computed sidebar
pane in the Styles pane.
The
Computed sidebar
pane in the
Styles
pane is collapsed by default. Click on the button to
toggle it.
Chromium issue:
1073899
Grouping CSS properties in the Computed pane
You can now group the CSS properties by categories in the
Computed
pane.
With this new grouping feature, it will be easier to navigate in the
Computed
pane (less
scrolling) and selectively focus on a set of related properties for CSS inspection.
On the
Elements
panel, select an element. Toggle the
Group
checkbox to group/ungroup the CSS
properties.
Chromium issues:
1096230
,
1084673
,
1106251
Lighthouse 6.4 in the Lighthouse panel
The
Lighthouse
panel is now running Lighthouse 6.4. Check out the
release notes
for a full
list of changes.
New audits in Lighthouse 6.4:
- Preload fonts
. Validates if all fonts that use
font-display: optional
were preloaded.
- Valid source maps
. Audits if a page has valid source maps for large, first-party JavaScript.
- [Experimental] Large JavaScript library
. Large JavaScript libraries can lead to poor
performance. This audit suggests cheaper alternatives to common, large JavaScript libraries like
moment.js
.
Chromium issue:
772558
performance.mark()
events in the Timings section
The
Timings section
of a Performance recording now marks
performance.mark()
events.
New
resource-type
and
url
filters in the Network panel
Use the new
resource-type
and
url
keywords in the
Network panel
to filter network requests.
For example, use
resource-type:image
to focus on the network requests that are images.
Check out
filter requests by properties
to discover more special keywords like
resource-type
and
url
.
Chromium issues:
1121141
,
1104188
Frame details view updates
Display COEP and COOP
reporting to
endpoint
You can now view the Cross-Origin Embedder Policy (COEP) and Cross-Origin Opener Policy
(COOP)
reporting to
endpoint under the
Security & Isolation
section.
The
Reporting API
defines a new HTTP header,
Report-To
, that gives web developers a way to
specify server endpoints for the browser to send warnings and errors to.
Read this
article
to learn more about how to enable COEP and COOP and make your website
"cross-origin isolated".
Chromium issue:
1051466
Display COEP and COOP
report-only
mode
DevTools now displays
report-only
label for COEP and COOP that are set to
report-only
mode.
Watch this
video
to learn about how to prevent information leaks and enable COOP and COEP in
your website.
Chromium issue:
1051466
Deprecation of
Settings
in the More tools menu
The
Settings
in the More tools menu has been deprecated. Open the
Settings
from the main panel
instead.
Chromium issue:
1121312
Experimental features
View and fix color contrast issues in the CSS Overview panel
CSS Overview
panel now displays a list of low color contrast texts of your page.
In this example, the
demo page
has a low color contrast issue. Click on the issue, you can
view a list of elements that have the issue.
Click on an element in the list to open the element in
Elements
panel. DevTools
provides auto
color suggestion
to help you fix the low contrast text.
Chromium issue:
1120316
Customize keyboard shortcuts in DevTools
You can now customize the keyboard shortcuts for your favourite commands in DevTools.
Go to
Settings
>
Shortcuts
, hovering on a command and click the
Edit
button (pen icon)
to customize the keyboard shortcut.
To reset all shortcuts, click on
Restore default shortcuts
.
Chromium issue:
174309
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