What's New In DevTools (Chrome 102)

Jecelyn Yeen

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.

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.

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

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.

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.

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.

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.

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.

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

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!

Chromium issue: 1268754

[Experimental] Picking color outside of browser

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.

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on 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.