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 color(), lch(), oklab() And color-mix().

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 sRGB And 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 Shift + клик 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.

Finally, point 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)

Redesigned panel брейкпоинтов 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.

  • Click Редактировать breakpoint to open the editor. From here you can enter a breakpoint condition or switch to one.

See JavaScript Debugging Referenceto learn how to debug using the DevTools.

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

Panel Cache Storage can now be found under Storage in the panel Applicationwhile paragraph Back/forward cache has been moved to the section Background Services.

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 sourcemaps. (1407084)

  • The Elements panel now immediately automatically focuses on the first matching element in the search results. (1381853)

  • Various fixes to improve reliability sourcemap And брейкпоинтов. (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! 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *