Debugging HD color, enhanced breakpoint UX, and more

What's New in DevTools (Chrome 111)

Published on

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(). Examples of CSS color definitions.

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. Converting colors between color formats.

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

Activate the eye dropper.

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. Pause exception options.

  • Breakpoints are grouped by file, ordered by line or column numbers, and are collapsible. Group breakpoints by file.

  • There are new options to deactivate, remove, and edit breakpoints when hovering over a breakpoint or file. New options to deactivate breakpoints.

  • Click the edit breakpoint button to open the breakpoint editor. From here, you can enter the breakpoint condition or switch to a logpoint. Breakpoint edit dialog.

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) Evaluating expressions with private class members.

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

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

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

Updated on Improve article

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