Dai un'occhiata al nuovo riquadro Registratore (funzionalità in anteprima) e guarda il video qui sotto.
Completa questo tutorial per scoprire come utilizzare il riquadro Registratore per registrare, riprodurre di nuovo e misurare i flussi utente.
Per ulteriori informazioni su come condividere i flussi utente registrati e modificarli e i relativi passaggi, consulta la documentazione di riferimento sulle funzionalità del Registratore.
Apri il riquadro Registratore
- Apri DevTools.
Fai clic su Altre opzioni
> Altri strumenti > Registratore.
In alternativa, usa il menu dei comandi per aprire il riquadro Registratore.
Introduzione
Utilizzeremo questa pagina dimostrativa relativa all'ordinazione di caffè. Pagamento è un flusso di utenti comune tra i siti web di shopping.
Nelle sezioni successive, ti spiegheremo come registrare, riprodurre e controllare il seguente flusso di pagamento con il riquadro Registratore:
- Aggiungi un caffè al carrello.
- Aggiungi un altro caffè al carrello.
- Vai alla pagina del carrello.
- Rimuovi un caffè dal carrello.
- Avvia la procedura di pagamento.
- Inserisci i dati di pagamento.
- Paga.
Registrare un flusso di utenti
- Apri questa pagina dimostrativa. Fai clic sul pulsante Avvia nuova registrazione per iniziare.
- Inserisci "caffè checkout" nella casella di testo Nome registrazione.
- Fai clic sul pulsante Avvia una nuova registrazione. La registrazione è iniziata. Il riquadro mostra Registrazione..., a indicare che la registrazione è in corso.
- Fai clic su Cappuccino per aggiungerlo al carrello.
- Fai clic su Americano per aggiungerlo al carrello. Tieni presente che l'app Registratore mostra i passaggi che hai eseguito finora.
- Vai alla pagina del carrello e rimuovi Americano dal carrello.
- Fai clic sul pulsante Totale: 19,00 $ per avviare la procedura di pagamento.
- Nel modulo dei dettagli sul pagamento, compila le caselle di testo Nome ed Email e seleziona la casella di controllo Desidero ricevere aggiornamenti sugli ordini e messaggi promozionali.
- Fai clic sul pulsante Invia per completare la procedura di pagamento.
- Nel riquadro Registratore, fai clic sul pulsante
Termina registrazione per terminare la registrazione.
Riprodurre di nuovo un flusso utente
Dopo aver registrato un flusso utente, puoi guardarlo di nuovo facendo clic sul pulsante 
Riproduci.
Puoi vedere la riproduzione del flusso utente sulla pagina. L'avanzamento della riproduzione viene visualizzato anche nel riquadro Registratore.
Se hai fatto un clic errato durante la registrazione o se qualcosa non funziona, puoi eseguire il debug del flusso utente: rallenta la riproduzione, imposta un punto di interruzione ed esegui la procedura passo passo.
Simula una rete lenta
Puoi simulare una connessione di rete lenta configurando le impostazioni di riproduzione. Ad esempio, espandi le Impostazioni di riproduzione e seleziona 3G lento nel menu a discesa Rete.
In futuro potrebbero essere supportate altre impostazioni. Condividi con noi le impostazioni di riproduzione che ti piacerebbe avere.
Misurare un flusso di utenti
Puoi misurare le prestazioni di un flusso utente facendo clic sul pulsante Misura il rendimento. Ad esempio, il pagamento è un flusso di utenti fondamentale in un sito web di shopping. Con il riquadro Registratore, puoi registrare il flusso di pagamento una sola volta e misurarlo regolarmente.
Se fai clic sul pulsante Misura rendimento, viene attivata innanzitutto una riproduzione del flusso utente, quindi viene aperta l'analisi del rendimento nel riquadro Rendimento.
Scopri come analizzare il rendimento di runtime della tua pagina con il riquadro Rendimento. Puoi attivare la casella di controllo Web Vitals nel riquadro Prestazioni per visualizzare le metriche Web Vitals e identificare opportunità per migliorare l'esperienza di navigazione degli utenti.
Modifica passaggi
Esaminiamo le opzioni di base per modificare i passaggi all'interno del flusso di lavoro registrato.
Per un elenco completo delle opzioni di modifica, consulta la sezione Passaggi di modifica nella Guida di riferimento alle funzionalità.
Espandi passi
Espandi ogni passaggio per visualizzare i dettagli dell'azione. Ad esempio, espandi il passaggio Clic sull'elemento "Cappuccino".
Il passaggio precedente mostra due selettori. Per ulteriori informazioni, vedi Comprendere il selettore della registrazione.
Durante la riproduzione del flusso utente, il Registratore prova a eseguire una query sull'elemento con uno dei selettori in base alla sequenza. Ad esempio, se il Registratore esegue una query sull'elemento con il primo selettore, salterà il secondo selettore e andrà al passaggio successivo.
Aggiungere e rimuovere selettori da un passaggio
Puoi aggiungere o rimuovere qualsiasi selettore. Ad esempio, puoi rimuovere il selettore n. 2 perché in questo caso è sufficiente aria/Cappuccino. Passa il mouse sopra il selettore n. 2 e fai clic su - per rimuoverlo.
Modifica i selettori in un passaggio
Anche il selettore è modificabile. Ad esempio, se vuoi selezionare Mocha anziché Cappuccino, puoi:
Modifica il valore del selettore in aria/Mocha.
In alternativa, fai clic sul pulsante Seleziona
e poi su Mocha nella pagina.Riproduci il flusso ora, dovresti selezionare Mocha anziché Cappuccino.
Prova a modificare altre proprietà del passaggio, come type, target, value e altre ancora.
Aggiungere e rimuovere passaggi
Esistono anche opzioni per aggiungere e rimuovere passaggi. Questa operazione è utile se vuoi aggiungere un passaggio in più o rimuovere un passaggio aggiunto per errore. Anziché registrare di nuovo il flusso dell'utente, puoi semplicemente modificarlo:
Fai clic con il pulsante destro del mouse sul passaggio da modificare o fai clic sull'icona con tre puntini
accanto a esso. 
Puoi selezionare Rimuovi passaggio per rimuoverlo. Ad esempio, l'evento scroll dopo il passaggio Mocha non è necessario.
Supponiamo che tu voglia attendere che vengano visualizzati i 9 caffè sulla pagina prima di eseguire qualsiasi passaggio. Nel menu dei passaggi di Mocha, seleziona Aggiungi passaggio prima.
In Dichiara elemento, modifica il nuovo passaggio con i seguenti dettagli:
- tipo: waitForElement
- selettore 1: .cup
- operatore: == (fai clic sul pulsante Aggiungi operatore)
- numero: 9 (fai clic sul pulsante Aggiungi conteggio)
Riproduci il flusso ora per vedere le modifiche.
Passaggi successivi
Congratulazioni, hai completato il tutorial.
Per esplorare altre funzionalità e flussi di lavoro (ad esempio, importazione ed esportazione) correlati a Registratore, consulta la documentazione di riferimento sulle funzionalità di Registratore.