What's New In DevTools (Chrome 93)

Jecelyn Yeen

Editable CSS container queries in the Styles pane

You can now view and edit CSS container queries in the Styles pane.

Container queries provide a much more dynamic approach to responsive design. The @container at-rule works in a similar way to a media query with @media. However, instead of querying the viewport and user agent for information, @container queries the ancestor container that matches certain criteria.

In the Elements panel, click on a DOM element with @container at-rule, DevTools now displays the @container information in the Styles pane. Click on it to edit the size. The Styles pane displays the corresponding container information too. Hover on it to highlight the container element on the page and check the container size. Click on it to select the container element.

The container queries feature is experimental currently. Please turn on the #enable-container-queries flag under chrome://flags to test it.

Chromium issue: 1146422

Web bundle preview in the Network panel

Web bundle is a file format for encapsulating one or more HTTP resources in a single file. You can now preview the web bundle content in the Network panel.

The web bundle feature is experimental currently. Please enable #enable-experimental-web-platform-features flag under chrome://flags to test it.

Chromium issue: 1182537

Attribution Reporting API debugging

Attribution Reporting API errors are now reported in the Issues tab.

Attribution Reporting is a new API to help you measure when a user action (such as an ad click or view) leads to a conversion, without using cross-site identifiers.

Chromium issue: 1190735

Better string handling in the Console

New context menu in the Console allows you to copy any string in as content, JavaScript literal or JSON literal.

In Chrome 90, DevTools updated the Console to always format string outputs as valid JSON literals. We received feedback from the developers that this change could be confusing, some feel that the amount of escaping is excessive and makes the output unreadable.

The Console now formats string outputs as valid JavaScript literals, and furthermore provides you 3 copy string options. The Copy as JavaScript literal option will escape appropriate special characters and wrap the string in either single quotes, double quotes, or backticks depending on the string content. The Copy string contents instead copies the raw string contents (including new lines and other special characters) verbatim to the clipboard. Finally, Copy as JSON literal formats the string as a valid JSON literal and copies it to the clipboard.

Chromium issue: 1208389

Improved CORS debugging

CORS-related TypeErrors in the Console are now linked to the Network panel and Issues tab.

Click on the two new icons next to the CORS-related error message to view the network request, or understand the error message further and get potential solutions in the Issues tab.

Chromium issue: 1213393

Lighthouse 8.1

The Lighthouse panel is now running Lighthouse 8.1.

If your site exposes source maps to Lighthouse, look for the View Treemap button to see a breakdown of your shipped JavaScript, filterable by size and coverage on load.

The report also includes a new metric filter (Refer to the Show audits relevant to filter in the screenshot). Pick a metric to focus on the opportunities and diagnostics most relevant to improving just that metric.

The Performance Category had a number of scoring changes to align with other performance tools and to better reflect the state of the web.

Check out the release notes for a full list of changes.

Chromium issue: 772558

Display new note URL in the Manifest pane

The Manifest pane now displays the the new note URL.

Currently on ChromeOS (CrOS), Chrome Apps and Android Apps that declare a "new-note" capability may be selected as a note-taking app in the Stylus settings (shows up if the CrOS device has been used with a stylus). When selected as a note-taking app, the app can be launched from the stylus palette's "Create Note" button. Adding new-note-url field in the application manifest is part of the effort to add equivalent functionality to web apps.

Chromium issue: 1185678

Fixed CSS matching selectors

DevTools fixed the CSS matching selectors, it was not working in the last release.

The comma separated selectors in the Styles pane are colored differently depending on whether they match the selected DOM node:

• An unmatched portion is shown in a light grey.
• A matching selector portion is shown in black.

Chromium issue: 1219153

Pretty-printing JSON responses in the Network panel

You can now pretty print JSON responses in the Network panel.

Open a JSON response in the Network panel, click on the {} icon to pretty-print it.

Chromium bug: 998674

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.