Use the Recorder panel to record, measure, and edit user flows. The Recorder panel contains a set of diagnostic tools that can help frontend developers improve and debug their conversion paths. For a guided tutorial, check out Record, replay, and measure user flows.
Overview
The Recorder panel lets you:
- Record and replay user flows: Start a recording to have the Recorder panel track certain events on your website or app. Afterwards, you can replay a user flow and jump between steps. Slow down the replay to better understand what happens in a user flow. Additionally, learn how you can replay with external libraries.
- Edit and debug user flows: Edit the steps of a recorded user flow, even during recording. Set breakpoints and execute a user flow step by step. Inspect the code and see a side-by-side view of the steps and their code.
- Generate performance profiles: Measure the performance of a recorded user flow by generating a profile and viewing a report in the Performance panel.
- Share and export user flows: You can export a user flow as a JSON file or in multiple Puppeteer formats, and in any format provided by the Recorder's Export extensions. You can also import a user flow.
To better integrate the Recorder panel it into your workflow and expand its capabilities, customize the Recorder panel with extensions.
Open the Recorder panel
To open the Recorder panel, follow these steps:
- Open DevTools.
- Open the Command menu by pressing:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Start typing
Recorder panel, select Show Recorder panel, and press Enter.
Alternatively, in the top right corner, select More options > More tools > Recorder panel.