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

Джеселин Йен

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

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

Панель «Стили» теперь поддерживает 12 новых цветовых пространств и 7 новых гамм, как указано в спецификации CSS Color Level 4 . См . «Руководство по цветам CSS высокого разрешения», чтобы получить полное представление о вариантах цвета, доступных в Интернете.

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

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

Палитра цветов поддерживает все новые цветовые пространства с большим количеством функций. Например, щелкните образец цвета 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. Устаревшая настройка цветового формата.

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

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

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

Вот некоторые основные моменты: — Оба параметра исключения паузы перемещены на панель «Точки останова» и помечены текстом, чтобы сделать его более понятным. Приостановить параметры исключения.

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

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

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

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

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

Настраиваемые ярлыки рекордера

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

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

Не помните ярлыки? Нет проблем, нажмите ? Кнопка для просмотра всех ярлыков в любое время. Ярлыки рекордера.

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

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

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

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

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

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

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

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

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

Разное

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

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

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

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

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

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

Что нового в DevTools

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