What's New In DevTools (Chrome 94)

Jecelyn Yeen

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools.

Preferences" width="800" height="494">

Chromium issue: 1163928

New Nest Hub devices in the Device list

You can now simulate the dimensions of Nest Hub and Nest Hub Max in the Device mode.

Click Toggle Device Toolbar    , select Nest Hub or Nest Hub Max under the device list.

Chromium issue: 1223525

Origin trials in the Frame details view

You can now get information about a site's origin trials in the frame details view under the Application panel.

Origin trials gives you access to a new or experimental feature, to build functionality your users can try out for a limited time before the feature is made available to everyone.

Open a page with origin trials (e.g. demo page). In the Application panel, scroll down to the Frames section and select the top frame.

Chromium issue: 607555

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

Chromium issue: 1146422

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

For example, you can type "status-code: 404" to filter the network requests with status 404. Enable the Invert checkbox to negate the filter (show all network requests which are not with status 404).

Chromium issue: 1054464

Upcoming deprecation of the Console sidebar

The Console sidebar will be removed in favor of moving the filter UI to the toolbar. Do you have any concerns or feedback? Let us know via this issue tracker.

Chromium issue: 1232937

Display raw Set-Cookie headers in the Issues tab and Network panel

DevTools now displays raw Set-Cookie headers in the Issues tab.

Previously, DevTools did not show malformed cookies (incorrect Set-Cookie header) in the Network panel. With the new response-header-set-cookie filter added in the Network panel, users can filter the raw Set-Cookie header response. DevTools will link the raw Set-Cookie headers in the Issues tab to the Network panel.

Chromium issue: 1179186

Consistent display native accessors as own properties in the Console

The Console now displays native accessors as their own properties consistently.

For example, when evaluating the new Int8Array([1, 2, 3]) expression in the Console, native accessors like length, byteOffset did not display in the preview. With this latest update, native accessors are shown in the preview and values are eagerly evaluated when expanded.

Chromium issues: 1076820, ​​1199247

Proper error stack traces for inline scripts with #sourceURL

DevTools now resolves inline scripts with #sourceURL properly and shows proper error stack traces for debugging.

Previously DevTools displayed incorrect location for inline scripts with #sourceURL, relative to the surrounding document rather than relative to the opening <script> tag.

Chromium issues: 1183990, ​​578269

Change color format in the Computed pane

You can now change the color format of any element in the Computed pane by Shift + click on the color preview.

Chromium issue: 1226371

Replace custom tooltips with native HTML tooltips

DevTools now adopts native HTML tooltips across all components. DevTools has had a custom tooltip implementation for a long time due to the lack of styling of a native HTML tooltip.

Unfortunately, maintaining a custom tooltip implementation is complicated and we regularly run into complicated bugs.

After reweighting the benefits of the custom implementations, we find that the native HTML tooltips are sufficient for DevTools and adopting the tooltips prevents a vast variety of problems for our users.

Chromium issue: 1223391

[Experimental] Hide issues in the Issues tab

Enable the hide issues menu experiment to hide issues in the Issues tab. This way, you can focus on the important issues that matter to you.

In the Issue tab, hover an issue, click on the issue menu     on the right, select Hide issues like this to hide it.

Chromium issue: 1175722

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.