Отладка 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 можно с помощью функции Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
- Напишите твит в