New Media panel
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
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.
Emulate missing local fonts
Open the Rendering tab and use the new Disable local fonts feature to emulate missing
local() sources in
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
- 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
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
- Logical assignment operators - DevTools now supports logical assignment with the new operators
??=in the Console and Sources panels.
- Pretty-print numeric separators - DevTools now properly pretty-prints the numeric separators in the Sources panel.
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
hrefattribute of anchor elements links to an appropriate destination, so the links can be discovered.
- Unsized image elements - Check if an explicit
heightis 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
unloadevents. Reports the
unloadevent. Consider using the
visibilitychangeevents instead as the
unloadevent does not fire reliably.
Updated audits in Lighthouse 6.2:
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 -
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
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.
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.
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
Chromium issue: 997694
Clear buttons in the Elements and Network panels
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
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 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