What’s New in DevTools (Chrome 117)
Interested in helping improve DevTools? Sign up to participate in Google User Research here.
There is no ‘What’s new in DevTools’ video for this release, but you can watch this quick recap of the recent features.
Network panel improvements
Override web content locally even faster
The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them.
To override web content, open the Network panel, right-click a request, and select Override content.
![The override options in the drop-down menu of a request.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/BRExqF6iUJioa9YkiUeV.png?auto=format)
If you have local overrides set up but disabled, DevTools enables them. If you haven’t set them up yet, DevTools prompts you in the action bar at the top. Select a folder to store the overrides in and allow DevTools access to it.
![Select a folder and allow access to it in the action bar at the top.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/cuNvCVUAVtICozqgThQi.png?auto=format)
Once the overrides are set up, DevTools then takes you to Sources > Overrides > Editor to let you override web content.
Note that the overridden resources are indicated with in the Network panel. Hover over the icon to see what’s overridden.
![An override icon next to a request in the Network panel.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/hekOD6lUKKXipZ6qFT3D.png?auto=format)
Chromium issues: 1465785, 1470532, 1469359.
Override the content of XHR and fetch requests
You can now override the content of XHR and fetch requests in addition to their response headers. With such overrides, you can mock the API responses to debug your web page even if your backend and API aren’t ready yet.
DevTools currently supports content overrides for the following request types: images (for example, avif, png), fonts, fetch and XHR, scripts (css and js), and documents (html). DevTools now grays out the Override content option for unsupported types.
Chromium issues: 792101, 1469776.
Hide Chrome extension requests
To help you focus on the code you author and filter out irrelevant requests sent by extensions you might have installed in Chrome, the Network panel gets a new filter.
To filter out all the requests sent to chrome-extension://
URLs, check Hide extension URLs.
![Extension URLs hidden from the requests table.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/07CwNEuofVPa8jp3LFfm.png?auto=format)
Additionally, DevTools now won’t attempt to load source maps for extensions, so you won’t see the “Failed to load source maps” warnings that aren’t related to your code.
Moreover, similar warnings caused by your code are now shown in an information bar at the bottom of the Sources panel instead of the Console.
Chromium issues: 1257885, 1458803.
Human-readable HTTP status codes
The Status Code in the request’s header now shows human-readable text next to the HTTP status codes, so you can figure out what happened to the request quicker.
![The before and after displaying human-readable HTTP status codes.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/ZaKyHIWya3xO6jFqyFlB.png?auto=format)
You can also hover over the status code in the request table to see the same text.
Chromium issue: 1153956.
Pretty-print responses for JSON subtypes
The Response tab of for a request with a application/+json
MIME subtype (for example, ld+json
, hal+json
, and others) now parses the response correctly and lets you prettify it.
![The before and after parsing an application/json subtype in a network response preview.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/Na2g2Ba9ihx4P5BH9ZYW.png?auto=format)
Chromium issue: 406900.
Performance: See the changes in fetch priority for network events
The Performance panel now shows two priority fields in the Summary of an event in the Network track: Initial Priority and (final) Priority, instead of just the singe Priority. With this additional field you can now see if the event’s fetch priority changes and tweak the order of downloads. For more information, see Optimizing resource loading with the Fetch Priority API.
![Before and after displaying changes in fetch priority.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/IzdOpZvv0KSQNdtGLfhL.png?auto=format)
Additionally, you can find the same information in the Priority column of the Network panel, with the Big request rows setting enabled.
![The Priority column in the Network panel.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/XDOh7qRquDu5joKZ9srg.png?auto=format)
Chromium issues: 1463901, 1380964.
Sources settings enabled by default: Code folding and automatic file reveal
The Settings > Preferences >
Code folding option is now enabled by default. This option lets you fold code blocks.
To fold a code block, hover over the line number next to the start of the block and click the collapse icon. Click
{...}
to expand the block again.
Moreover, the Settings > Preferences >
Automatically reveal files in the sidebar is now also enabled by default.
This setting makes the file tree in the Sources > Page select the current file open in the Editor when you switch tabs.
Chromium issues: 1459193, 1336599.
Improved debugging of third-party cookie issues
In an effort to help build a more private web and in parallel with updates by other browsers, Chrome introduced the Privacy Sandbox initiative. This initiative fundamentally enhances privacy on the web and can sustain a healthy, ad-supported web in a way that will render third-party cookies obsolete. Privacy Sandbox has a gradual phaseout timeline to let you adapt to changes comfortably.
You can already test how Chrome behaves after the third-party cookie phaseout. To do this, run Chrome from the command line with the --test-third-party-cookies-phaseout
flag. To learn what this flag does, see Debugging cookies.
Regardless of the way you run Chrome (with or without the flag), the Issues tab now has the Include third-party cookie issues checkbox enabled by default and, as a result, reports:
- A breaking change warning about the upcoming phaseout.
- Issues related to third-party cookies.
To test this, inspect cookies at this demo page.
![Third-party cookie issues reported in the Issues tab.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/WlT6ntQm5iEGujg8P32c.png?auto=format)
Additionally, the Blocked response cookies filter in the Network panel has been rephrased to make it clear that it shows only the blocked response cookies.
![The checkbox is enabled and shows only the requests with blocked response cookies.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/anskbEwDVG6vvXKqW5TA.png?auto=format)
Chromium issues: 1458839, 1462693, 1466310.
Debug preloading in the Application panel
The Chrome team is bringing back full prerendering of future pages that a user is likely to navigate to. To let you debug this, DevTools adds the Preloading section to the Application panel. The new prefetching and prerendering (collectively known as preloading) uses Speculation Rules is unrelated to the legacy link-based resource hint versions.
On this demo page, in the Application > Preloading section, you can inspect:
- Speculation Rules that lists all the rule sets found on the current page.
- Preloads that lists all the prefetched and prerendered URLs from the rule sets.
- This Page that lists the prerendered status of the current page.
Chromium issue: 1410709.
New colors
You might have already noticed that DevTools now has a refreshed look that better aligns with Chrome. One contributing factor is the new color scheme.
![The before and after applying new colors.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dhvFP34kcqgGfHseGGWL.png?auto=format)
This version (117) brings more UX improvements to DevTools, both already mentioned and listed further, including a number of improved UI texts.
Chromium issue: 1456677.
Lighthouse 10.4.0
The Lighthouse panel now runs Lighthouse 10.4.0. Most notably, this version adds new accessibility audits for the following:
For example:
![Failed check on the color of links that makes them indistinguishable.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/b8rrvtXSXeGL1YxnHHLz.png?auto=format)
See also the full list of changes. To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.
Chromium issue: 772558.
The C/C++ WebAssembly debugging extension for DevTools is now open source
The C/C++ WebAssembly debugging extension for DevTools is now open source and resides in the DevTools frontend repository. This extension enables debugging capabilities in DevTools for C++ programs compiled to WebAssembly. For more information, see Debug C/C++ WebAssembly.
Learn how to build, run, and test the extension and feel free to contribute.
Chromium issue: 1410709.
Miscellaneous highlights
These are some noteworthy fixes and improvements in this release:
- CSS Nesting: The Elements panel now shows the entire selector chain for nested children (1172985).
- Application > Manifest now has a Window Controls Overlay section that checks if a
display_override
value is present in the Manifest and provides links to relevant documentation. - The Sources > Page tree now does the following, including but not limited to (1442863):
- Greys out folders if all their content is ignore-listed.
- Colors folders in orange if all their content is from a source map.
- Performance: Capture Settings now automatically hide when you start the recording (1455498).
- Sources > Editor restored the Ctrl + Arrow behavior (Win) and Opt + Arrow (MacOs) (1468208).
- Animations > Pause all toggle now keeps its state across page loads (1446046).
- Application > Storage > Cache storage moved to the Application > Storage > Cache section (1462622).
- Some UI texts and tooltips are improved: Hardware concurrency tooltip, Network filter texts and a main menu option, capitalization in the Application tree view, Network > Headers texts, Sources > Overrides and Filesystem texts.
New experimental features
prefers-reduced-transparency
New rendering emulation: Your website users may start enabling the new experimental prefers-reduced-transparency
CSS media feature on their devices to indicate their preference to reduce transparent effects. You might consider taking this preference into account to increase your website’s accessibility. To help you, the Rendering drawer tab can now emulate the prefers-reduced-transparency: reduce
setting, so you can prototype a solution and test how your website behaves in this case.
To test this feature in Chrome, enable Experimental Web Platform features in chrome://flags
.
The DevTools team expresses gratitude to Luke Warlow for landing this feature.
Chromium issue: 1424879.
Enhanced Protocol monitor
Chrome DevTools uses the Chrome DevTools Protocol (CDP) to instrument, inspect, debug, and profile Chrome browsers. If you are a Chromium or DevTools developer, the Protocol monitor provides you with a way to view all the CDP requests and responses made by DevTools and send CDP commands.
The Protocol monitor gets a new interface to let you construct and send CDP commands easier. Now you don’t have to look up commands and their parameters in documentation, DevTools will suggest them to you.
To enable this feature, check Settings > Experiments >
Protocol Monitor.
In the bottom right corner of the Protocol monitor drawer tab, click Show CDP command editor, select a target, start typing a command, select one of the suggested, if required, specify parameter values, and click
Send command (Ctrl/Cmd + Enter).
![Specifying and sending a CDP command.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/lQv810MXafmVjuj70RP6.png?auto=format)
Chromium issue: 1469345.
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!
Getting in touch with the Chrome DevTools team
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 117
-
Performance: See the changes in fetch priority for network events
-
Sources settings enabled by default: Code folding and automatic file reveal
-
The C/C++ WebAssembly debugging extension for DevTools is now open source
-
(Experimental) New rendering emulation: prefers-reduced-transparency
Chrome 116
- Improved debugging of missing stylesheets
- Linear timing support in Elements > Styles > Easing Editor
- Storage buckets support and metadata view
- Lighthouse 10.3.0
- Accessibility: Keyboard commands and improved screen reading
- Miscellaneous highlights
Chrome 115
- Elements improvements
- New CSS subgrid badge
- Selector specificity in tooltips
- Values of custom CSS properties in tooltips
- Sources improvements
- CSS syntax highlighting
- Shortcut to set conditional breakpoints
- Application > Bounce Tracking Mitigations
- Lighthouse 10.2.0
- Ignore content scripts by default
- Network > Response improvements
- Miscellaneous highlights
Chrome 114
- WebAssembly debugging support
- Improved stepping behavior in Wasm apps
- Debug Autofill using the Elements panel and Issues tab
- Assertions in Recorder
- Lighthouse 10.1.1
- Performance enhancements
- performance.mark() shows timing on hover in Performance > Timings
- profile() command populates Performance > Main
- Warning for slow user interactions
- Web Vitals updates
- JavaScript Profiler deprecation: Phase three
- Miscellaneous highlights
Chrome 113
- Override network response headers
- Nuxt, Vite, and Rollup debugging improvements
- CSS improvements in Elements > Styles
- Invalid CSS properties and values
- Links to key frames in the animation shorthand property
- New Console setting: Autocomplete on Enter
- Command Menu emphasizes authored files
- JavaScript Profiler deprecation: Stage two
- Miscellaneous highlights
Chrome 112
- Recorder updates
- Recorder replay extensions
- Record with pierce selectors
- Export recordings as Puppeteer scripts with Lighthouse analysis
- Get extensions for Recorder
- Elements > Styles updates
- CSS documentation in the Styles pane
- CSS nesting support
- Marking logpoints and conditional breakpoints in the Console
- Ignore irrelevant scripts during debugging
- JavaScript Profiler deprecation started
- Emulate reduced contrast
- Lighthouse 10
- Miscellaneous highlights
Chrome 111
- Debugging HD color with the Styles pane
- Enhanced breakpoint UX
- Customizable Recorder shortcuts
- Better syntax highlight for Angular
- Reorganize caches in the Application panel
- Miscellaneous highlights
Chrome 110
- Clearing Performance Panel on reload
- Recorder updates
- View and highlight the code of your user flow in the Recorder
- Customize selector types of a recording
- Edit user flow while recording
- Automatic in-place pretty print
- Better syntax highlight and inline preview for Vue, SCSS and more
- Ergonomic and consistent Autocomplete in the Console
- Miscellaneous highlights
Chrome 109
- Recorder: Copy as options for steps, in-page replay, step’s context menu
- Show actual function names in performance’s recordings
- New keyboard shortcuts in the Console & Sources panel
- Improved JavaScript debugging
- Miscellaneous highlights
- Enhanced UX in managing breakpoints
- Automatic in-place pretty print
Chrome 108
- Hints for inactive CSS properties
- Auto-detect XPath and text selectors in the Recorder panel
- Step through comma-separated expressions
- Improved Ignore list setting
- Miscellaneous highlights
Chrome 107
- Customize keyboard shortcuts in DevTools
- Toggle light and dark themes with keyboard shortcut
- Highlight C/C++ objects in the Memory Inspector
- Support full initiator information for HAR import
- Start DOM search after pressing
Enter
- Display
start
andend
icons foralign-content
CSS flexbox properties - Miscellaneous highlights
Chrome 106
- Group files by Authored / Deployed in the Sources panel
- Linked stack traces for asynchronous operations
- Automatically ignore known third-party scripts
- Improved call stack during debugging
- Hiding ignore-listed sources in the Sources panel
- Hiding ignore-listed files in the Command Menu
- New Interactions track in the Performance panel
- LCP timings breakdown in the Performance Insights panel
- Auto-generate default name for recordings in the Recorder panel
- Miscellaneous highlights
Chrome 105
- Step-by-step replay in the Recorder
- Support mouse over event in the Recorder panel
- Largest Contentful Paint (LCP) in the Performance insights panel
- Identify flashes of text (FOIT, FOUT) as potential root causes for layout shifts
- Protocol handlers in the Manifest pane
- Top layer badge in the Elements panel
- Attach Wasm debugging information at runtime
- Support live edit during debugging
- View and edit @scope at rules in the Styles pane
- Source map improvements
- Miscellaneous highlights
Chrome 104
- Restart frame during debugging
- Slow replay options in the Recorder panel
- Build an extension for the Recorder panel
- Group files by Authored / Deployed in the Sources panel
- New User Timings track in the Performance insights panel
- Reveal assigned slot of an element
- Simulate hardware concurrency for Performance recordings
- Preview non-color value when autocompleting CSS variables
- Identify blocking frames in the Back/forward cache pane
- Improved autocomplete suggestions for JavaScript objects
- Source maps improvements
- Miscellaneous highlights
Chrome 103
- Capture double-click and right-click events in the Recorder panel
- New timespan and snapshot mode in the Lighthouse panel
- Improved zoom control in the Performance Insights panel
- Confirm to delete a performance recording
- Reorder panes in the Elements panel
- Picking a color outside of the browser
- Improved inline value preview during debugging
- Support large blobs for virtual authenticators
- New keyboard shortcuts in the Sources panel
- Source maps improvements
Chrome 102
- Preview feature: New Performance insights panel
- New shortcuts to emulate light and dark themes
- Improved security on the Network Preview tab
- Improved reloading at breakpoint
- Console updates
- Cancel user flow recording at the start
- Display inherited highlight pseudo-elements in the Styles pane
- Miscellaneous highlights
- Copy CSS changes
- Picking color outside of browser
Chrome 101
- Import and export recorded user flows as a JSON file
- View cascade layers in the Styles pane
- Support for the hwb() color function
- Improved the display of private properties
- Miscellaneous highlights
- New timespan and snapshot mode in the Lighthouse panel
Chrome 100
- View and edit @supports at rules in the Styles pane
- Support common selectors by default
- Customize the recording’s selector
- Rename a recording
- Preview class/function properties on hover
- Partially presented frames in the Performance panel
- Miscellaneous highlights
Chrome 99
- Throttling WebSocket requests
- New Reporting API pane in the Application panel
- Support wait until element is visible/clickable in the Recorder panel
- Better console styling, formatting and filtering
- Debug Chrome extension with source map files
- Improved source folder tree in the Sources panel
- Display worker source files in the Sources panel
- Chrome’s Auto Dark Theme updates
- Touch-friendly color-picker and split pane
- Miscellaneous highlights
Chrome 98
- Preview feature: Full-page accessibility tree
- More precise changes in the Changes tab
- Set longer timeout for user flow recording
- Ensure your pages are cacheable with the Back/forward cache tab
- New Properties pane filter
- Emulate the CSS forced-colors media feature
- Show rulers on hover command
- Support
row-reverse
andcolumn-reverse
in the Flexbox editor - New keyboard shortcuts to replay XHR and expand all search results
- Lighthouse 9 in the Lighthouse panel
- Improved Sources panel
- Miscellaneous highlights
- Endpoints in the Reporting API pane
Chrome 97
- Preview feature: New Recorder panel
- Refresh device list in Device Mode
- Autocomplete with Edit as HTML
- Improved code debugging experience
- Syncing DevTools settings across devices
Chrome 96
- Preview feature: New CSS Overview panel
- Restored and improved CSS length edit and copy experince
- Emulate the CSS prefers-contrast media feature
- Emulate the Chrome’s Auto Dark Theme feature
- Copy declarations as JavaScript in the Styles pane
- New Payload tab in the Network panel
- Improved the display of properties in the Properties pane
- Option to hide CORS errors in the Console
- Proper
Intl
objects preview and evaluation in the Console - Consistent async stack traces
- Retain the Console sidebar
- Deprecated Application cache pane in the Application panel
- New Reporting API pane in the Application panel
Chrome 95
- New CSS length authoring tools
- Hide issues in the Issues tab
- Improved the display of properties
- Lighthouse 8.4 in the Lighthouse panel
- Sort snippets in the Sources panel
- New links to translated release notes and report a translation bug
- Improved UI for DevTools command menu
Chrome 94
- Use DevTools in your preferred language
- New Nest Hub devices in the Device list
- Origin trials in the Frame details view
- New CSS container queries badge
- New checkbox to invert the network filters
- Upcoming deprecation of the Console sidebar
- Display raw
Set-Cookies
headers in the Issues tab and Network panel - Consistent display native accessors as own properties in the Console
- Proper error stack traces for inline scripts with #sourceURL
- Change color format in the Computed pane
- Replace custom tooltips with native HTML tooltips
- Hide issues in the Issues tab
Chrome 93
- Editable CSS container queries in the Styles pane
- Web bundle preview in the Network panel
- Attribution Reporting API debugging
- Better string handling in the Console
- Improved CORS debugging
- Lighthouse 8.1
- New note URL in the Manifest pane
- Fixed CSS matching selectors
- Pretty-printing JSON responses in the Network panel
Chrome 92
- CSS grid editor
- Support for
const
redeclarations in the Console - Source order viewer
- New shortcut to view frame details
- Enhanced CORS debugging support
- Rename XHR label to Fetch/XHR
- Filter Wasm resource type in the Network panel
- User-Agent Client Hints for devices in the Network conditions tab
- Report Quirks mode issues in the Issues tab
- Include Compute Intersections in the Performance panel
- Lighthouse 7.5 in the Lighthouse panel
- Deprecated “Restart frame” context menu in the call stack
- Protocol monitor
- Puppeteer Recorder
Chrome 91
- Web Vitals information pop up
- New Memory inspector
- Visualize CSS scroll-snap
- New badge settings pane
- Enhanced image preview with aspect ratio information
- New network conditions button with options to configure
Content-Encoding
s - shortcut to view computed value
accent-color
keyword- Categorize issue types with colors and icons
- Delete Trust tokens
- Blocked features in the Frame details view
- Filter experiments in the Experiments setting
- New
Vary Header
column in the Cache storage pane - Support JavaScript private brand check
- Enhanced support for breakpoints debugging
- Support hover preview with
[]
notation - Improved outline of HTML files
- Proper error stack traces for Wasm debugging
Chrome 90
- 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 - Automatic low-contrast issue reporting in the Issues tab
- Full accessibility tree view in the Elements panel
Chrome 89
- 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
- Automate browser testing with Puppeteer Recorder
- Font editor in the Styles pane
- CSS flexbox debugging tools
- New CSP Violations tab
- New color contrast calculation – Advanced Perceptual Contrast Algorithm (APCA)
Chrome 88
- 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
- CSS Flexbox debugging tools
- Customize chords keyboard shortcuts
Chrome 87
- 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
andurl
filters in the Network panel - Frame details view updates
- Deprecation of
Settings
in the More tools menu - View and fix color contrast issues in the CSS Overview panel
- Customize keyboard shortcuts in DevTools
Chrome 86
- 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
- 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
- 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
- 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
Chrome 81
- 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
- Support for
let
andclass
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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Performance Monitor
- Console Sidebar
- Group similar Console messages
- Bonus tip: Toggle hover pseudo-class (video)
Chrome 63
- 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
- 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
- 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
- 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
This post is also available in:
English