Отладка HD color с помощью панели стилей
Новые цветовые типы CSS и пространства появляются в интернете! Не менее интересно, что DevTools получил новые инструменты, помогающие разработчикам создавать, конвертировать и отлаживать цвета высокой четкости.
Панель стилей теперь поддерживает 12 новых цветовых пространств и 7 новых гамм, как описано в спецификации CSS Color Level 4. Смотрите Руководство по цвету CSS высокой четкости для получения полного представления о вариантах цвета.
Вот примеры использования CSS стилей с помощью color()
, lch()
, oklab()
и color-mix()
.
![](https://habrastorage.org/getpro/habr/upload_files/75a/2cc/777/75a2cc7778ce7bde7ac662bc79324bfc.png)
При использовании функции color-mix() вы можете просмотреть конечный результат цветопередачи на вычисляемой панели.
![](https://habrastorage.org/getpro/habr/upload_files/fb9/427/7f4/fb94277f4825669bd615ddfd0c5f5951.png)
Средство выбора цвета поддерживает все новые цветовые пространства с большим количеством функций.
Например, щелкните по цветовому образцу color(display-03 1 0 1)
. Также была добавлена линия границы гаммы, различающая sRGB
и display-p3
для лучшего понимания гаммы выбранного вами цвета.
![](https://habrastorage.org/getpro/habr/upload_files/682/492/534/68249253475bd2dc8423123db48c7cc5.png)
DevTools поддерживает преобразование цветов между цветовыми форматами. Используйте значок "Изменить формат цвета", чтобы открыть всплывающее окно преобразования, или просто нажмите Shift
+ клик
на образец цвета на панели стилей.
![](https://habrastorage.org/getpro/habr/upload_files/cbd/a53/b59/cbda53b59f86c50c1fbe4be82a971813.png)
При преобразовании важно знать, было ли преобразование обрезано
, чтобы соответствовать пространству (вики). DevTools предупреждает вас об этом вырезании.
![](https://habrastorage.org/getpro/habr/upload_files/35e/a2b/320/35ea2b320553640655f84b24376afaa3.png)
Кроме того, вы можете выбирать цвета со своего экрана с помощью нового ярлыка. Нажмите C
, чтобы активировать пипетку, и Escape
, чтобы деактивировать ее.
![](https://habrastorage.org/getpro/habr/upload_files/026/8bf/49c/0268bf49c03d9c3c011d77ac70adff9f.png)
Наконец, пункт Color format
теперь устарел, чтобы освободить место для нового цветового формата HD.
![](https://habrastorage.org/getpro/habr/upload_files/5f0/44e/58d/5f044e58d7824e6e99727337c39a9c95.png)
Известные проблемы: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054.
Улучшенный интерфейс брейкпоинтов (точка остановки программы)
Переработанная панель брейкпоинтов
позволяет получить быстрый доступ к часто используемым функциям, в частности, к их деактивации, редактированию и удалению.
Вот некоторые основные моменты:
-
Оба параметра для
исключений
перенесены на панельБрейкпоинтов
и помечены текстом, чтобы сделать их более понятными.
-
Брейкпоинты сгруппированы по файлам, упорядочены по номерам строк или столбцов и являются сворачиваемыми.
-
Появились новые опции для деактивации, удаления и редактирования брейкпоинтов при наведении курсора мыши на них или файл.
Нажмите
Редактировать
брейкпоинт, чтобы открыть редактор. Отсюда вы можете ввести условие брейкпоинта или переключиться на него.
![](https://habrastorage.org/getpro/habr/upload_files/872/4d0/908/8724d09086749b85b2b3397c984ca544.png)
Смотрите справочник по отладке JavaScript, чтобы узнать, как выполнять отладку с помощью DevTools эффективнее и используя их на максимум.
Известные проблемы: 1407586, 1402891, 1402893.
Настраиваемые ярлыки рекордера
Используйте сочетания клавиш для более быстрой записи и воспроизведения пользовательских потоков.
Рекордер содержит несколько удобных сочетаний клавиш для более быстрой записи и воспроизведения пользовательских потоков.
Не помните никаких сочетаний? Нет проблем, нажмите на ?
для просмотра всех сочетаний в любое время.
![](https://habrastorage.org/getpro/habr/upload_files/841/a73/94f/841a7394fc81a7f06d9f1c35170ec1d4.png)
Вы даже можете настроить эти ярлыки через меню настроек.
![](https://habrastorage.org/getpro/habr/upload_files/e7a/151/0ea/e7a1510eac5fefce26d706b599d750a5.png)
Если вы работаете на другой панели и хотите запустить запись пользовательского потока, используйте команду Создать новую запись
из меню команд в DevTools.
![](https://habrastorage.org/getpro/habr/upload_files/f0b/c4b/059/f0bc4b0592328753be848fa233532f62.png)
Известная проблема: 1339771.
Улучшенная подсветка синтаксиса Angular
DevTools улучшил подсветку синтаксиса для шаблонов Angular HTML, что облегчает чтение кода и распознавание его структуры.
![](https://habrastorage.org/getpro/habr/upload_files/94b/7d1/601/94b7d16018e9331d78c15e42d30915fc.png)
Известные проблемы: 1385374, 1385678.
Реорганизация пункта Cache (кэш) на панели Application
Панель Cache Storage
теперь можно найти в разделе Storage
в панели Application
, в то время как пункт Back/forward cache
была перемещена в раздел Background Services
.
![](https://habrastorage.org/getpro/habr/upload_files/e39/c31/a6b/e39c31a6b20a2e84d6be50113df19ccc.png)
Известная проблема: 1407166
Разные мелкие исправления и улучшения
Вот некоторые заслуживающие внимания исправления в этом обновлении:
DevTools был обновлен, чтобы учитывать параметр отключения кэша при загрузке
sourcemaps
. (1407084)Панель элементов теперь сразу автоматически фокусируется на первом подходящем элементе в результатах поиска. (1381853)
Различные исправления для повышения надежности
sourcemap
ибрейкпоинтов
. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)-
Чтобы облегчить отладку, DevTools теперь поддерживает вычисление выражений с помощью частных членов класса. (1381806)
Где скачать и как получать обновления раньше релиза
Рассмотрите возможность использования Chrome Canary, Dev или Beta в качестве браузера разработки по умолчанию.
Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, тестируют передовые API веб-платформы и обнаруживают проблемы на вашем сайте раньше, чем это делают ваши пользователи!
Как связаться с командой Chrome DevTools
Используйте следующие опции, чтобы обсудить новые функции и изменения или что-либо еще, связанное с DevTools.
Через crbug.com.
-
Сообщите о проблеме DevTools, используя More options > Help > Report a DevTools issues в DevTools.
Оставляйте комментарии к нашим видеороликам Что нового в DevTools или Гайды по DevTools.
Список всех изменений в DevTools.
Заключение
Надеюсь, что перевод был полезен и вы узнали что-то новое.
В комментариях можете смело обсуждать интересующие вас проблемы относительно DevTools, а ошибки лучше сразу отправлять в лс, спасибо! :)
Getequ
Отличная работа - слушать её с дичайшим акцентом порой просто невыносимо, даже ЮТуб не всегда справляется с генерацией субтитров (автор оригинала делает на ютубе это же описание в виде роликов)