DevTools Tips: Edit, debug, and export user flow recordings

The DevTools Recorder panel lets you capture user actions on your page, replay, share, and export them to a variety of formats you can use in your CI/CD.

The Recorder panel is in active development and has recently added new features to help you edit, debug, and export recordings.

With the Recorder panel, you can:

• Slow down the replay, set breakpoints, pause, resume, or advance the execution one step at a time.
• When paused, interact with the page or switch to other panels for further inspection.
• Add steps that the Recorder doesn't automatically capture. For example, mouse hover that pollutes recordings otherwise.
• Configure steps, for example, add timeouts, conditions, and assertions.
• Export the recordings in various formats such as JSON, @puppeteer/replay script, and Puppeteer script.

Additionally, you can add more export formats using Chrome extensions for the Recorder panel. At the time of writing, you can add extensions for the following tools: Cypress, WebPageTest, Nightwatch, Testing Library, and WebdriverIO. Check out the full list of extensions.

For more information:

• To learn the basics, see Record, replay, and measure user flows.
• For a complete list of features, see Recorder features reference.
• To create an extension yourself, see Create a Chrome extension for Recorder.