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

Джеселин Йин

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

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

Панель «Стили» теперь поддерживает 12 новых цветовых пространств и 7 новых цветовых охватов, как описано в спецификации CSS Color Level 4. Для получения более подробной информации о доступных в веб-среде параметрах цвета см. руководство по цветопередаче в CSS High Definition.

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

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

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

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

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

Кроме того, с помощью новой комбинации клавиш вы можете выбирать цвета с экрана. Нажмите клавишу «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

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

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

Вот некоторые основные моменты: - Оба варианта обработки исключений приостановки перемещены в панель «Точки останова» и снабжены текстовыми пояснениями для большей наглядности. Приостановить параметры исключений.

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

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

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

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

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

Настраиваемые ярлыки для записи экрана

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

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

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

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

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

Номер выпуска Chromium: 1339771

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

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

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

Настройте порядок кэша в панели приложений.

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

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

Что нового в инструментах разработчика

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