Tuesday, September 28, 2021

Chrome DevTools now supports more than 80 languages

What's New In DevTools (Chrome 94)

Published on Tuesday, August 24, 2021• Updated on Tuesday, August 24, 2021

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

VIDEO

# 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 , 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.

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

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

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.

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!

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.