Faster DevTools startup
The team did some optimization to reduce the performance overhead of serialisation, parsing and deserialisation during the startup.
There will be an upcoming engineering blog post explaining the implementation in detail. Stay tuned!
Chromium issue: 1029427
New CSS angle visualization tools
DevTools now has better support for CSS angle debugging!
When an HTML element on your page has CSS angle applied to it (e.g.
background: linear-gradient(angle, color-stop1, color-stop2),
transform: rotate(angle)), a clock icon is shown next to the angle in the Styles pane. Click on the clock icon to toggle the clock overlay. Click anywhere in the clock or drag the needle to change the angle!
There are mouse and keyboard shortcuts to change the angle value as well, check out our documentation to learn more!
Emulate unsupported image types
DevTools added two new emulations in the Rendering tab, allowing you to disable AVIF and WebP image formats. These new emulations make it easier for developers to test different image loading scenarios without having to switch browsers.
Suppose we have the following HTML code to serve an image in AVIF and WebP for newer browsers, with a fallback PNG image for older browsers.
<picture> <source srcset="test.avif" type="image/avif"> <source srcset="test.webp" type="image/webp"> <img src="test.png" alt="A test image"> </picture>
Open the Rendering tab, select “Disable AVIF image format” and refresh the page. Hover over the
img src. The current image src (
currentSrc) is now the fallback WebP image.
Chromium issue: 1130556
Simulate storage quota size in the Storage pane
You can now override storage quota size in the Storage pane. This feature gives you the ability to simulate different devices and test the behavior of your apps in low disk availability scenarios.
Go to Application > Storage, enable the Simulate custom storage quota checkbox, and enter any valid number to simulate the storage quota.
New Web Vitals lane in the Performance panel recordings
Performance recordings now have an option to display Web Vitals information.
After recording your load performance, enable the Web Vitals checkbox in the Performance panel to view the new Web Vitals lane.
Check out web.dev/vitals to learn more about how to optimize user experience with the Web Vitals metrics.
Chromium issue: N/A
Report CORS errors in the Network panel
DevTools now shows CORS error when a network request is failed due to Cross-origin Resource Sharing (CORS).
In the Network panel, observe the failed CORS network request. The status column shows “CORS error”. Hover over on the error, the tooltip now shows the error code. Previously, DevTools only showed generic “(failed)” status for CORS errors.
This lays the foundation for our next enhancements on providing more detailed description of the CORS problems!
Chromium issue: 1141824
Frame details view updates
Cross-origin isolation information in the Frame details view
The cross-origin isolated status is now displayed under the Security & Isolation section.
The new API availability section displays the availability of
SharedArrayBuffers (SAB) and whether they can be shared using
A deprecation warning will show if the SAB and
postMessage() is currently available,
but the context is not cross-origin isolated. Learn more about cross-origin isolation and why it will be required for features like
SharedArrayBuffers in this article.
Chromium issue: 1139899
New Web Workers information in the Frame details view
DevTools now displays dedicated web workers under the frame which creates them.
In the Application panel, expand a frame with web workers, then select a worker under the Workers tree to view the web worker's details.
Display opener frame details for opened windows
You can now view the details about which frame caused the opening of another Window.
Select an opened window under the Frames tree to view the window details. Click on the Opener Frame link to reveal the opener in the Elements panel.
Chromium issue: 1107766
Open Network panel from the Service Workers pane
View all service worker (SW) request routing information with the new Network requests link. This provides developers added context when debugging the SW.
Go to Application > Service Workers, click on the Network requests of a SW. The Network panel is opened in the bottom panel displaying all service worker related requests (the network requests are filtered by “is:service-worker-intercepted”).
Chromium issue: N/A
New copy options in the Network panel
Copy property value
The new “Copy value” option in the context menu lets you copy the property value of a network request.
In the Network panel, click on a network request to open the Headers pane. Right click on one of the properties under these section: Request payload (JSON) Form Data Query String Parameters Request Headers Response Headers
Then, you can select Copy value to copy the property value to your clipboard.
Chromium issue: 1132084
Copy stacktrace for network initiator
Right-click a network request, then select Copy stacktrace to copy the stacktrace to your clipboard.
Chromium issue: 1139615
Wasm debugging updates
Preview Wasm variable value on mouseover
When hovering over a variable in WebAssembly (Wasm) disassembly while paused on a breakpoint, DevTools now shows the variable current value.
In the Sources panel, open a Wasm file, put a breakpoint and refresh the page. Hover to a variable to see the value.
Evaluate Wasm variable in the Console
You can now evaluate Wasm variable in the Console while paused on a breakpoint.
In this example, we put a breakpoint on the line
local.get $input. When debugging, type
$input in the Console will return the current value of the variable, which is
4 in this case.
Chromium issue: 1127914
Consistent units of measurement for file/memory sizes
DevTools now consistently use kB for displaying file/memory sizes. Previously DevTools mixed kB (1000 bytes) and KiB (1024 bytes). For example, the Network panel previously used “kB” labels but actually performed calculations using KiB, which caused needless confusion.
Chromium issue: 1035309
Highlight pseudo elements in the Elements panel
DevTools has increased the color contrast of pseudo elements to help you better spot them.
Chromium issue: 1143833
CSS Flexbox debugging tools
Flexbox debugging tools are coming!
For starters, DevTools now shows a
flex badge in the Elements panel for elements with
display: flex applied to it.
Beside that, new alignment icons are added in the following flexbox properties:
On top of that, these icons are context-aware. The icon direction will be adjusted according to:
These icons aim to help you better visualize the flexbox layout of the page.
Here is the design doc of the Flexbox tooling features. More features will be added soon.
Give it a try and let us know what you think!
Customize chords keyboard shortcuts
DevTools added experimental support for customize keyboard shortcuts since last release.
You can now create chords (a.k.a multi-keypress shortcuts) in the shortcut editor.
Go to Settings > Shortcuts, hovering on a command and click the Edit button (pen icon) to customize the chords shortcut.
Chromium issue: 174309
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.
- 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