Chrome Recorder: Record, Replay and Measure User Flows
Tags: chrome, webdev, recorder, productivity
Published: 2022-04-28 09:01:53

---
title: Chrome Recorder: Record, Replay and Measure User Flows
published: true
date: 
tags: chrome, webdev, recorder, productivity
canonical_url: https://www.mokkapps.de/blog/chrome-recorder-record-replay-and-measure-user-flows/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3idc0vibhr6nmnhs3lvt.jpg
---

Typically, a user needs to process multiple pages or steps to finish his journey, such as submitting an order or completing a registration. If we as developers need to develop one of the last pages of this user flow, we need to manually process all the previous pages/steps every time we refresh the page or need to restart the flow.

If multiple team members (also tester) have to do the same steps repeatedly, this costs a lot of time and, therefore, money. In previous projects, we often developed custom tools to proceed to certain pages/steps in the application automatically.

But now, the [Chrome browser](https://chrome.com/) provides this functionality as a preview feature.

## What is Chrome Recorder?[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#what-is-chrome-recorder)

[Chrome Recorder](https://developer.chrome.com/docs/devtools/recorder/) is a preview feature in the Chrome browser designed to record, replay and measure user flows of an application.

You can start a recording, execute the steps you’d like to record in the app (such as typing or clicking), and export the recording as JSON file, [Puppeteer](https://pptr.dev/) script or [@puppeteer/replay](https://github.com/puppeteer/replay) script.

It’s then possible to replay the recorded user flow and measure the performance of the run.

## Open Recorder[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#open-recorder)

To find the Recorder, you first open up the Chrome DevTools.

> Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).

You can open the Recorder from the options menu:

[![Open Chrome Recorder from options menu](https://www.mokkapps.de/static/12d7e2a17be57544804113670477bda4/f058b/chrome-recorder-open-more-tools.png "Open Chrome Recorder from options menu")](/static/12d7e2a17be57544804113670477bda4/f058b/chrome-recorder-open-more-tools.png)
_Open Chrome Recorder from options menu_

Alternatively, you can open it from [Command Menu](https://developer.chrome.com/docs/devtools/command-menu/):

![Open Chrome Recorder from Command Menu](https://www.mokkapps.de/static/544cf48f47fd17c724de9c95e8526240/63a68/chrome-recorder-open-command-menu.png "Open Chrome Recorder from Command Menu")
_Open Chrome Recorder from Command Menu_

## Record[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#record)

I’ll be using [Vue 3 Form Wizard](https://github.com/Anivive/vue3-form-wizard) to demonstrate the recording & replaying of a simple user flow.

[The demo page](https://vue3-form-wizard-demo.stackblitz.io/) provides a simple wizard with multiple steps containing common input types like text & select inputs.

Let’s start the recording:

[![Start Recording](https://www.mokkapps.de/static/7cfc795a2223e83e42049d0612c1ccf4/1e043/chrome-recorder-start-recording.png "Start Recording")](/static/7cfc795a2223e83e42049d0612c1ccf4/d61c2/chrome-recorder-start-recording.png)
_Start Recording_

The selector attribute textbox is optional. See [Customize the recording’s selector](https://developer.chrome.com/docs/devtools/recorder/#customize-selector).

Once you hit the record button, you can enter all data in the wizard. If you are done, hit the “End recording” button at the bottom of the recorder panel.

[![Recorded User Flow](https://www.mokkapps.de/static/bcfe729a655dae272be43508059d14ba/1e043/chrome-recorder-finished-recording.png "Recorded User Flow")](/static/bcfe729a655dae272be43508059d14ba/d61c2/chrome-recorder-finished-recording.png)
_Recorded User Flow_

The following GIF visualizes this process:

![Record user flow (GIF)](https://www.mokkapps.de/7bc0012f4a72bdfe93970dc814ec7bbe/chrome-recorder-record.gif)

It’s also possible to manually edit the recorded steps. For example, you can manually change selectors:

[![Change Selector](https://www.mokkapps.de/static/f406dce319d2c28b701b231e039d89b4/1e043/chrome-recorder-selector.png "Change Selector")](/static/f406dce319d2c28b701b231e039d89b4/ee455/chrome-recorder-selector.png)
_Change Selector_

Additionally, you can manually add or remove steps:

[![Add/Remove Steps](https://www.mokkapps.de/static/c221cd1e4bbd1fdc5e7c037f2ab162f8/1e043/chrome-add-steps.png "Add/Remove Steps")](/static/c221cd1e4bbd1fdc5e7c037f2ab162f8/79e48/chrome-add-steps.png)
_Add/Remove Steps_

## Replay[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#replay)

After recording a user flow, you can replay it by clicking on the “Replay” button.

![Replay Recording (GIF)](https://www.mokkapps.de/7f68bd43c6bc1cb8d94b2450ff983c5f/chrome-recorder-replay.gif)

When replaying a user flow recording, the Recorder waits until the element is visible or clickable in the viewport or tries to automatically scroll the element into the viewport before replaying the corresponding step.

It’s also possible to simulate a slow network connection in the “Replay” settings:

[![Simulate Slow Network](https://www.mokkapps.de/static/8668956b104fdea3e63f1cfa571298c8/fc2a6/chrome-recorder-replay-setting.png "Simulate Slow Network")](/static/8668956b104fdea3e63f1cfa571298c8/fc2a6/chrome-recorder-replay-setting.png)
_Simulate Slow Network_

## Measure performance[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#measure-performance)

You can also measure the performance of your recording by clicking the “Measure performance” button. This way, you can regularly measure the performance of critical user flows.

[![Performance Panel](https://www.mokkapps.de/static/b408db5a0aba1d25bca88815a057d5fd/1e043/chrome-recorder-performance.png "Performance Panel")](/static/b408db5a0aba1d25bca88815a057d5fd/d61c2/chrome-recorder-performance.png)
_Performance Panel_

## Conclusion[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#conclusion)

The Chrome Recorder is valuable tool that will boost my productivity during development. It’s still a preview feature, but I think it will become a must-have tool for web developers.

I recommend reading the [official Chrome blog post](https://developer.chrome.com/docs/devtools/recorder/).

If you liked this article, follow me on [Twitter](https://twitter.com/mokkapps) to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also [subscribe to my newsletter](https://mokkapps.de/newsletter).