В Chrome DevTools появилась панель Recorder

В инструментах разработчика DevTools появилась новая панель – «Recorder». С её помощью можно записать, воспроизвести и измерить, как быстро реагирует сайт на действия пользователя. Например, в процессе оформления заказа.

Панель Recorder поможет измерить метрику «Отзывчивость». Это тестовая метрика Core Web Vitals, которую Google анонсировал недавно.

Панель доступна для версии Chrome Canary. Пока в рамках теста.

Как открыть Recorder panel

• Откройте DevTools. Для этого нажмите комбинацию клавиш: для Mac OS – Command+Option+I, для Windows – Control+Shift+I.
• Кликните на More Options > More tools > Recorder.
  

  

Зачем использовать

• записать весь пользовательский путь, а не только первое взаимодействие. Можно записать как пользователь добавил товар в корзину, перешёл в корзину, начал оформлять заказ, заполнил платёжные реквизиты и т.д.;
• воспроизвести пользовательский путь. При воспроизведении также можно имитировать медленное интернет-соединение. Для этого в настройках в раскрывающемся списке выберите «медленный 3G»;
• измерить производительность. Если кликнуть на кнопку «Measure Performance», то сначала вы увидите воспроизведение пути пользователя, а потом разбивку на секунды на панели «Performance». На этой панели можно установить флажок Web Vitals и определять, как улучшить скорость ответа страницы:

Google предлагает протестировать панель с помощью демонстрационной страницы заказа кофе.

Вот, как это выглядит:

Подробнее о том, как пользоваться новой панелью – в статье Chrome Developers.