Что нового в DevTools (Chrome 111)

Jecelyn Yeen

Отладка HD-цвета с помощью панели «Стили»

Новые типы и пространства цветов CSS появляются в сети! Не менее захватывающе, что DevTools представил новые инструменты, помогающие разработчикам создавать, преобразовывать и отлаживать цвета высокой четкости.

Панель стилей теперь поддерживает 12 новых цветовых пространств и 7 новых гамм, как указано в спецификации CSS Color Level 4. Ознакомьтесь с Руководством по цвету CSS High Definition для полного понимания параметров цвета, доступных в Интернете.

Ниже приведены примеры определений цветов CSS с помощью color() , lch() , oklab() и color-mix() .

При использовании функции color-mix() вы можете просмотреть окончательный цветовой вывод на панели Computed .

Палитра цветов поддерживает все новые цветовые пространства с большим количеством функций. Например, щелкните образец цвета color(display-p3 1 0 1) . Также была добавлена ​​линия границы гаммы, различающая гаммы sRGB и display-p3 для более четкого понимания гаммы выбранного вами цвета.

DevTools поддерживает преобразование цветов между цветовыми форматами. Используйте значок «Изменить формат цвета» , чтобы открыть всплывающее окно преобразования, или просто используйте Shift + щелчок по образцу цвета на панели «Стили» .

При конвертации важно знать, была ли конвертация обрезана, чтобы соответствовать пространству. DevTools помещает предупреждающий значок рядом с конвертированным цветом, который оповещает вас об этой обрезке.

Кроме того, вы можете выбирать цвета с экрана с помощью нового сочетания клавиш. Нажмите «c», чтобы активировать пипетку, и нажмите Escape , чтобы деактивировать ее. Инструмент «пипетка» выбирает только цвета в цветовом пространстве sRGB. Например, если вы попытаетесь выбрать color(display-p3 1 0 1) , который находится за пределами цветового пространства sRGB, инструмент «пипетка» обрежет цвет до ближайшего цвета в пространстве sRGB, которым является пурпурный color(display-p3 0.92 0.2 0.97) .

Наконец, настройка формата цвета теперь устарела, чтобы освободить место для нового цветового формата HD.

Проблемы с Chromium: 1073895 , 1395782 , 1408777 , 1395782 , 1392717 , 1382409 , 1392054

Улучшенный UX точки останова

Обновленная панель точек останова обеспечивает быстрый доступ к часто используемым функциям, в частности, к отключению, редактированию и удалению точек останова.

Вот некоторые основные моменты: - Оба параметра исключения паузы перемещены на панель точек останова и помечены текстом, чтобы сделать их более понятными.

• Точки останова сгруппированы по файлам, упорядочены по номерам строк или столбцов и являются сворачиваемыми.

• Появились новые возможности деактивации, удаления и редактирования точек останова при наведении курсора на точку останова или файл.

• Нажмите кнопку редактирования точки останова, чтобы открыть редактор точек останова. Отсюда вы можете ввести условие точки останова или переключиться на точку журнала.

Чтобы узнать, как выполнять отладку с помощью DevTools, см. Справочник по отладке JavaScript .

Проблемы с Chromium: 1407586 , 1402891 , 1402893

Настраиваемые сочетания клавиш для диктофона

Используйте сочетания клавиш для более быстрой записи и воспроизведения действий пользователя.

Recorder предлагает несколько удобных сочетаний клавиш для более быстрой записи и воспроизведения пользовательских потоков.

Не помните сочетания клавиш? Нет проблем, нажмите кнопку ? , чтобы просмотреть все сочетания клавиш в любое время.

Вы даже можете настроить эти сочетания клавиш через меню «Настройки» .

Если вы работаете в другой панели и хотите начать запись потока пользователя, используйте команду «Создать новую запись» из меню «Команды» в DevTools, чтобы начать.

Проблема с хромом: 1339771

Лучшая подсветка синтаксиса для Angular

DevTools улучшил подсветку синтаксиса для HTML-шаблонов Angular, упростив чтение кода и распознавание его структуры.

Проблемы с Chromium: 1385374 , 1385678

Реорганизация кэшей на панели приложений

Панель «Хранилище кэша» теперь находится в разделе «Хранилище» панели «Приложения» , а панель «Возвратный/прямой кэш» перемещена в раздел «Фоновые службы» .

Проблема с хромом: 1407166

Разные моменты

Вот некоторые важные исправления в этом выпуске:

• DevTools обновлены для учета настройки «Отключить кэш» при загрузке исходных карт. ( 1407084 )
• Панель «Элементы» теперь мгновенно автоматически фокусируется на первом совпадающем элементе в результатах поиска. ( 1381853 )
• Различные исправления для улучшения исходной карты и надежности точек останова. ( 508270 , 1403362 , 1403432 , 1396298 , 1395337 , 1405134 )
• Для лучшего упрощения отладки DevTools теперь поддерживает оценку выражений с закрытыми членами класса. ( 1381806 )

Загрузите каналы предварительного просмотра

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на вашем сайте до того, как это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие варианты для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .