What's New in DevTools (Chrome 111)

Published on Thursday, February 16, 2023

Developer advocate working on Chrome DevTools at Google.

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

No video for this release.

Debugging HD color with the Styles pane

New CSS color types and spaces are coming to the web! It is equally exciting that DevTools introduced new tools to help developers create, convert and debug High Definition color.

The Styles pane now supports 12 new color spaces and 7 new gamuts as outlined in the CSS Color Level 4 specification. See High Definition CSS Color Guide for a comprehensive understanding of color options available on the web.

Here are examples of CSS color definitions with color(), lch(), oklab() and color-mix().

When using the color-mix() function, you can view the final color output in the Computed pane. color-mix result in the Computed pane.

The color picker supports all the new color spaces with more features. For example, click on the color swatch of color(display-p3 1 0 1). A gamut boundary line has also been added, distinguishing between the sRGB and display-p3 gamuts for a clearer understanding of your selected color's gamut. A gamut boundary line.

DevTools supports converting colors between color formats. Use the Change Color Format icon to access the conversion popup, or simply use the Shift + click on a color swatch in the Styles pane.

When converting, it's important to know if the conversion was clipped to fit the space. DevTools puts a warning icon next to the converted color that alerts you to this clipping. Warning of color clipping.

In addition, you can pick colors from your screen with the new shortcut. Press 'c' to activate the eye dropper and hit Escape to deactivate it. The eyedropper tool only samples colors in the sRGB color space. For example, if you try to sample the color color(display-p3 1 0 1), which is outside of the sRGB color space, the eyedropper tool will clip the color to the nearest color in the sRGB space, which is magenta color(display-p3 0.92 0.2 0.97).

Finally, the Color format setting is now deprecated to make room for the new HD color format. Color format setting deprecation.

Chromium issues: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Enhanced breakpoint UX

The redesigned Breakpoints pane allows you to have quick access to commonly used features, in particular, deactivating, editing, and removing breakpoints.

These are some highlights:

Both pause exception options moved to the Breakpoints pane and labeled with text to make it more self-explanatory.
Breakpoints are grouped by file, ordered by line or column numbers, and are collapsible.
There are new options to deactivate, remove, and edit breakpoints when hovering over a breakpoint or file.
Click the edit breakpoint button to open the breakpoint editor. From here, you can enter the breakpoint condition or switch to a logpoint.

See JavaScript debugging reference to learn how to debug with DevTools.

Chromium issues: 1407586, 1402891, 1402893

Customizable Recorder shortcuts

Use keyboard shortcuts to record and replay user flows quicker.

The Recorder introduces a few convenient keyboard shortcuts for faster recording and replaying of user flows.

Don’t remember the shortcuts? No problem, click the ? button to view all the shortcuts at any time. The Recorder shortcuts.

You can even customize these shortcuts via the Settings menu. Customize Recorder shortcuts.

If you're working in a different panel and want to start a user flow recording, use the Create a new recording command from the Command Menu in DevTools to get started. Create a new recording command.

Chromium issue: 1339771

Better syntax highlight for Angular

DevTools enhanced the syntax highlighting for Angular HTML templates, making it easier for you to read code and recognize its structure. Syntax highlighting for the Angular HTML templates.

Chromium issues: 1385374, 1385678

Reorganize caches in the Application panel

The Cache Storage pane can now be found in the Storage section of the Application panel, while the Back/forward cache pane has been moved to the Background Services section. Caches in the Application panel.

Chromium issue: 1407166

Miscellaneous highlights

These are some noteworthy fixes in this release:

DevTools has been updated to respect the Disable cache setting when loading sourcemaps. (1407084)
The Elements panel now instantly autofocuses on the first matching element in search results. (1381853)
Various fixes to improve the source map and breakpoints reliability. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
To better facilitate debugging, DevTools now supports evaluating expressions with private class members. (1381806)

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.