What's New In DevTools (Chrome 102)

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.

Preview feature: New Performance insights panel

Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

Open the panel and start a new recording based on your use case. For example, let’s measure the page load of this demo page.

New Performance insights panel

Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item (for example, Render blocking request, layout shift) to understand the issue and potential fixes.

Go to the Performance insights panel documentation to learn more with the step-by-step tutorial.

This is a preview feature to help web developers (especially non-performance experts) to identify and fix potential performance issues. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Chromium issue: 1270700

New shortcuts to emulate light and dark themes

You can now emulate the light and dark themes quicker (CSS media feature prefers-color-scheme) with the new shortcuts in the Styles pane.

Previously, it took more steps to emulate themes in the Rendering tab.

New shortcuts to emulate light and dark themes

Chromium issue: 1314299

Improved security on the Network Preview tab

DevTools now apply the Content Security Policy (CSP) in the Preview tab in the Network panel.

For example, the first screenshot shows a page that contains mixed content. The page loads over a secure HTTPS connection, but the stylesheet loads over an insecure HTTP connection.

The browser blocked the stylesheet request by default. However, when you opened the page via the Preview tab in the Network panel, the stylesheet was not blocked previously (hence the background turned into red). It is now blocked as you would expect (second screenshot).

Improve security on the Network Preview tab

Chromium issue: 833147

Improved reloading at breakpoint

The debugger now terminates script execution when reloading at breakpoint.

For example, the script got into an endless loop previously when setting and reloading at the ReactDOM breakpoint in this React demo. The Sources panel broke due to the endless loop.

Continuing to execute JavaScript is causing a lot of trouble for developers and might leave the renderer in a broken state. This change aligns the debugging behavior with other browsers like Firefox.

Improved reloading at breakpoint

Chromium issues: 1014415, 1004038, 1112863, 1134899

Console updates

Handle script execution errors in the Console

Errors during script evaluation in the Console now generate proper error events that trigger the window.onerror handler and are dispatched as "error" events on the window object.

Handle script execution errors in the Console

Chromium issue: 1295750

Commit live expression with Enter

Once you finish typing a live expression, you can click Enter to commit it. Previously, hitting Enter resulted in adding new lines. This is inconsistent with other parts of the DevTools.

To add a new line in the live expression editor, use Shift + Enter instead.

Commit live expression with Enter

Chromium issue: 1260744

Cancel user flow recording at the start

You can cancel the recording during the start of user flow recording. Previously, there was no option to cancel the recording.

Cancel user flow recording at the start

Chromium issue: 1257499

Display inherited highlight pseudo-elements in the Styles pane

View the inherited highlight pseudo-elements (e.g. ::selection, ::spelling-error, ::grammar-error, and ::highlight) in the Styles pane. Previously, these rules were not displayed.

As mentioned in the specification, when multiple styles conflict, cascade determines the winning style. This new feature helps you understand the inheritance and priority of the rules.

At the moment, you need to run Chrome with the --enable-blink-features=HighlightInheritance flag to enable this feature.

Display inherited highlight pseudo-elements in the Styles pane

Chromium issue: 1024156

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • The Properties pane now displays accessor properties with value by default. It was hidden mistakenly previously. (1309087)
  • The Styles pane now properly shows the overridden @support rules as strikethrough. Previously, the rules weren’t strikethrough. (1298025)
  • Fixed the CSS formatting logic in the Sources panel that caused multiple blank lines when editing CSS. (1309588)
  • Cap the Expand recursively option of an object in the Console to maximum 100 so it does not go on forever for circular objects. (1272450)

[Experimental] Copy CSS changes

To enable the experiment, check Sync CSS changes in the Styles pane under Settings > Experiments.

With this experiment, the Styles pane highlights your CSS changes in green. You can hover over the changed rules and click on the new copy button next to it to copy it.

Apart from that, you can copy all CSS changes across declarations by right-clicking on any rule, and selecting Copy all CSS changes.

A new Copy button is added to the Changes tab as well to help you keep track and copy your CSS changes with ease!

Copy CSS changes

Chromium issue: 1268754

[Experimental] Picking color outside of browser

To enable the experiment, check Enable color picking outside the browser window under Settings > Experiments.

Enable this experiment to pick a color outside of the browser with the color picker. Previously, you could only pick a color within the browser.

In the Styles pane, click on any color preview to open the color picker. Use the eyedropper to pick color from anywhere.

Picking color outside of browser

Chromium issue: 1245191

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

Last updated: Improve article

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