What’s New in DevTools (Chrome 111)
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.
Style panel now supports 12 new color spaces and 7 new gamuts as described in the spec CSS Color Level 4. See High Definition CSS Color Guide for a complete picture of the color options.
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.
Known issues: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054.
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.
Known issues: 1407586, 1402891, 1402893.
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.
Known issues: 1385374, 1385678.
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:
DevTools has been updated to take into account the setting disable cache while loading
The Elements panel now immediately automatically focuses on the first matching element in the search results. (1381853)
Various fixes to improve reliability
брейкпоинтов. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
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
Consider Using Chrome Canary, Dev or beta as the default development browser.
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! 🙂