Record And Replay User Flow In Chrome
January 15, 2023 by Andreas Wik
Chrome has a really useful feature which lets you record and replay user flows. It also lets you export the recording and share with others who can then replay your flow directly in their own browser. I could think of tons of scenarios where this is useful. For example, explaining some obscure bug to a colleague. Record your exact steps and actions that triggers the bug, export the recording and send it over for them to replay.
Let’s dive right in.
Open the console
View > Developer > Developer Tools. Among all the tabs in the top there’s one titled Recorder – that’s the one we want.
Record user flow
When you’re ready to start recording a user flow, click Start new recording.
Give your recording a name and hit the big red record button in the bottom.
Now go through the flow. In my case I want to record the sign up process on Stackoverflow. So when I’m at stackoverflow.com I start the recording and click the Sign up button, then fill out my details to create my account. Once you’ve captured the flow you want, click End recording and it’s saved.
All your recordings will end up in the dropdown up top. To the right of the title of your recording you have a Replay button. Click this and your recording will be played for you in the browser – the simulator will click the same buttons and links, type the same values into form fields, and any other actions you performed while recording.
You also have the ability to edit each step of the flow. You can add steps, remove steps, add timeouts to it, and more. Play around with it!
Export and import user flow recordings
To export a recording, click the little export button located next to the list of recordings. This will generate a JSON file that you and others can import into their own browser. To import a recording (JSON file), click the import button located right next to the export one.
Hope you find this tool useful, I certainly do!
Ingat!
Share this article
