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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DevTools теперь правильно оценивает и отображает частные аксессоры. Раньше нельзя было расширять классы с частными аксессорами в консоли и на панели Sources .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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