DevTools now displays media players information in the
Media panel
.
Prior to the new media panel in DevTools, logging and debug information about video players could be
found in
chrome://media-internals
.
The new Media panel provides an easier way to view events, logs, properties, and a timeline of frame
decodes in the same browser tab as the video player itself. You can live view and inspect on
potential issues quicker (e.g. why dropped frames are occurring, why JavaScript is interacting with
the player in an unexpected way).
Chromium issue:
1018414
Capture node screenshots via Elements panel context menu
You can now capture node screenshots via the context menu in the Elements panel.
For example, you can take a screenshot of the table of content by right clicking the element and
select
Capture node screenshot
.
Chromium issue:
1100253
Issues tab updates
The Issues warning bar on the Console panel is now replaced with a regular message.
Third-party cookie issues are now hidden by default in the Issues tab. Enable the new
Include
third-party cookie issues
checkbox to view them.
Chromium issues:
1096481
,
1068116
,
1080589
Emulate missing local fonts
Open the
Rendering tab
and use the new
Disable local fonts
feature to emulate missing
local()
sources in
@font-face
rules.
For example, when the font "Rubik" is installed on your device and the
@font-face src
rule uses it
as a
local()
font, Chrome uses the local font file from your device.
When
Disable local fonts
is enabled, DevTools ignores the
local()
fonts and fetches them from
the network.
Oftentimes, developers and designers use two different copies of the same font during development:
- A local font for your design tools, and
- A web font for your code
Disabling local fonts makes it easier for you to:
- Debug and measure web fonts loading performance and optimization
- Verify correctness of your CSS
@font-face
rules
- Discover any differences between web fonts and their local versions
Chromium issue:
384968
Emulate inactive users
The
Idle Detection API
allows developers to detect inactive users and react on idle state
changes. You can now use DevTools to emulate idle state changes in the
Sensors
tab for both the
user state and the screen state instead of waiting for the actual idle state to change. You can open
the
Sensors
tab from the
Drawer
.
Chromium issue:
1090802
Emulate
prefers-reduced-data
The
prefers-reduced-data
media query detects if the user prefers being served alternate
content that uses less data for the page to be rendered.
You can now use DevTools to emulate the
prefers-reduced-data
media query.
Chromium issue:
1096068
Support for new JavaScript features
DevTools now has better support for some of the latest JavaScript language features:
- Logical assignment operators
- DevTools now supports logical assignment with the new
operators
&&=
,
||=
, and
??=
in the Console and Sources panels.
- Pretty-print
numeric separators
- DevTools now properly pretty-prints the numeric separators
in the Sources panel.
Chromium issues:
1086817
,
1080569
Lighthouse 6.2 in the Lighthouse panel
The Lighthouse panel is now running Lighthouse 6.2. Check out the
release notes
for a full
list of changes.
New audits in Lighthouse 6.2:
- Avoid long main thread tasks
. Reports the longest tasks on the main thread, useful for
identifying worst contributors to input delay.
- Links are crawlable
. Check if the
href
attribute of anchor elements links to an appropriate
destination, so the links can be discovered.
- Unsized image elements
- Check if an explicit
width
and
height
is set on image elements.
Explicit image size can reduce layout shifts and improve CLS.
- Avoid non-composited animations
. Reports
non-composited animations
that appear janky and
reduce CLS.
- Listens for the
unload
events
. Reports the
unload
event. Consider using the
pagehide
or
visibilitychange
events instead as the
unload
event does not fire reliably.
Updated audits in Lighthouse 6.2:
- Remove unused JavaScript
. Lighthouse will now enhance the audit if a page has
publicly-accessible JavaScript source maps.
Chromium issue:
772558
Deprecation of "other origins" listing in the Service Workers pane
DevTools now provides a link to view the full list of service workers from other origins in a new
browser tab -
chrome://serviceworker-internals/?devtools
.
Previously DevTools displayed a list nested under the
Application
panel >
Service workers
pane.
Chromium issue:
807440
Show coverage summary for filtered items
DevTools now recalculates and displays a summary of coverage information dynamically when filters
are applied in the
Coverage
tab. Previously, the
Coverage
tab always displayed a
summary of all coverage information.
In the example below notice how the summary initially says
446 kB of 2.0 MB (22%) used so far. 1.5 MB unused.
and then says
57 kB of 604 kB (10%) used so far. 546 kB unused.
after CSS filtering has been applied.
Chromium issue:
1061385
New frame details view in Application panel
DevTools now show a detailed view for each frame. Access it by clicking a frame under the
Frames
menu in the
Application
panel.
Chromium issue:
1093247
Frame details for opened windows
DevTools now displays opened windows / pop-ups under the frame tree as well. The frame details view
of the opened windows includes additional security information.
Chromium issue:
1107766
Security and isolation information (COEP / COOP)
DevTools now display secure context,
Cross-Origin-Embedder-Policy (COEP) and
Cross-Origin-Opener-Policy (COOP)
in the frame details.
More security information will be added to the frame details view soon.
Chromium issue:
1051466
Elements and Network panel updates
Accessible color suggestion in the Styles pane
DevTools now provides color suggestions for low color contrast text.
In the example below,
h1
has low contrast text. To fix it, open the color picker of the
color
property in the Styles pane. After you expand the
Contrast ratio
section, DevTools provides AA
and AAA color suggestions. Click on the suggested color to apply the color.
Chromium issue:
1093227
Reinstate
Properties
pane in the Elements panel
The Properties pane is back, it was
deprecated in Chrome 84
. In a future version of DevTools,
we are going to improve the workflow for inspecting properties of elements.
Chromium issue:
1105205
,
1116085
Human-readable
X-Client-Data
header values in the Network panel
When inspecting a network resource in the Network panel, DevTools now formats any
X-Client-Data
header values in Headers pane as code.
The
X-Client-Data
HTTP header contains a list of experiment IDs and Chrome flags that are enabled
in your browser. The raw header values look like opaque strings since they are base-64-encoded,
serialized
protocol buffers
. To make the contents more transparent to developers, DevTools is
now showing the decoded values.
Chromium issue:
1103854
Auto-complete custom fonts in the Styles pane
Imported font faces are now added to the list of CSS auto-completion when editing the
font-family
property in the
Styles
pane.
In this example,
'Noto Sans'
is a custom font installed in the local machine. It is displayed in
the CSS completion list. Previously, it was not.
Chromium issue:
1106221
Consistently display resource type in Network panel
DevTools now consistently displays the same resource type as the original network request and
appends
/ Redirect
to the
Type
column value when redirection (status 302) happens.
Previously DevTools changed the type to
Other
sometimes.
Chromium issue:
997694
The filter text boxes in the
Styles
pane and
Network
panel, as well as the DOM search text
box in the
Elements
panel, now have
Clear
buttons. Clicking
Clear
removes any text that
you have input.
Chromium issue:
1067184
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