Dale St. Marthe

Use theRecorder panel to record, measure, and edit user flows. TheRecorder panel contains a set of diagnostic tools that can help frontend developers improve and debug their conversion paths. For a guided tutorial, check outRecord, replay, and measure user flows.

Overview

The Recorder panel lets you:

• Record and replay user flows:Start a recording to have theRecorder panel track certain events on your website or app. Afterwards, you canreplay a user flow and jump between steps.Slow down the replay to better understand what happens in a user flow. Additionally, learn how you canreplay 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 thePerformance panel.
• Share and export user flows: You canexport a user flow as a JSON file or in multiple Puppeteer formats, and in any format provided by theRecorder's Export extensions. You can alsoimport a user flow.

To better integrate theRecorder panel it into your workflow and expand its capabilities,customize the Recorder panel with extensions.

Open the Recorder panel

To open theRecorder panel, follow these steps:

1. Open DevTools.
2. Open theCommand menu by pressing:
   • macOS:Command+Shift+P
   • Windows, Linux, ChromeOS:Control+Shift+P
3. Start typingRecorder panel, selectShow Recorder panel, and pressEnter.

Alternatively, in the top right corner, selectmore_vertMore options >More tools >Recorder panel.