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.