What's New In DevTools (Chrome 91)
Interested in helping improve DevTools? Sign up to participate in Google User Research here.
Web Vitals information pop up in the Performance panel #
Hover on a Web Vitals marker in the Performance panel to understand what's the indicator about - whether the performance is good, needs improvement, or poor.
Chromium issue: 1147872
Visualize CSS scroll-snap #
You can now toggle the
scroll-snap badge in the Elements panel to inspect the CSS scroll-snap alignment.
When an HTML element on your page (e.g. this demo page) has
scroll-snap-type applied to it, you can see a
scroll-snap badge next to it in the Elements panel. Click the badge to toggle the display of a scroll-snap overlay on the page.
In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.
Chromium issue: 862450
New Memory inspector #
Use the new Memory inspector to inspect an
Open this demo page. In the Sources panel, open the demo-js.js file, and set a breakpoint at line 18.
Refresh the page. Expand the Scope section in the right debugger pane. Notice the new icon next to the buffer value. Click on it to reveal the Memory Inspector.
WebAssembly.Memory with this new Memory inspector.
Chromium issue: 1166577
New badge settings pane in the Elements panel #
You can now selectively enable or disable badges via the Badge settings in the Elements panel. Use this feature to customize and stay focused on the important badges while inspecting web pages.
In the Elements panel, right click on any elements. Select Badge settings from the context menu, the badge settings pane appears on top. Enable or disable any checkbox to show/hide the badges.
Chromium issue: 1066772
Enhanced image preview with aspect ratio information #
Image previews in the Elements panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.
This information helps you better understand your images and apply optimization if you need to.
The image aspect ratio information is available in the Network panel as well when you click to preview the image.
New network conditions button with options to configure
A new network conditions button is added in the Network panel. Click on it to open the Network conditions tab.
A new Accepted Content-Encodings option is added to the Network conditions tab. Configure it to test if server responses are encoded correctly in browsers that do not support gzip, brotli, or other future
Chromium issue: 1162042
Styles pane enhancements #
New shortcut to view computed value in the Styles pane #
You can now right click on a CSS property in the Styles pane and select View computed value to view the computed CSS value.
Chromium issue: 1076198
Support for the
accent-color keyword #
The Styles pane's autocomplete UI now detects the
accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (e.g. checkbox, radio button) generated by the element.
accent-color CSS property is currently experimental. Please enable
chrome://flags/#enable-experimental-web-platform-features to test it.
Chromium issue: 1092093
Categorize issue types with colors and icons #
The Issues tab now categorize issues into page errors, upcoming breaking changes, and possible improvements for better severity indication. You can open the Issues tab by clicking on the issue count button in the Console.
- Page errors (red). Issues that have immediate impact for page functionality, such as not setting correct CORS headers, etc.
- Upcoming breaking changes (yellow). Issues that inform about an upcoming, incompatible change of the web platform that may result in a loss of page functionality (e.g. warning of upcoming CORS RFC 1918 changes).
- Possible improvements (blue). Potential improvements on the page, but are currently not impairing basic functionality of the page (e.g. accessibility issues)
Chromium issue: 1183241
Delete Trust tokens #
You can now delete trust tokens with the new delete button in the Trust tokens pane, under the Application panel.
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.
Chromium issue: 1126824
View details on blocked features in the Frame details view #
You can now view details on blocked features under the Permissions policy section in the Frame details view.
Open this demo page. Go to the Application panel and select a frame. In the Permissions Policy section, scroll to the Disabled Features property. Click on Show details to view the details on why the feature is blocked. Click on the icon next to each policy to navigate to the iframe or network request that blocked the feature.
Permissions policy is a web platform API which gives a website the ability to allow or block the use of browser features in its own frame or in iframes that it embeds.
Chromium issue: 1158827
Filter experiments in the Experiments setting #
Find experiments quicker with the new experiment filter. For example, go to Settings > Experiments, in the Filter textbox, type "contrast" to filter all the experiments with the word "contrast".
Vary Header column in the Cache storage pane #
Use the new
Vary Header column in the Cache Storage pane to view the Vary HTTP response header.
Chromium issue: 1186049
Sources panel improvements #
#foo in obj.
Try it out in the Console and Sources panel. You can inspect the private fields in the Scope section under the debugger pane as well.
Chromium issue: 11374
Enhanced support for breakpoints debugging #
Previously, DevTools was only able to set breakpoints on one raw location. With this latest improvement, DevTools can set breakpoints in all relevant locations correctly.
Support hover preview with
 notation #
 notation in the Sources panel.
Chromium issue: 1178305
Improved outline of HTML files #
DevTools now has better outline support for HTML files. In the Sources panel, open a HTML file. You can toggle the code outline with keyboard Cmd + Shift + O in Mac or Ctrl + Shift + O in Windows.
In the example below, DevTools now correctly list all functions in the outline. Previously, DevTools only showed some of the functions.
Proper error stack traces for Wasm debugging #
DevTools now resolves inline function calls and shows proper error stack traces for Wasm debugging.
Previously DevTools only displayed generic Wasm references in the Error stack traces.
The old version of Chrome on the left does not show the source location (e.g.
dsquare) in the Error stack traces, whereas the new version on the right does.
Chromium issue: 1189161