New CSS flexbox debugging tools
DevTools now has dedicated CSS flexbox debugging tools!
When an HTML element on your page has
display: flex
or
display: inline-flex
applied to it, you
can see a
flex
badge next to it in the Elements panel. Click the badge to toggle the display of a
flex overlay on the page.
In the
Styles
pane, you can click on the new icon next to the
display: flex
or
display: inline-flex
to open the
Flexbox
editor. Flexbox editor provides a quick way to edit
the flexbox properties. Try it yourself!
In addition, the
Layout
pane has a
Flexbox
section, display all the flexbox elements on the
page. You can toggle the overlay of each element.
Chromium issues:
1166710
,
1175699
New Core Web Vitals overlay
Better visualize and measure your page performance with the new Core Web Vitals overlay.
Core Web Vitals
is an initiative by Google to provide unified guidance for quality signals that
are essential to delivering a great user experience on the web.
Open the
Command Menu
, run the
Show Rendering
command, and then enable the
Core Web
Vitals
checkbox.
The overlay currently displays:
- Largest Contentful Paint (LCP)
: measures
loading performance
. To provide a good user
experience, LCP should occur
within 2.5 seconds
of when the page first starts loading.
- First Input Delay (FID)
: measures
interactivity
. To provide a good user experience, pages
should have a FID of
less than 100 milliseconds
.
- Cumulative Layout Shift (CLS)
: measures
visual stability
. To provide a good user
experience, pages should maintain a CLS of
less than 0.1
.
Chromium issue:
1152089
Issues tab updates
Moved issue count to the Console status bar
A new issue count button is now added in the
Console status bar
to improve the visibility of
issues warnings. This will replace the issue message in the
Console
.
Chromium issue:
1140516
Report Trusted Web Activity issues
The
Issues tab
now reports
Trusted Web Activity
issues. This aims to help developers
understand and fix the Trusted Web Activity issues of their sites, improving the quality of their
applications.
Open a Trusted Web Activity. Then, open the
Issues
tabs by clicking on the
Issues count
button in the
Console
status bar to view the issues. Watch this
talk
by Andre to learn
more about how to create and deploy Trusted Web Activity.
Chromium issue:
1147479
Format strings as (valid) JavaScript string literals in the Console
Now, the
Console
formats strings as valid JavaScript string literals in the Console. Previously,
the
Console
would not escape double quotes when printing strings.
Chromium issue:
1178530
New Trust Tokens pane in the Application panel
DevTools now displays all available Trust Tokens in the current browsing context in the new
Trust
Tokens
pane, under the
Application
panel.
Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive
tracking. Learn how to
get started with Trust Tokens
.
Chromium issue:
1126824
Emulate the CSS color-gamut media feature
The
color-gamut
media query lets you test the approximate range of colors that are supported
by the browser and the output device. For example, if the
color-gamut: p3
media query matches, it
means that the user's device supports the Display-P3 colorspace.
Open the
Command Menu
, run the
Show Rendering
command, and then set the
Emulate CSS
media feature color-gamut
dropdown.
Chromium issue:
1073887
Improved Progressive Web Apps tooling
DevTools now display a more detailed
Progressive Web Apps (PWA)
installability warning message
in the
Console
, with a link to
documentation
.
The
Manifest
pane now shows a warning message if the manifest
description
exceeds 324
characters.
In addition, the
Manifest
pane now shows a warning message if the screenshot of the PWA doesn't
match the requirements. Learn more about the PWA
screenshots
property and its requirements
here.
Chromium issue:
1146450
,
1169689
,
965802
New
Remote Address Space
column in the Network panel
Use the new
Remote Address Space
column in the Network panel to see the network IP address space
of each network resource.
Chromium issue:
1128885
Performance improvements
Page loads performance with DevTools opened are now improved. In some extreme cases we saw
10x
performance improvements.
DevTools collects stack traces and attaches them to console messages or asynchronous tasks for later
consumption by the developer in case of an issue. Since this collection has to happen synchronously
in the browser engine, slow stack trace collection can significantly slow down the page with
DevTools open. We've managed to reduce the overhead of stack trace collection significantly.
Stay tuned for a more detailed engineering blog post explained on the implementation.
Chromium issues:
1069425
,
1077657
Display allowed/disallowed features in the Frame details view
Frame details view now shows a list of allowed and disallowed browser features controlled by the
Permissions policy.
Permissions policy
is a web platform API which gives a website the ability to allow or block
the use of browser features in its own frame or in iframes that it embeds.
Chromium issue:
1158827
New
SameParty
column in the Cookies pane
The Cookies pane in the Application panel now displays the
SameParty
attribute of the cookies. The
SameParty
attribute is a new boolean attribute to indicate whether a cookie should be included in
requests to origins of the same
First-Party Sets
.
Chromium issue:
1161427
Deprecated non-standard
fn.displayName
support
Support for the non-standard
fn.displayName
has been deprecated. Use
fn.name
instead.
Chrome has traditionally supported the non-standard
fn.displayName
property as a way for
developers to control debug names for functions that show up in
error.stack
and in DevTools stack
traces. In the example above, the
Call Stack
would previously show
noLongerSupport
.
Replace
fn.displayName
with the standard
fn.name
, which was made configurable (via
Object.defineProperty
) in ECMAScript 2015 to replace the non-standard
fn.displayName
property.
Support for
fn.displayName
has been unreliable and not consistent across browser engines. It slows
down stack trace collection, a cost that developers always pay no matter whether they actually use
fn.displayName
or not.
Chromium issue:
1177685
Deprecation of
Don't show Chrome Data Saver warning
in the Settings menu
The
Don't show Chrome Data Saver warning
setting is removed because
Chrome Data Saver has been
deprecated
.
Chromium issue:
1056922
Experimental features
Automatic low-contrast issue reporting in the Issues tab
DevTools added experimental support for reporting contrast issues in the Issues tab automatically.
Low-contrast text
is the most common automatically-detectable accessibility issue on the web.
Displaying these issues in the Issues tab helps developers discover these issues easier.
Open a page with low-contrast issues (e.g. this
demo
). Then, open the
Issues
tabs by
clicking on the
Issues count
button in the
Console
status bar to view the issues.
Chromium issue:
1155460
Full accessibility tree view in the Elements panel
You can now toggle to view the new and improved full accessibility tree view of a page.
The current
accessibility pane
provides a limited display of its nodes, only showing the
direct ancestor chain from the root node to the inspected node. The new accessibility tree view aims
to improve that and makes the accessibility tree more explorable, useful, and easier for developers
to use.
After enabling the experiment, a new button will show in the
Elements
panel, click to switch
between the existing DOM tree and the full accessibility tree.
Please note that this is an early-stage experiment. We plan to improve and expand the functionality
over time.
Chromium issue:
887173
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