Rzuć okiem na nowy panel Dyktafon (funkcja w wersji testowej) za pomocą poniższego filmu.
W tym samouczku dowiesz się, jak używać panelu Dyktafon do nagrywania, odtwarzania i mierzenia ścieżek użytkowników.
Więcej informacji o tym, jak udostępniać nagrane ścieżki użytkownika, edytować je i ich kroki, znajdziesz w artykule Informacje o funkcjach narzędzia Recorder.
Otwórz panel Dyktafonu
- Otwórz Narzędzia deweloperskie.
Kliknij Więcej opcji
> Więcej narzędzi > Dyktafon.
Możesz też otworzyć panel Dyktafon, korzystając z menu poleceń.
Wprowadzenie
Użyjemy strony demonstracyjnej zamawiania kawy. Proces płatności jest typową sekwencją zakupów w witrynach sklepów.
W kolejnych sekcjach pokażemy, jak nagrać, odtworzyć i sprawdzić ten proces płatności za pomocą panelu Nagrywarka:
- Dodaj kawę do koszyka.
- Dodaj kolejną kawę do koszyka.
- Otwórz stronę koszyka.
- Usuń jedną kawę z koszyka.
- Rozpocznij proces płatności.
- Podaj dane do płatności.
- Zapłać.
Rejestrowanie ścieżki użytkownika
- Otwórz tę stronę prezentacji. Aby rozpocząć, kliknij przycisk Rozpocznij nowe nagrywanie.
- W polu tekstowym Nazwa nagrania wpisz „kawa przy kasie”.
- Kliknij przycisk Rozpocznij nowe nagrywanie. Nagrywanie zostało rozpoczęte. W panelu wyświetla się komunikat Nagrywanie…, co oznacza, że trwa nagrywanie.
- Kliknij Cappuccino, żeby dodać je do koszyka.
- Kliknij Americano, aby dodać produkt do koszyka. Rejestrator pokazuje czynności, które zostały do tej pory wykonane.
- Otwórz stronę koszyka i usuń z niego Americano.
- Aby rozpocząć proces płatności, kliknij przycisk Razem: 19,00 PLN.
- W formularzu szczegółów płatności wypełnij pola Nazwa i E-mail oraz zaznacz pole wyboru Chcę otrzymywać informacje o zamówieniach i wiadomościach promocyjnych.
- Kliknij przycisk Prześlij, aby zakończyć proces płatności.
- Aby zakończyć nagrywanie, w panelu Nagrywarka kliknij
przycisk Zakończ nagrywanie.
Powtórzenie ścieżki użytkownika
Po nagraniu ścieżki użytkownika możesz ją odtworzyć, klikając przycisk 
Odtwórz.
Na stronie możesz zobaczyć odtworzenie ścieżki użytkownika. Postęp odtwarzania jest też widoczny w panelu Nagrywarka.
Jeśli podczas nagrywania popełnisz błąd lub coś nie działa, możesz zdebugować ten film: spowolnić ponowne odtwarzanie, ustawić punkt przerwania i wykonać tę czynność krok po kroku.
Symulowanie wolnej sieci
Możesz symulować wolne połączenie z internetem, konfigurując ustawienia odtwarzania. Na przykład rozwiń Ustawienia odtwarzania ponownie i w menu Sieć wybierz Wolne 3G.
W przyszłości może zostać dostępnych więcej ustawień. Podziel się z nami swoimi ustawieniami odtwarzania.
Pomiar ścieżki użytkownika
Skuteczność ścieżki użytkownika możesz mierzyć, klikając przycisk Zmierz skuteczność. Na przykład proces płatności jest kluczowym procesem użytkownika w witrynie sklepu. Dzięki panelowi Dyktafon możesz raz zarejestrować proces płatności i regularnie go mierzyć.
Kliknięcie przycisku Zmierz wydajność najpierw spowoduje ponowne odtworzenie wzorca przeglądania, a potem otwarcie zrzutu wydajności w panelu Wydajność.
Dowiedz się, jak analizować wydajność strony w czasie działania za pomocą panelu Wydajność. Możesz zaznaczyć pole wyboru Web Vitals w panelu Wydajność, aby wyświetlić dane Web Vitals i znaleźć możliwości poprawy wrażeń użytkowników podczas przeglądania witryny.
Edytuj kroki
Omówimy podstawowe opcje edycji kroków w nagrywanym przepływie pracy.
Pełną listę opcji edycji znajdziesz w sekcji Edytuj kroki w opisie funkcji.
Rozwiń kroki
Rozwiń każdy krok, aby zobaczyć jego szczegóły. Rozwiń na przykład krok Kliknij element „Cappuccino”.
Powyższy krok pokazuje 2 selektory. Więcej informacji znajdziesz w artykule o selektorze nagrania.
Podczas ponownego odtwarzania ścieżki użytkownika Dyktafon próbuje wysłać zapytanie do elementu za pomocą jednego z selektorów według sekwencji. Jeśli na przykład Dyktafon wyśle zapytanie do elementu z pierwszym selektorem, pominie drugi selektor i przejdzie do następnego kroku.
Dodawanie i usuwanie selektorów z kroku
Możesz dodać lub usunąć dowolne selektory. Możesz np. usunąć selektor nr 2, bo w tym przypadku wystarczy aria/Cappuccino. Najedź kursorem na selektor nr 2 i kliknij -, aby go usunąć.
Edytuj selektory w kroku
Można też edytować selektor. Jeśli np. chcesz wybrać Mocha zamiast Cappuccino, możesz:
Zamiast tego zmień wartość selektora na aria/Mocha.
Możesz też kliknąć przycisk Wybierz
, a następnie na stronie kliknąć Mocha.Powtórz teraz proces. Powinien on wybrać Mocha zamiast Cappuccino.
Spróbuj edytować inne właściwości kroku, np. type, target, value i inne.
Dodaj lub usuń kroki
Możesz też dodawać i usuwać kroki. Jest to przydatne, jeśli chcesz dodać dodatkowy krok lub usunąć przypadkowo dodany krok. Zamiast ponownie rejestrować ścieżkę użytkownika, możesz ją po prostu edytować:
Kliknij prawym przyciskiem myszy krok, który chcesz edytować, lub kliknij ikonę z 3 kropkami
obok niego. 
Aby go usunąć, możesz kliknąć Usuń krok. Na przykład zdarzenie Przewiń po kroku Mocha nie jest konieczne.
Załóżmy, że chcesz poczekać, aż na stronie pojawi się 9 kaw, zanim wykonasz jakiekolwiek czynności. W menu kroków Mocha wybierz Dodaj krok przed.
W sekcji Zgłoś element zmodyfikuj nowy krok, podając te informacje:
- type: waitForElement
- selektor 1: .cup
- operator: == (kliknij przycisk Dodaj operator)
- count: 9 (kliknij przycisk dodaj licznik)
Odtwórz ponownie proces teraz, aby zobaczyć zmiany.
Dalsze kroki
Gratulujemy! Udało Ci się ukończyć samouczek.
Aby poznać więcej funkcji i przepływów pracy (np. importowania i eksportowania) powiązanych z Dyktafonem, zapoznaj się z informacjami o funkcjach Dyktafonu.