Что нового в 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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