Discover

Discover DevTools features {: #discover }

Below is a list of everything that's been covered in the What's New In DevTools series.

Chrome 90 {: #discover90 .hide-from-toc }

• New CSS flexbox debugging tools
• New Core Web Vitals overlay
• Moved issue count to the Console status bar
• Report Trusted Web Activity issues
• Format strings as (valid) JavaScript string literals in the Console
• New Trust Tokens pane in the Application panel
• Emulate the CSS color-gamut media feature
• Improved Progressive Web Apps tooling
• New Remote Address Space column in the Network panel
• Performance improvements
• Display allowed/disallowed features in the Frame details view
• New SameParty column in the Cookies pane
• Deprecated non-standard fn.displayName support
• Deprecation of Don't show Chrome Data Saver warning in the Settings menu
• [Experimental] Automatic low-contrast issue reporting in the Issues tab
• [Experimental] Full accessibility tree view in the Elements panel

Chrome 89 {: #discover89 .hide-from-toc }

• 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 :target state
• 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)

Chrome 88 {: #discover88 .hide-from-toc }

• 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

Chrome 87 {: #discover87 .hide-from-toc }

• 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
• New resource-type and url filters in the Network panel
• Frame details view updates
• Deprecation of Settings in the More tools menu
• [Experimental] View and fix color contrast issues in the CSS Overview panel
• [[Experimental] Customize keyboard shortcuts in DevTools](/web/updates/2020/10/devtools#customize keyboard-shortcuts)

Chrome 86 {: #discover86 .hide-from-toc }

• New Media panel
• Capture node screenshots via Elements panel context menu
• Issues tab updates
• Emulate missing local fonts
• Emulate inactive users
• Emulate prefers-reduced-data
• Support for new JavaScript features
• 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
• Human-readable X-Client-Data header 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

Chrome 85 {: #discover85 .hide-from-toc }

• Style editing for CSS-in-JS frameworks
• Lighthouse 6 in the Lighthouse panel
• First Meaningful Paint (FMP) deprecation
• Support for new JavaScript features
• New app shortcut warnings in the Manifest pane
• Service worker respondWith events 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

Chrome 84 {: #discover84 .hide-from-toc }

• 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

Chrome 83 {: #discover83 .hide-from-toc }

• 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

Chrome 82 {: #discover82 .hide-from-toc }

Chrome 82 was cancelled.

Chrome 81 {: #discover81 .hide-from-toc }

• Moto G4 support in Device Mode
• Cookie-related updates
• More accurate web app manifest icons
• Hover over CSS content properties to see unescaped values
• Source map errors in the Console
• Setting for disabling scrolling past the end of a file

Chrome 80 {: #discover80 .hide-from-toc }

• Support for let and class redeclarations 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

Chrome 79 {: #discover79 .hide-from-toc }

• 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

Chrome 78 {: #discover78 .hide-from-toc }

• 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

Chrome 77 {: #discover77 .hide-from-toc }

• 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

Chrome 76 {: #discover76 .hide-from-toc }

• 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

Chrome 75 {: #discover75 .hide-from-toc }

• 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

Chrome 74 {: #discover74 .hide-from-toc }

• 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)

Chrome 73 {: #discover73 .hide-from-toc }

• Logpoints
• 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)

Chrome 72 {: #discover72 .hide-from-toc }

• 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)

Chrome 71 {: #discover71 .hide-from-toc }

• 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)

Chrome 70 {: #discover70 .hide-from-toc }

• 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

Chrome 68 {: #discover68 .hide-from-toc }

• 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)

Chrome 67 {: #discover67 .hide-from-toc }

• 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
• JavaScript VM instances clearly listed in the Memory panel
• 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)

Chrome 66 {: #discover66 .hide-from-toc }

• 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

Chrome 65 {: #discover65 .hide-from-toc }

• 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)

Chrome 64 {: #discover64 .hide-from-toc }

• Performance Monitor
• Console Sidebar
• Group similar Console messages
• Bonus tip: Toggle hover pseudo-class (video)

Chrome 63 {: #discover63 .hide-from-toc }

• 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)

Chrome 62 {: #discover62 .hide-from-toc }

• 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

Chrome 61 {: #discover61 .hide-from-toc }

• 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

Chrome 60 {: #discover60 .hide-from-toc }

• 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

Chrome 59 {: #discover59 .hide-from-toc }

• CSS and JS code coverage
• Full-page screenshots
• Block requests
• Step over async await
• Unified Command Menu