What's New In DevTools (Chrome 94)

Published on Updated on

Translated to: Español, Português, 한국어, 中文, Pусский, 日本語

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

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.

Change language in Settings > Preferences

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   Toggle Device Toolbar  , select Nest Hub or Nest Hub Max under the device list.

Nest Hub device in the Device mode

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.

Origin trials in the Frame details view

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.

CSS container queries badge

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

Invert the network filters

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.

Console sidebar deprecation message

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.

Raw 'Set-Cookie' headers in the Issues tab and 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.

Consistent display native accessors as own properties in the Console

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.

Proper error stack traces for inline scripts with #sourceURL

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.

Shift+Click the color preview to change color format

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.

DevTools tooltip

Chromium issue: 1223391

[Experimental] Hide issues in the Issues tab

To enable the experiment, check the Enable hide issues menu checkbox under Settings > Experiments.

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   More   on the right, select Hide issues like this to hide it.

Experimental hide issue context menu

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   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos.

What's New in DevTools

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

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.