«   Previous tip Next tip   »

Chrome DevTools: Record and playback your user journeys

Last updated: 5th November 2021
Record and playback your user journeys


You can use the new Recorder Panel to record user flows (a.k.a. user journeys or user interactions) and play them back. The playback can be useful for:

How to use the Recorder

The Recorder has its own panel:

  1. Open up the Recorder panel from the Command Menu (Cmd + Shift + P).
  2. Select Start new recording and enter a name for your flow, e.g. Sign up or Scroll to bottom.
  3. Perform your desired user flow on the page and select End recording.

Your script is now recorded! You can do the following:

Puppeteer script

When you export a user flow as a Puppeteer script, it's likely you'll need to edit it slightly. However it's a great starting point. As an example, the following script was generated automatically, it inputs the Enter key on a page:

const targetPage = page;
await targetPage.keyboard.up("Enter");

This script clicks on a button:

const targetPage = page;
const element = await waitForSelectors([["#button"]], targetPage);
await element.click({ offset: { x: 22.75, y: 16} });

The code may not be production-ready, but it's a good first step.


This feature is currently in Chrome Canary, tested in version 97.

Further Resource

If you want to learn more about the Performance Panel, check out a video I made: Understanding Paint Performance with Chrome DevTools.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week