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

Джеселин Йен

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

Панель «Рекордер» теперь поддерживает импорт и экспорт записей пользовательского потока в виде файла JSON. Это дополнение упрощает обмен пользовательскими потоками и может быть полезно для отчетов об ошибках.

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

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

  • Экспортируйте как файл JSON . Загрузите запись в виде файла JSON.
  • Экспортируйте как сценарий @puppeteer/replay . Загрузите запись как сценарий Puppeteer Replay .
  • Экспортировать как скрипт Puppeteer . Загрузите запись как сценарий «Кукловод» .

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

Параметры экспорта на панели «Рекордер»

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

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

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

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

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

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

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

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

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

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

Альтернативно вы можете изменить цветовой формат на HWB в палитре цветов .

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

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

DevTools теперь правильно оценивает и отображает частные средства доступа. Раньше вы не могли расширять классы с помощью частных средств доступа на консоли и панели «Источники» .

частные свойства в консоли

Проблемы с хромом: 1296855 , https://crbug.com/1303407.

Разное

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

  • В кэше возврата/пересылки теперь отображается идентификатор расширения, которое блокировало bfcache, если оно присутствует. ( 1284548 ).
  • Исправлена ​​поддержка автозаполнения для объектов, подобных массивам, имен классов CSS, тегов map.get и HTML. ( 1297101 , 1297491 , 1293807 , 1296983 )
  • Исправлено неправильное выделение при двойном щелчке по словам и отмене автозаполнения. ( 1298437 , 1298667 )
  • Исправлено сочетание клавиш для комментариев на панели «Источники» . ( 1296535 )
  • Повторно включите поддержку использования клавиши Alt (Параметры) для множественного выбора на панели «Источники» . ( 1304070 )

[Экспериментальное] Новый временной интервал и режим снимков на панели «Маяк».

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

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

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

Временной интервал и режим снимка в панельном доме Маяка

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

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

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

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

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

Что нового в DevTools

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