What's New In DevTools (Chrome 91)

Jecelyn Yeen

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.

Web Vitals information pop up

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.

CSS scroll-snap

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 ArrayBuffer in JavaScript, as well as the Wasm memory.

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.

Check out the documentation to learn more about inspecting JavaScript ArrayBuffer and WebAssembly.Memory with this new Memory inspector.

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.

badge settings pane in the Elements panel

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.

Image preview with aspect ratio information

The image aspect ratio information is available in the Network panel as well when you click to preview the image.

Image aspect ratio information in the Network panel

Chromium issues: 1149832, 1170656

New network conditions button with options to configure Content-Encodings

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 Content-Encodings.

New network conditions button with options to configure Content-Encoding

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.

New shortcut to view computed 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.

The accent-color CSS property is currently experimental. Please enable chrome://flags/#enable-experimental-web-platform-features to test it.

accent-color

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)

Categorize issue types with colors and icons

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.

Delete 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.

Blocked features in the Frame details view

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".

Filter experiments in the Experiments setting

New 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.

Vary Header column

Chromium issue: 1186049

Sources panel improvements

Support for new JavaScript features

DevTools now support the new private brand check JavaScript language feature, a.k.a #foo in obj.

This private brand checks feature extends the in operator to support the private class fields testing on any given object.

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.

JavaScript private brand checks

Chromium issue: 11374

Enhanced support for breakpoints debugging

DevTools now properly set breakpoints in multiple scripts correctly. Modern JavaScript bundlers (e.g. Webpack, Rollup) support code splitting feature - there are scenarios where one shared component can be included in multiple routes (code splits).

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.

Chromium issues: 1142705, 979000, 1180794

Support hover preview with [] notation

DevTools now support for hover preview on JavaScript member expressions that use the [] notation in the Sources panel.

Support hover preview with '[]' notation

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.

Improved outline of HTML files

Chromium issue: 761019, 1191465

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.

Proper error stack traces for Wasm debugging

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

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.