What's New In DevTools (Chrome 93)

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.

Editable CSS container queries in the Styles pane

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.

web bundle preview

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.

Attribution Reporting API errors in the Issues tab

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.

New context menu in the Console

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.

Icons next to the CORS-related error message

Chromium issue: 1213393

Lighthouse 8.1

The Lighthouse panel is now running Lighthouse 8.1.

Lighthouse

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.

New note URL in the Manifest pane

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.

CSS matching selectors

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.

 Pretty-printing JSON responses in the Network panel

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   More   > 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 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59