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.
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.
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.
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.
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.
You can even customize these shortcuts via the
Settings
menu.
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.
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.
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.
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!
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
.
What's new in DevTools
A list of everything that has been covered in the
What's new in DevTools
series.
Chrome 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
Chrome 120
Chrome 119
Chrome 118
Chrome 117
Chrome 116
Chrome 115
Chrome 114
Chrome 113
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