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

Джеселин Йен

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

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

For example, download this JSON file . Вы можете импортировать его с помощью кнопки импорта и воспроизвести пользовательский процесс .

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

  • Экспортируйте как файл JSON . Download the recording as a JSON file.
  • Export as a @puppeteer/replay script . Загрузите запись как сценарий Puppeteer Replay .
  • Export as a Puppeteer script . Download the recording as Puppeteer script.

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

Export options in the Recorder panel

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

View cascade layers in the Styles pane

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

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

Click on the layer name to view the layer order. Слой 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 )
  • Fixed comment keyboard shortcut in the Sources panel. ( 1296535 )
  • Повторно включите поддержку использования клавиши Alt (Параметры) для множественного выбора на панели «Источники» . ( 1304070 )

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

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

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

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

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

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

Download the preview channels

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

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

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

Что нового в DevTools

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

,

ДЕКЕЛЯН ИН

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

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

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

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

  • Экспорт как файл JSON . Загрузите запись как файл JSON.
  • Экспорт как сценарий кукловода/воспроизведения . Загрузите запись как сценарий воспроизведения кукловода .
  • Экспорт как сценарий кукловода . Загрузите запись как кукольный скрипт.

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

Параметры экспорта на панели регистратора

Выпуск хрома: 1257499

Посмотреть каскадные слои на панели Styles

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

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

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

Посмотреть каскадные слои на панели Styles

Выпуск хрома: 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 и Snapshot .

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

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

Timesspan и режим снимка в панели маяка

Выпуск хрома: 772558

Скачать каналы предварительного просмотра

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

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

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

Что нового в Devtools

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