# Chrome DevTools Recorder Panel

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055397659/50306996-7dab-4c9f-8f5d-84e90e1dd3da.gif align="left")

Using GooglePage Speed Insights we can measure the performance of our web application by providing the URL of our web page where the performance of an initial page will be measured. What if we need to measure the different pages in our web application.

Which we can’t do with Page Speed Insights if our web application has authentication enabled. So, What’s the other option we can try to measure the performance for the inner pages.

Well, we can use the Chrome Lighthouse to measure the performance. But can we record and replay it? You can’t do that with Lighthouse but you can do it with the new Recorder Panel in Devtools.

Yes, Today we are going to see about the new Recorder Panel which is available in Google Chrome Devtools.

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055400671/d6178674-4fd2-4e6e-a8f8-497a435531f3.gif align="left")](https://bugs.chromium.org/p/chromium/issues/detail?id=1257499)

### Record a Flow

Open Chrome Devtools using the command `Ctrl + Shift + i` and then click **More Options -> More Tools -> Recorder**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055402624/344cfeb1-5d6c-42c1-b478-cbaa38e6108f.png align="left")

Click on the **Recorder** and then enter the recording name and then click Record button

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055404789/6fd6b919-40e4-482f-a4ca-3f7aef5cc9ce.png align="left")

Start new Recording

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055406604/d3a2594c-00c8-475e-9751-1d1aa55a901b.png align="left")

Start new recording with name

Once the recording starts you can scroll the page, click an element whatever the actions you do it will be reflected with the steps on the recorder panel

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055408519/78cb3d57-51ef-49cb-b391-7d2df5ef7999.png align="left")

Once you have done with the steps you can click End recording.Now you can reply the steps by clicking the replay button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055410545/4bfccab6-5261-4fa3-bff5-de28e2d158a0.png align="left")

You can simulate a slow network connection by configuring the **Replay settings**. For example, expand the **Replay settings**, select **Slow 3G** in the **Network** dropdown.

### Measure a Flow

You can measure the performance of a user flow by clicking on the **Measure Performance**. Click on the **Measure performance** button will first trigger a replay of the user flow, then open the performance trace in the **Performance** panel.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055412678/a6808b57-6b4a-4585-8595-20c7a256aba6.png align="left")

You can enable the [Web Vitals checkbox](https://developer.chrome.com/blog/new-in-devtools-88/#web-vitals) in the **Performance** panel, to view the [Web Vitals](https://web.dev/vitals) metrics, identify opportunities to improve your user browsing experience.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055414635/cd2682b1-c8f5-4556-8fa3-75cd1ac739ba.png align="left")

### Export the user flow

You can export the user flow to [Puppeteer](https://pptr.dev/) script to customize the script further.

Click on the recordings and then select the export button which would export the flow in .js file which you can use it in Puppeteer.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055416604/24eb526f-f9e8-48f9-879a-ffbd8c19e3e5.png align="left")

### Delete the recording

You can delete a recording by selecting the recording and then click the Delete button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055418364/c2cf1881-a3be-4f8c-b9bd-85fb9eba924f.png align="left")

### Congratulations 🏆

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055420425/5c88d487-6d8d-4503-b9c1-50908efba80e.gif align="left")

You have learned how to record the user flow using Panel Recording in Chrome Devtools. Catch you up in a new post. Till then **Happy Learning** 😄