Новинки DevTools (Chrome 101)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

Импорт и экспорт записей действий пользователя в виде JSON файла

Вкладка Recorder теперь поддерживает импорт и экспорт записей действий пользователя в виде файла JSON. Это дополнение облегчает обмен записями и может быть полезно для отчёта об ошибках.

Например, загрузите этот файл JSON. Вы можете импортировать его при помощи кнопки импорта и воспроизвести запись.

Кроме того, вы также можете экспортировать запись. После записи пользовательских действий нажмите на кнопку экспорта. Доступно 3 варианта экспорта:

  • Export as a JSON file. Загрузить запись в виде файла JSON.
  • Export as a @puppeteer/replay script. Загрузить запись как скрипт для Puppeteer Replay.
  • Export as a Puppeteer script. Загрузить запись как скрипт для Puppeteer.

Обратитесь к документации, чтобы узнать больше о различиях между опциями.

Варианты экспорта во вкладке Recorder

Задача в трекере Chromium: 1257499

Просмотр каскадных слоёв в панели Стили (Styles)

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

В этом примере определено 3 каскадных слоя: page, component и base. В панели Стили (Styles) вы можете просмотреть каждый слой и его стили.

Кликните на имя слоя, чтобы просмотреть порядок слоёв. Слой page имеет наибольшую специфичность, поэтому фон блока box зелёный.

Просмотр каскадных слоёв в панели Стили

Задача в трекере Chromium: 1240596

Поддержка функции цвета hwb()

Теперь вы можете просматривать и редактировать цвет в формате HWB в DevTools.

На панели Стили (Styles) зажмите клавишу Shift и кликните на любой превью цвета, чтобы изменить формат. Добавлен формат цвета HWB.

Кроме того, вы можете изменить формат цвета на HWB в палитре цветов.

Функции цвета hwb()

Улучшено отображение приватных свойств

DevTools теперь правильно оценивает и отображает приватные ключи объектов. Ранее вы не могли разворачивать классы с приватными ключами во вкладках Консоль (Console) и Источники (Sources).

Приватные свойства в Консоли

Задачи в трекере Chromium: 1296855, https://crbug.com/1303407

Другие важные моменты

Вот несколько заслуживающих внимания исправлений в этом выпуске:

  • Исправлена поддержка автодополнения объектов типа массив, имён CSS-классов, map.get и HTML-тегов. (1297101, 1297491, 1293807, 1296983)
  • Исправлена неправильная подсветка при двойном клике на слова и отмене автодополнения. (1298437, 1298667)
  • Исправлена поддержка горячих клавиш для комментирования во вкладке Источники (Sources). (1296535)
  • Вновь включена поддержка клавиш Alt (Options) для множественного выбора во вкладке Источники (Sources). (1304070)

[Эксперимент] Новые режимы временного промежутка и сводки во вкладке Lighthouse

Чтобы включить эту экспериментальную функцию, поставьте галочку в чекбоксе рядом с пунктом Use Lighthouse panel with timespan and snapshot modes в Настройки (Settings) > Эксперименты (Experiments).

Помимо существующего режима навигации, вкладка Lighthouse теперь поддерживает еще два режима измерения пользовательских потоков — timespan и сводка.

Например, вы можете использовать отчёты в режиме timespan для анализа пользовательских действий. Откройте эту демо-страницу. Выберите режим Timespan и нажмите Start timespan. Кликните на кофе на странице и завершите запись. Прочитайте отчёт, чтобы узнать Total Blocking Time и Cumulative Layout Shift обусловленные взаимодействием.

Каждый режим имеет свои уникальные сценарии использования, преимущества и ограничения. Пожалуйста, обратитесь к документации по Lighthouse для получения дополнительной информации.

Новые режимы временного промежутка и сводки во вкладке Lighthouse

Задача в трекере Chromium: 772558

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.