DevTools Tips hero logo

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

Published on

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:

Published on Improve article


Payment Handler API will require CSP `connect-src`


More details on the transition to Manifest V3

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.