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 👇

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.

Record a Flow

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

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

Start new Recording

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

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

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.

You can enable the Web Vitals checkbox in the Performance panel, to view the Web Vitals metrics, identify opportunities to improve your user browsing experience.

Export the user flow

You can export the user flow to Puppeteer 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.

Delete the recording

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

Congratulations 🏆

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 😄