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

Джеселин Йен

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

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

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

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

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

Более подробную информацию о различиях между этими вариантами см. в документации .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разные моменты

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

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

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

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

Например, вы можете использовать отчёты по временному интервалу для анализа взаимодействий пользователей. Откройте эту демонстрационную страницу. Выберите режим «Временной интервал» и нажмите « Начать временной интервал» . На странице нажмите на кофе и завершите отсчёт. В отчёте вы найдёте информацию об общем времени блокировки и кумулятивном смещении макета , вызванном взаимодействием.

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

Временной интервал и режим моментального снимка в панели Lighthouse

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

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

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

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

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

Что нового в DevTools

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