Debugging support for Trusted Types violations
Breakpoint on Trusted Type violations
You can now set breakpoints and catch exceptions on Trusted Type Violations in the
Sources
panel.
Trusted Types
API helps you prevent DOM-based cross-site scripting vulnerabilities. Learn how
to write, review and maintain applications free of DOM XSS vulnerabilities with Trusted Types
here
.
In the
Sources
panel, open the
debugger
sidebar pane. Expand the
CSP Violation
Breakpoints
section and enable the
Trusted Type violations
checkbox to pause on the
exceptions. Try it yourself with
this demo page
.
Chromium issue:
1142804
Link issue in the Sources panel to the Issues tab
The
Sources
panel now shows a warning icon next to the line that violates Trusted Type. Hover on
it to preview the exception. Click on it to expand the
Issues
tab, it provides more details on
the exceptions and guidance on how to fix it.
Chromium issue:
1150883
Capture node screenshot beyond viewport
You can now capture node screenshots for a full node, including content below the fold. Previously,
the screenshot was cut off for content not visible in the viewport. The full-page screenshots are
precise now as well.
In the
Elements
panel, right click on an element and select
Capture node screenshot
.
Chromium issue:
1003629
New Trust Tokens tab for network requests
Inspect the Trust Token network requests with the new
Trust Tokens
tab.
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
.
Further debugging support will come in the next releases.
Chromium issue:
1126824
Lighthouse 7 in the Lighthouse panel
The
Lighthouse
panel is now running Lighthouse 7. Check out the
release notes
for a full
list of changes.
New audits in Lighthouse 7:
Chromium issue:
772558
Elements panel updates
Support forcing the CSS
:target
state
You can now use DevTools to force and inspect the CSS
:target
state.
In the
Elements
panel, select an element and toggle the element state. Enable the
:target
checkbox to force and inspect the styles.
Use the
:target
pseudo-class to style element when the hash in the URL and the id of an element
are the same. Check out
this demo
to try it yourself. This new DevTools feature lets you test
such styles without having to manually change the URL all the time.
Chromium issue:
1156628
New shortcut to duplicate element
Use the new
Duplicate element
shortcut to clone an element instantly.
Right click an element in the
Elements
panel, select
Duplicate element
. A new element will
be created under it.
Alternatively, you can duplicate element with keyboard shortcuts:
- Mac:
Shift
+
Option
+
??
- Window/ Linux:
Shift
+
Alt
+
??
Chromium issues:
1150797
,
1150797
Color pickers for custom CSS properties
The
Styles
pane now shows color pickers for custom CSS properties.
In addition, you can hold the
Shift
key and click on color picker to cycle through the RGBA, HSLA,
and Hex representations of the color value.
Chromium issue:
1147016
New shortcuts to copy CSS properties
You can now copy CSS properties quicker with a few new shortcuts.
In the
Elements
panel, select an element. Then, right-click on a CSS class or a CSS property in
the
Styles
pane to copy the value.
Copy options for CSS class:
- Copy selector
. Copy the current selector name.
- Copy rule
. Copy the rule of the current selector.
- Copy all declarations
: Copy all declarations under the current rule, including invalid and
prefixed properties.
Copy options for CSS property:
- Copy declaration
. Copy the declaration of the current line.
- Copy property
. Copy the property of the current line.
- Copy value
: Copy the value of the current line.
Chromium issue:
1152391
Cookies updates
New option to show URL-decoded cookies
You can now opt to view the URL-decoded cookies value in the
Cookies
pane.
Go to the
Application
panel and select the
Cookies
pane. Select any cookie on the list.
Enable the new
Show URL decoded
checkbox to view the decoded cookie.
Chromium issue:
997625
Clear only visible cookies
The
Clear all cookies
button in the Cookies pane is now replaced by
Clear filtered cookies
button.
In the
Application
panel >
Cookies
pane, enter text in the textbox to filter the cookies. In
our example here, we filter the list by "PREF". Click on the
Clear filtered cookies
button to
delete the visible cookies. Clear the filter text and you will see the other cookies remain in the
list. Previously, you only had the option to clear all cookies.
Chromium issue:
978059
New option to clear third-party cookies in the Storage pane
When clearing the site data in the
Storage
pane, DevTools now clear only first-party cookies by
default. Enable the
including third-party cookies
to clear the third-party cookies as well.
Chromium issue:
1012337
Edit User-Agent Client Hints for custom devices
You can now edit User-Agent Client Hints for custom devices.
Go to
Settings
>
Devices
and click on
Add custom device...
. Expand the
User agent
client hints
section to edit the client hints.
User-Agent Client Hints are an alternative to User-Agent string that enables developers to access
information about a user's browser in a privacy-preserving and ergonomic way. Learn more about
User-Agent Client Hints in
web.dev/user-agent-client-hints/
.
Chromium issue:
1073909
Network panel updates
Persist "record network log" setting
DevTools now persist the "Record network log" setting. Previously, DevTools reset the user's choice
whenever a page reloads.
Chromium issue:
1122580
View WebTransport connections in the Network panel
Network panel now displays WebTransport connections.
WebTransport is a new API offering low-latency, bidirectional, client-server messaging. Learn more
about its use cases, and how to give feedback about the future of the implementation in
web.dev/webtransport/
.
Chromium issue:
1152290
"Online" renamed to "No throttling"
The network emulation option "Online" is now renamed to "No Throttling".
Chromium issue:
1028078
New copy options in the Console, Sources panel, and Styles pane
New shortcuts to copy object in the Console and Sources panel
You can now copy object values with the new shortcuts in the Console and Sources panel. This is
handy especially when you have a large object (e.g. a long array) to copy.
Chromium issues:
1149859
,
1148353
New shortcuts to copy file name in the Sources panel and Styles pane
You can now copy file name by right clicking on:
- a file in the
Sources
panel, or
- the file name in the
Styles pane
in the
Elements
panel
Select
Copy file name
from the context menu to copy the file name.
Chromium issue:
1155120
Frame details view updates
New Service Workers information in the Frame details view
DevTools now displays dedicated service workers under the frame which creates them.
In the
Application
panel, expand a frame with service workers, then select a service worker
under the
Service Workers
tree to view the details.
Chromium issue:
1122507
Measure Memory information in the Frame details view
The
performance.measureMemory()
API status is now displayed under the
API availability
section.
The new
performance.measureMemory()
API estimates the memory usage of the entire web page. Learn
how to monitor your web page's total memory usage with this new API in
this article
.
Chromium issue:
1139899
Provide feedback from the Issues tab
If you ever want to improve an issue message, go to the
Issues
tab from the
Console
or
More Settings
>
More tools
>
Issues
> to open the
Issues
tab. Expand an issue
message, and click on the
Is the issue message helpful to you?
, then you can provide feedback in
the pop up.
Dropped frames in the Performance panel
When
analyzing load performance in the Performance panel
, the
Frames
section now marks
dropped frames as red. Hover on it to find out the frame rate.
Chromium issue:
1075865
Emulate foldable and dual-screen in Device Mode
You can now emulate dual-screen and foldable devices in DevTools.
After
enabling the Device Toolbar
, select one of these devices:
Surface Duo
or
Samsung
Galaxy Fold
.
Click on the new span icon to toggle between single-screen or folded and dual-screen or unfolded
postures.
You can also enable the
Experimental Web Platform features
to access the new CSS media
screen-spanning
feature and JavaScript
getWindowSegments
API. The experimental icon displays the
state of the
Experimental Web Platform features
flag. The icon is highlighted when the flag is
turned on. Navigate to
chrome://flags
and toggle the flag.
Chromium issue:
1054281
Experimental features
Automate browser testing with Puppeteer Recorder
DevTools can now generate
Puppeteer
scripts based on your interaction with the browser, making
it easier for you to automate browser testing. Puppeteer is a Node.js library which provides a
high-level API to control Chrome or Chromium over the
DevTools Protocol
.
Go to
this demo page
. Open the
Sources
panel in DevTools. Select the
Recording
tab on
the left pane. Add a new recording and name the file (e.g. test01.js).
Click on the
Record
button at the bottom to start recording the interaction. Try to fill in the
on-screen form. Observe that Puppeteer commands are appended to the file accordingly. Click on the
Record
button again to stop the recording.
To run the script, follow the
Getting started guide
in Puppeteer official site.
Please note that this is an early-stage experiment. We plan to improve and expand the Recorder
functionality over time.
Chromium issue:
1144127
Font editor in the Styles pane
The new Font Editor is a popover editor in the
Styles pane
for font related properties to help
you find the perfect typography for your webpage.
The popover provides a clean UI to dynamically manipulate typography with a series of intuitive
input types.
Chromium issue:
1093229
CSS flexbox debugging tools
DevTools added experimental support for
flexbox debugging since last release
.
DevTools now draws a guiding line to help you better visualize the CSS
align-items
property. The
CSS
gap
property is supported as well. In our example here, we have CSS
gap: 12px;
. Notice the
hatching pattern for each gap.
Chromium issue:
1139949
New CSP Violations tab
View all
Content Security Policy (CSP)
violations at a glance in the new
CSP Violations
tab.
This new tab is an experiment that should make it easier to work with web pages with a large amount
of CSP and Trusted Type violations.
Chromium issue:
1137837
New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)
The
Advanced Perceptual Contrast Algorithm (APCA)
is replacing the
AA
/
AAA
guidelines contrast ratio in the
Color Picker
.
APCA is a new way to compute contrast based on modern research on color perception. Compared to
AA/AAA guidelines, APCA is more context-dependent. The contrast is calculated based on the text's
spatial properties (font weight & size), color (perceived lightness difference between text and
background), and context (ambient light, surroundings, intended purpose of the text).
The example show the APCA threshold is
38%
. The contrast ratio must meet or exceed the listed value. This value is calculated based on font weight and size, referring to this
APCA lookup table
.
Chromium issue:
1121900
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