Record And Replay User Flow In Chrome

January 15, 2023 by Andreas Wik

Record and replay user flows in Chrome

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.

Recording tab

 

Record user flow

When you’re ready to start recording a user flow, click Start new recording.

Start new recording

 

Give your recording a name and hit the big red record button in the bottom.

Name and start new recording

 

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.

Recording

 

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.

Replay

 

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!

Edit user flow steps

 

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.

Export and import recordings

 

Hope you find this tool useful, I certainly do!

Ingat!

Share this article

Recommended articles

@awikio