Что нового в 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» .

,

Джеселин Йен

Импорт и экспорт записанных пользовательских потоков в качестве файла 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» .

,

Джеселин Йен

Import and export recorded user flows as a JSON file

The Recorder panel now supports importing and exporting user flow recordings as a JSON file. This addition makes it easier to share user flows and can be useful for bug reporting.

For example, download this JSON file . You can import it with the import button and replay the user flow .

Apart from that, you can export the recording as well. After recording a user flow , click on the export button. There are 3 export options:

  • Export as a JSON file . Download the recording as a JSON file.
  • Export as a @puppeteer/replay script . Download the recording as a Puppeteer Replay script.
  • Export as a Puppeteer script . Download the recording as Puppeteer script.

Consult the documentation to learn more about the differences between these options.

Export options in the Recorder panel

Chromium issue: 1257499

View cascade layers in the Styles pane

Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is particularly useful for large codebases, design systems, and when managing third party styles in applications.

In this example , there are 3 cascade layers defined: page , component and base . In the Styles pane, you can view each layer and its styles.

Click on the layer name to view the layer order. The page layer has the highest specificity, therefore the box background is green.

View cascade layers in the Styles pane

Chromium issue: 1240596

Support for the hwb() color function

You can now view and edit HWB color format in DevTools.

In the Styles pane, hold the Shift key and click on any color preview to change the color format. The HWB color format is added.

Alternatively, you can change the color format to HWB in the color picker .

hwb() color function

Improved the display of private properties

DevTools now properly evaluates and displays private accessors. Previously, you couldn't expand classes with private accessors in the Console and the Sources panel.

private properties in the Console

Chromium issues: 1296855 , https://crbug.com/1303407

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • The Back/forward cache now displays the extension ID which blocked bfcache when present.( 1284548 )
  • Fixed autocompletion support for array-like objects, CSS class names, map.get and HTML tags. ( 1297101 , 1297491 , 1293807 , 1296983 )
  • Fixed incorrect highlights when double-clicking on words and undoing autocomplete. ( 1298437 , 1298667 )
  • Fixed comment keyboard shortcut in the Sources panel. ( 1296535 )
  • Re-enable support for using Alt (Options) key for multi selection in the Sources panel. ( 1304070 )

[Experimental] New timespan and snapshot mode in the Lighthouse panel

Apart from the existing navigation mode, the Lighthouse panel now support two more modes on measuring user flows - timespan and snapshot .

For example, you can use the timespan reports to analyze user interactions. Open this demo page. Select the Timespan mode and click on Start timespan . On the page, click on a coffee and end the timespan. Read the report to find out the Total Blocking Time and Cumulative Layout Shift that were caused by the interaction.

Each mode has its own unique use cases, benefits, and limitations. Please refer to the Lighthouse documentation for more information.

Timespan and snapshot mode in the Lighthouse panelhouse

Chromium issue: 772558

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

,

Джеселин Йен

Import and export recorded user flows as a JSON file

The Recorder panel now supports importing and exporting user flow recordings as a JSON file. This addition makes it easier to share user flows and can be useful for bug reporting.

For example, download this JSON file . You can import it with the import button and replay the user flow .

Apart from that, you can export the recording as well. After recording a user flow , click on the export button. There are 3 export options:

  • Export as a JSON file . Download the recording as a JSON file.
  • Export as a @puppeteer/replay script . Download the recording as a Puppeteer Replay script.
  • Export as a Puppeteer script . Download the recording as Puppeteer script.

Consult the documentation to learn more about the differences between these options.

Export options in the Recorder panel

Chromium issue: 1257499

View cascade layers in the Styles pane

Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is particularly useful for large codebases, design systems, and when managing third party styles in applications.

In this example , there are 3 cascade layers defined: page , component and base . In the Styles pane, you can view each layer and its styles.

Click on the layer name to view the layer order. The page layer has the highest specificity, therefore the box background is green.

View cascade layers in the Styles pane

Chromium issue: 1240596

Support for the hwb() color function

You can now view and edit HWB color format in DevTools.

In the Styles pane, hold the Shift key and click on any color preview to change the color format. The HWB color format is added.

Alternatively, you can change the color format to HWB in the color picker .

hwb() color function

Improved the display of private properties

DevTools now properly evaluates and displays private accessors. Previously, you couldn't expand classes with private accessors in the Console and the Sources panel.

private properties in the Console

Chromium issues: 1296855 , https://crbug.com/1303407

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • The Back/forward cache now displays the extension ID which blocked bfcache when present.( 1284548 )
  • Fixed autocompletion support for array-like objects, CSS class names, map.get and HTML tags. ( 1297101 , 1297491 , 1293807 , 1296983 )
  • Fixed incorrect highlights when double-clicking on words and undoing autocomplete. ( 1298437 , 1298667 )
  • Fixed comment keyboard shortcut in the Sources panel. ( 1296535 )
  • Re-enable support for using Alt (Options) key for multi selection in the Sources panel. ( 1304070 )

[Experimental] New timespan and snapshot mode in the Lighthouse panel

Apart from the existing navigation mode, the Lighthouse panel now support two more modes on measuring user flows - timespan and snapshot .

For example, you can use the timespan reports to analyze user interactions. Open this demo page. Select the Timespan mode and click on Start timespan . On the page, click on a coffee and end the timespan. Read the report to find out the Total Blocking Time and Cumulative Layout Shift that were caused by the interaction.

Each mode has its own unique use cases, benefits, and limitations. Please refer to the Lighthouse documentation for more information.

Timespan and snapshot mode in the Lighthouse panelhouse

Chromium issue: 772558

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.