Debugging HD color with style panel
New css color types and spaces appear on the internet! Equally interesting, DevTools has received new tools to help developers create, convert, and debug high-definition colors.
Here are examples of using CSS styles with
When using the color-mix() function, you can view the final color result in a calculated panel.
The color picker supports all new color spaces with more features.
For example, click on the color swatch
color(display-03 1 0 1). A gamma boundary line has also been added to distinguish between
display-p3 for a better understanding of the gamut of your chosen color.
DevTools supports color conversion between color formats. Use the “Change Color Format” icon to open the conversion popup, or just click
клик to the color swatch in the Styles panel.
When converting, it is important to know if the conversion was
обрезаноto match space (wiki). DevTools warns you about this cut.
Plus, you can choose colors from your screen with a new shortcut. Click
Cto activate the pipette, and
Escapeto deactivate it.
Color format now deprecated to make room for the new HD color format.
Improved breakpoint interface (program breakpoint)
брейкпоинтов allows you to quickly access frequently used functions, in particular, to their deactivation, editing And removal.
Here are some highlights:
Both options for
исключенийmoved to panel
Брейкпоинтовand marked with text to make them easier to understand.
Breakpoints are grouped by file, ordered by row or column number, and are collapsible.
There are new options for deactivating, deleting and editing breakpoints when hovering the mouse over a breakpoint or file.
Редактироватьbreakpoint to open the editor. From here you can enter a breakpoint condition or switch to one.
Customizable Recorder Shortcuts
Use keyboard shortcuts to record and play custom streams faster.
The recorder contains several handy keyboard shortcuts for faster recording and playback of custom streams.
Don’t remember shortcuts? No problem, click on
? to view all shortcuts at any time.
You can even customize these shortcuts through the settings menu.
If you are working in another panel and want to start recording a user stream, use the command
Создать новую запись from command menu in DevTools.
Known issue: 1339771.
Improved Angular Syntax Highlighting
DevTools has improved syntax highlighting for Angular HTML templates, making it easier to read code and recognize its structure.
Reorganization of the Cache item in the Application panel
Cache Storage can now be found under
Storage in the panel
Back/forward cache has been moved to the section
Known issue: 1407166
Various minor fixes and improvements
Here are some noteworthy fixes in this update:
The Elements panel now immediately automatically focuses on the first matching element in the search results. (1381853)
To make debugging easier, DevTools now supports expression evaluation using private class members. (1381806)
Where to download and how to get updates before the release
These preview channels give you access to the latest DevTools features, test advanced web platform APIs, and discover issues on your site before your users do!
How to contact the Chrome DevTools team
Use the following options to discuss new features and changes in a post or anything else related to DevTools.
List all changes in DevTools.
I hope the translation was helpful and you learned something new.
In the comments, you can safely discuss the problems you are interested in regarding DevTools, and it is better to send errors to the PM immediately, thanks! 🙂