Взгляните на новую панель «Рекордер» (функция предварительного просмотра) на видео ниже.
Пройдите это руководство, чтобы узнать, как использовать панель «Рекордер» для записи, воспроизведения и измерения пользовательских потоков.
Дополнительную информацию о том, как делиться записанными пользовательскими потоками, редактировать их и их шаги, см. в справочнике по функциям Recorder .
Откройте панель «Рекордер»
- Откройте Инструменты разработчика .
Нажмите «Дополнительные параметры».
> Дополнительные инструменты > Диктофон . 
Альтернативно используйте командное меню , чтобы открыть панель «Рекордер» .
Введение
Мы будем использовать эту демонстрационную страницу заказа кофе . Оформление заказа — это обычный поток пользователей на торговых сайтах.
В следующих разделах мы расскажем, как записывать, воспроизводить и проверять следующий процесс оформления заказа с помощью панели «Рекордер» :
- Добавьте кофе в корзину.
- Добавьте в корзину еще один кофе.
- Перейдите на страницу корзины.
- Удалите один кофе из тележки.
- Запустите процесс оформления заказа.
- Заполните платежные реквизиты.
- Проверить.
Запишите поток пользователя
- Откройте эту демонстрационную страницу. Нажмите кнопку «Начать новую запись», чтобы начать.
- Введите «касса кофе» в текстовом поле «Имя записи ».
- Нажмите кнопку «Начать новую запись» . Запись начата. На панели отображается надпись «Запись...», указывающая, что запись идет.
- Нажмите на капучино , чтобы добавить его в корзину.
- Нажмите на Американо , чтобы добавить его в корзину. Обратите внимание, что рекордер показывает шаги, которые вы выполнили на данный момент.
- Перейдите на страницу корзины и удалите Американо из корзины.
- Нажмите кнопку « Итого: $19,00», чтобы начать процесс оформления заказа.
- В форме платежных реквизитов заполните текстовые поля «Имя» и «Электронная почта» и установите флажок «Я хочу получать обновления заказов и рекламные сообщения». флажок.
- Нажмите кнопку «Отправить» , чтобы завершить процесс оформления заказа.
- На панели «Рекордер» нажмите
Кнопка завершения записи, чтобы завершить запись.
Воспроизведение пользовательского потока
После записи пользовательского потока вы можете воспроизвести его, нажав на значок 
Кнопка повтора .
Вы можете увидеть повтор потока пользователя на странице. Ход воспроизведения также отображается на панели «Рекордер» .
Если вы допустили ошибку во время записи или что-то не работает, вы можете отладить свой пользовательский поток : замедлить его воспроизведение, установить точку останова и выполнить его шаг за шагом.
Имитировать медленную сеть
Вы можете имитировать медленное сетевое соединение, настроив параметры воспроизведения . Например, разверните « Настройки воспроизведения» и выберите «Медленный 3G» в раскрывающемся списке «Сеть» .
В будущем могут поддерживаться дополнительные настройки. Поделитесь с нами настройками повтора, которые вы хотели бы иметь!
Измерьте поток пользователей
Вы можете измерить производительность пользовательского потока, нажав кнопку «Измерить производительность» . Например, оформление заказа — это критически важный пользовательский поток на веб-сайте покупок. С помощью панели «Рекордер» вы можете один раз записать процесс оформления заказа и регулярно измерять его.
Нажатие кнопки «Измерить производительность» сначала запускает воспроизведение пользовательского потока, а затем открывает трассировку производительности на панели «Производительность» .
Узнайте, как анализировать производительность вашей страницы во время выполнения с помощью панели «Производительность» . Вы можете установить флажок Web Vitals на панели «Производительность» , чтобы просматривать показатели Web Vitals и определять возможности улучшения пользовательского опыта просмотра.
Редактировать шаги
Давайте рассмотрим основные параметры редактирования шагов записанного рабочего процесса.
Полный список параметров редактирования см. в разделе « Шаги редактирования в справочнике по функциям».
Развернуть шаги
Разверните каждый шаг, чтобы увидеть детали действия. Например, разверните шаг «Нажмите элемент «Капучино» .
На шаге выше показаны два селектора . Дополнительные сведения см. в разделе Общие сведения о селекторе записи .
При воспроизведении пользовательского потока Recorder пытается запросить элемент с помощью одного из селекторов по порядку. Например, если средство записи успешно запросит элемент с помощью первого селектора, оно пропустит второй селектор и перейдет к следующему шагу.
Добавление и удаление селекторов из шага
Вы можете добавлять или удалять любые селекторы. Например, вы можете удалить селектор №2 , потому что в этом случае достаточно только aria/Cappuccino . Наведите курсор на селектор №2 и нажмите - , чтобы удалить его.
Редактировать селекторы за один шаг
Селектор также доступен для редактирования. Например, если вы хотите выбрать «Мокка» вместо «Капучино» , вы можете:
Вместо этого измените значение селектора на aria/Mocha .
Либо нажмите кнопку «Выбрать».
кнопку, а затем нажмите Мокко на странице. Воспроизведите поток сейчас, он должен выбрать Mocha вместо Cappuccino .
Попробуйте отредактировать другие свойства шага, такие как тип , цель , значение и т. д.
Добавляйте и удаляйте шаги
Также есть варианты добавления и удаления шагов. Это полезно, если вы хотите добавить дополнительный шаг или удалить случайно добавленный шаг. Вместо того, чтобы перезаписывать пользовательский поток, вы можете просто отредактировать его:
Щелкните правой кнопкой мыши шаг, который хотите изменить, или щелкните значок
трехточечный значок рядом с ним. 
Вы можете выбрать «Удалить шаг», чтобы удалить его. Например, событие Scroll после шага Mocha не является обязательным.
Допустим, вы хотите подождать, пока на странице не отобразятся 9 чашек кофе , прежде чем выполнять какие-либо действия. В меню шагов Mocha выберите «Добавить шаг перед» .
В Assert Element отредактируйте новый шаг, указав следующие сведения:
- тип: ожиданиеForElement
- селектор №1: .cup
- оператор: == (нажмите кнопку «Добавить оператор» )
- количество: 9 (нажмите кнопку «Добавить количество »)
Воспроизведите процесс сейчас, чтобы увидеть изменения.
Следующие шаги
Поздравляем, вы завершили урок!
Дополнительные сведения о дополнительных функциях и рабочих процессах (например, импорте и экспорте), связанных с устройством записи , см. в справочнике по функциям устройства записи .