Web Vitals information pop up in the Performance panel
Hover on a Web Vitals marker in the
Performance
panel to understand what's the indicator about - whether the performance is good, needs improvement, or poor.
Chromium issue:
1147872
Visualize CSS scroll-snap
You can now toggle the
scroll-snap
badge in the
Elements
panel to inspect the CSS scroll-snap alignment.
When an HTML element on your page (e.g. this
demo
page) has
scroll-snap-type
applied to it, you can see a
scroll-snap
badge next to it in the
Elements
panel. Click the badge to toggle the display of a scroll-snap overlay on the page.
In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.
Chromium issue:
862450
New Memory inspector
Use the new
Memory inspector
to inspect an
ArrayBuffer
in JavaScript, as well as the Wasm memory.
Open
this demo page
. In the
Sources
panel, open the
demo-js.js
file, and set a breakpoint at line 18.
Refresh the page. Expand the
Scope
section in the right
debugger
pane. Notice the new icon next to the
buffer
value. Click on it to reveal the
Memory Inspector
.
Check out the documentation to learn more about
inspecting JavaScript
ArrayBuffer
and
WebAssembly.Memory
with this new Memory inspector.
Chromium issue:
1166577
New badge settings pane in the Elements panel
You can now selectively enable or disable badges via the
Badge settings
in the
Elements
panel. Use this feature to customize and stay focused on the important badges while inspecting web pages.
In the
Elements
panel, right click on any elements. Select
Badge settings
from the context menu, the badge settings pane appears on top. Enable or disable any checkbox to show/hide the badges.
Chromium issue:
1066772
Enhanced image preview with aspect ratio information
Image previews in the
Elements
panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.
This information helps you better understand your images and apply optimization if you need to.
The image aspect ratio information is available in the
Network
panel as well when you click to preview the image.
Chromium issues:
1149832
,
1170656
New network conditions button with options to configure
Content-Encoding
s
A new network conditions button is added in the
Network
panel. Click on it to open the
Network conditions
tab.
A new
Accepted Content-Encodings
option is added to the
Network conditions
tab. Configure it to test if server responses are encoded correctly in browsers that do not support gzip, brotli, or other future
Content-Encoding
s.
Chromium issue:
1162042
Styles pane enhancements
New shortcut to view computed value in the Styles pane
You can now right click on a CSS property in the
Styles
pane and select
View computed value
to view the computed CSS value.
Chromium issue:
1076198
Support for the
accent-color
keyword
The Styles pane's autocomplete UI now detects the
accent-color
CSS keyword, which allows web developers to specify the accent color for UI controls (e.g. checkbox, radio button) generated by the element.
The
accent-color
CSS property is
currently experimental
. Please enable
chrome://flags/#enable-experimental-web-platform-features
to test it.
Chromium issue:
1092093
Categorize issue types with colors and icons
The
Issues
tab now categorize issues into page errors, upcoming breaking changes, and possible improvements for better severity indication. You can open the
Issues
tab by clicking on the
issue count
button in the
Console
.
- Page errors (red)
. Issues that have immediate impact for page functionality, such as not setting correct
CORS
headers, etc.
- Upcoming breaking changes (yellow)
. Issues that inform about an upcoming, incompatible change of the web platform that may result in a loss of page functionality (e.g. warning of upcoming
CORS RFC 1918 changes
).
- Possible improvements (blue)
. Potential improvements on the page, but are currently not impairing basic functionality of the page (e.g. accessibility issues)
Chromium issue:
1183241
Delete Trust tokens
You can now delete trust tokens with the new delete button in the
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
View details on blocked features in the Frame details view
You can now view details on blocked features under the
Permissions policy
section in the Frame details view.
Open this
demo
page. Go to the
Application
panel and select a frame. In the
Permissions Policy
section, scroll to the
Disabled Features
property. Click on
Show details
to view the details on why the feature is blocked. Click on the icon next to each policy to navigate to the iframe or network request that blocked the feature.
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
Filter experiments in the Experiments setting
Find experiments quicker with the new experiment filter. For example, go to
Settings
>
Experiments
, in the
Filter
textbox, type "contrast" to filter all the experiments with the word "contrast".
Use the new
Vary Header
column in the
Cache Storage
pane to view the
Vary
HTTP response header.
Chromium issue:
1186049
Sources panel improvements
Support for new JavaScript features
DevTools now support the new
private brand check
JavaScript language feature, a.k.a
#foo in obj
.
This private brand checks feature extends the
in operator
to support the
private class fields
testing on any given object.
Try it out in the
Console
and
Sources
panel. You can inspect the private fields in the
Scope
section under the
debugger
pane as well.
Chromium issue:
11374
Enhanced support for breakpoints debugging
DevTools now properly set breakpoints in multiple scripts correctly. Modern JavaScript bundlers (e.g.
Webpack
,
Rollup
) support code splitting feature - there are scenarios where one shared component can be included in multiple routes (code splits).
Previously, DevTools was only able to set breakpoints on one raw location. With this latest improvement, DevTools can set breakpoints in all relevant locations correctly.
Chromium issues:
1142705
,
979000
,
1180794
Support hover preview with
[]
notation
DevTools now support for hover preview on JavaScript member expressions that use the
[]
notation in the
Sources
panel.
Chromium issue:
1178305
Improved outline of HTML files
DevTools now has better outline support for HTML files. In the
Sources
panel, open a HTML file. You can toggle the code outline with keyboard Cmd + Shift + O in Mac or Ctrl + Shift + O in Windows.
In the example below, DevTools now correctly list all functions in the outline. Previously, DevTools only showed some of the functions.
Chromium issue:
761019
,
1191465
Proper error stack traces for Wasm debugging
DevTools now resolves inline function calls and shows proper error stack traces for Wasm debugging.
Previously DevTools only displayed generic Wasm references in the Error stack traces.
The old version of Chrome on the left does not show the source location (e.g.
dsquare
) in the Error stack traces, whereas the new version on the right does.
Chromium issue:
1189161
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