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.
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:
- Preload Largest Contentful Paint (LCP) image. Audits if the image used by the LCP element is preloaded in order to improve your LCP time.
- Issues logged to the
Issuespanel. Indicates a list of unresolved issues in the
- Progressive Web Apps (PWA). The PWA Category changed fairly significantly.
The Installable group is now powered entirely by the capability checks that enable Chrome's installable criteria. These are the same signals seen in the Manifest pane.
- The "Registers a service worker…" audit moves to the PWA Optimized group, and the "Uses HTTPS" audit is now included as part of the key "installability requirements" audit.
- The Fast and reliable group is removed. As the revamped "installability requirements" audit includes offline-capability checking, the “current page and start_url respond with 200 when offline” audit was removed. The "Page load is fast enough on mobile network" audit was removed too.
Chromium issue: 772558
Elements panel updates
Support forcing the CSS
You can now use DevTools to force and inspect the CSS
In the Elements panel, select an element and toggle the element state. Enable the
:target checkbox to force and inspect the styles.
: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:
- Window/ Linux:
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
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.
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
performance.measureMemory() API status is now displayed under the API availability section.
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
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
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)
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).
Chromium issue: 1121900
To discuss the new features and changes in this post, or anything else related to DevTools:
- File definite bug reports and feature requests at Chromium Bugs.
- Discuss possible features, changes, and bugs on the Mailing List.
- Get help on how to use DevTools on Stack Overflow.
- Tweet us at @ChromeDevTools.
- File bugs on this document in the Web Fundamentals repository.
If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.
Discover DevTools features
Below is a list of everything that's been covered in the What's New In DevTools series.
- New CSS flexbox debugging tools
- New Core Web Vitals overlay
- Moved issue count to the Console status bar
- Report Trusted Web Activity issues
- New Trust Tokens pane in the Application panel
- Emulate the CSS color-gamut media feature
- Improved Progressive Web Apps tooling
Remote Address Spacecolumn in the Network panel
- Performance improvements
- Display allowed/disallowed features in the Frame details view
SamePartycolumn in the Cookies pane
- Deprecated non-standard
- Deprecation of
Don't show Chrome Data Saver warningin the Settings menu
- [Experimental] Automatic low-contrast issue reporting in the Issues tab
- [Experimental] Full accessibility tree view in the Elements panel
- Debugging support for Trusted Types violations
- Capture node screenshot beyond viewport
- New Trust Tokens tab for network requests
- Lighthouse 7 in the Lighthouse panel
- Support forcing the CSS
- New shortcut to duplicate element
- Color pickers for custom CSS properties
- New shortcuts to copy CSS properties
- New option to show URL-decoded cookies
- Clear only visible cookies
- New option to clear third-party cookies in the Storage pane
- Edit User-Agent Client Hints for custom devices
- Persist “record network log” setting
- View WebTransport connections in the Network panel
- “Online” renamed to “No throttling”
- New copy options in the Console, Sources panel, and Styles pane
- New Service Workers information in the Frame details view
- Measure Memory information in the Frame details view
- Provide feedback from the Issues tab
- Dropped frames in the Performance panel
- Emulate foldable and dual-screen in Device Mode
- [Experimental] Automate browser testing with Puppeteer Recorder
- [Experimental] Font editor in the Styles pane
- [Experimental] CSS flexbox debugging tools
- [Experimental] New CSP Violations tab
- [Experimental] New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)
- Faster DevTools startup
- New CSS angle visualization tools
- Emulate unsupported image types
- Simulate storage quota size in the Storage pane
- New Web Vitals lane in the Performance panel
- Report CORS errors in the Network panel
- Cross-origin isolation information in the Frame details view
- New Web Workers information in the Frame details view
- Display opener frame details for opened windows
- Open Network panel from the Service Workers pane
- Copy property value
- Copy stacktrace for network initiator
- Preview Wasm variable value on mouseover
- Evaluate Wasm variable in the Console
- Consistent units of measurement for file/memory sizes
- Highlight pseudo elements in the Elements panel
- [Experimental] CSS Flexbox debugging tools
- [Experimental] Customize chords keyboard shortcuts
- New CSS Grid debugging tools
- New WebAuthn tab
- Move tools between top and bottom panel
- New Computed sidebar pane in the Styles pane
- Grouping CSS properties in the Computed pane
- Lighthouse 6.3 in the Lighthouse panel
performance.mark()events in the Timings section
urlfilters in the Network panel
- Frame details view updates
- Deprecation of
Settingsin the More tools menu
- [Experimental] View and fix color contrast issues in the CSS Overview panel
- [Experimental] Customize keyboard shortcuts in DevTools
- New Media panel
- Capture node screenshots via Elements panel context menu
- Issues tab updates
- Emulate missing local fonts
- Emulate inactive users
- Lighthouse 6.2 in the Lighthouse panel
- Deprecation of “other origins” listing in the Service Workers pane
- Show coverage summary for filtered items
- New frame details view in Application panel
- Accessible color suggestion in the Styles pane
- Reinstate Properties pane in the Elements panel
X-Client-Dataheader values in the Network panel
- Auto-complete custom fonts in the Styles pane
- Consistently display resource type in Network panel
- Clear buttons in the Elements and Network panels
- Style editing for CSS-in-JS frameworks
- Lighthouse 6 in the Lighthouse panel
- First Meaningful Paint (FMP) deprecation
- New app shortcut warnings in the Manifest pane
- Service worker
respondWithevents in the Timing tab
- Consistent display of the Computed pane
- Bytecode offsets for WebAssembly files
- Line-wise copy and cut in Sources Panel
- Console settings updates
- Performance panel updates
- New icons for breakpoints, conditional breakpoints, and logpoints
- Fix site issues with the new Issues tab
- View accessibility information in the Inspect Mode tooltip
- Performance panel updates
- More accurate promise terminology in the Console
- Styles pane updates
- Deprecation of the Properties pane in the Elements panel
- App shortcuts support in the Manifest pane
- Emulate vision deficiencies
- Emulate locales
- Cross-Origin Embedder Policy (COEP) debugging
- New icons for breakpoints, conditional breakpoints, and logpoints
- View network requests that set a specific cookie
- Dock to left from the Command Menu
- The Settings option in the Main Menu has moved
- The Audits panel is now the Lighthouse panel
- Delete all Local Overrides in a folder
- Updated Long Tasks UI
- Maskable icon support in the Manifest pane
- Moto G4 support in Device Mode
- Cookie-related updates
- More accurate web app manifest icons
- Hover over CSS
contentproperties to see unescaped values
- Source map errors in the Console
- Setting for disabling scrolling past the end of a file
- Support for
classredeclarations in the Console
- Improved WebAssembly debugging
- Request Initiator Chains in the Initiator tab
- Highlight the selected network request in the Overview
- URL and path columns in the Network panel
- Updated User-Agent strings
- New Audits panel configuration UI
- Per-function or per-block code coverage modes
- Code coverage must now be initiated by a page reload
- Debug why a cookie was blocked
- View cookie values
- Simulate different prefers-color-scheme and prefers-reduced-motion preferences
- Code coverage updates
- Debug why a network resource was requested
- Console and Sources panels respect indentation preferences again
- New shortcuts for cursor navigation
- Multi-client support in the Audits panel
- Payment Handler debugging
- Lighthouse 5.2 in the Audits panel
- Largest Contentful Paint in the Performance panel
- File DevTools issues from the Main Menu
- Copy element styles
- Visualize layout shifts
- Lighthouse 5.1 in the Audits panel
- OS theme syncing
- Keyboard shortcut for opening the Breakpoint Editor
- Prefetch cache in the Network panel
- Private properties when viewing objects
- Notifications and push messages in the Application panel
- Autocomplete with CSS values
- A new UI for network settings
- WebSocket messages in HAR exports
- HAR import and export buttons
- Real-time memory usage
- Service worker registration port numbers
- Inspect Background Fetch and Background Sync events
- Puppeteer for Firefox
- Meaningful presets when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource's uncompressed size on hover
- Inline breakpoints in the Breakpoints pane
- IndexedDB and Cache resource counts
- Setting for disabling the detailed Inspect tooltip
- Setting for toggling tab indentation in the Editor
- Highlight all nodes affected by CSS property
- Lighthouse v4 in the Audits panel
- WebSocket binary message viewer
- Capture area screenshot in the Command Menu
- Service worker filters in the Network panel
- Performance panel updates
- Long tasks in Performance panel recordings
- First Paint in the Timing section
- Bonus tip: Shortcut for viewing RGB and HSL color codes (video)
- Detailed tooltips in Inspect Mode
- Export code coverage data
- Navigate the Console with a keyboard
- AAA contrast ratio line in the Color Picker
- Save custom geolocation overrides
- Code folding
- Frames tab renamed to Messages tab
- Bonus tip: Network panel filtering by property (video)
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
- Hover over a Live Expression result to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
- Picture-in-Picture breakpoints
- Bonus tip: Use
monitorEvents()to log a node's fired events in the Console (video)
- Live Expressions in the Console
- Highlight DOM nodes during Eager Evaluation
- Performance panel optimizations
- More reliable debugging
- Enable network throttling from the Command Menu
- Autocomplete Conditional Breakpoints
- Break on AudioContext events
- Debug Node.js apps with ndb
- Bonus tip: Measure real world user interactions with the User Timing API
- Eager Evaluation
- Argument hints
- Function autocompletion
- ES2017 keywords
- Lighthouse 3.0 in the Audits panel
- BigInt support
- Adding property paths to the Watch pane
- "Show timestamps" moved to Settings
- Bonus tip: Lesser-known Console methods (video)
- Search across all network headers
- CSS variable value previews
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- Network tab renamed to Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
- Bonus tip: Layers panel + Animations Inspector (video)
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides support for styles inside of HTML
- Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers in async code
- Bonus tip: Automate DevTools actions with Puppeteer (video)
- Performance Monitor
- Console Sidebar
- Group similar Console messages
- Bonus tip: Toggle hover pseudo-class (video)
- Multi-client remote debugging support
- Workspaces 2.0
- 4 new audits
- Simulate push notifications with custom data
- Trigger background sync events with custom tags
- Bonus tip: Event listener breakpoints (video)
- Top-level await in the Console
- New screenshot workflows
- CSS Grid highlighting
- A new Console API for querying objects
- New Console filters
- HAR imports in the Network panel
- Previewable cache resources
- More predictable cache debugging
- Block-level code coverage
- Mobile device throttling simulation
- View storage usage
- View when a service worker cached responses
- Enable the FPS meter from the Command Menu
- Set mousewheel behavior to zoom or scroll
- Debugging support for ES6 modules
- New Audits panel
- 3rd-Party Badges
- A new gesture for Continue To Here
- Step into async
- More informative object previews in the Console
- More informative context selection in the Console
- Real-time updates in the Coverage tab
- Simpler network throttling options
- Async stacks on by default
- CSS and JS code coverage
- Full-page screenshots
- Block requests
- Step over async await
- Unified Command Menu