Chrome DevTools Recorder lets you record a browser journey, replay it, add checks, debug failures, and export the flow for reuse. The reliable approach is to record a representative path, replay it early, replace fragile selectors where possible, and add assertions for the outcomes that matter. Recorder is a useful starting point for repeatable browser flows, not a guarantee that the flow will never need maintenance.
Open Chrome DevTools Recorder
- Open Chrome DevTools.
- Open the Command menu: press Command+Shift+P on macOS, or Control+Shift+P on Windows, Linux, or ChromeOS.
- Type Recorder panel, select Show Recorder panel, and press Enter. Alternatively, choose More options > More tools > Recorder panel.
Recorder can record and replay user flows, edit and debug their steps, create performance profiles, and share or export flows. See Chrome’s Recorder documentation for the panel guide.
As an Amazon Associate I earn from qualifying purchases.
Record and refine a flow
1. Capture a representative journey
Start a new recording and carry out the path you want to repeat—for example, navigating to a page, opening a form, entering information, and submitting it. Keep the recording focused on the journey you need to automate. Recorder captures browser interactions, and its replay lets you repeat the sequence and inspect its progress.
2. Replay before polishing
Replay the flow soon after recording. Recorder runs a flow as quickly as it can by default, so a fast replay can expose assumptions about timing or page state. Use a slower replay mode, breakpoints, or step-by-step execution to find where the replay diverges from the live journey. Fix problems while the recording is still easy to compare with what you did.
3. Edit the steps and code view
Inspect the recorded steps, remove accidental actions, and edit parameters or add missing steps. The code view updates when you edit the steps, but the code view itself is not editable. Make changes in the step editor rather than trying to patch the displayed code there.
4. Add assertions for important outcomes
An assertion creates a configurable waitForElement step. Use it to check that an important page state actually occurred, such as an element appearing or becoming visible, or an HTML attribute or JavaScript property having the expected value. If the check does not pass before its timeout, the flow reports an error. Assertions make a replay more informative than one that merely clicks through the page without checking the result. See Chrome’s Recorder features reference for assertion and step details.
5. Set timeouts to match the page
The documented default step timeout is 5,000 milliseconds. A slow request or long animation can take longer. Increase the global replay timeout when the flow generally needs more time, or override the timeout on an individual step when only one part of the journey is slow. Prefer a targeted adjustment when possible: an unnecessarily long timeout can delay feedback when a step has genuinely failed.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 116. Make selectors less fragile
Recorder can detect common testing attributes such as data-testid, data-test, data-qa, and data-cy. Chrome cautions that dynamic classes and IDs may change; a stable test attribute agreed with the application team can be a better selector than an incidental styling class. No selector is immune to application changes, so review selectors when the interface changes. Consult the Chrome Recorder guide for its selector guidance.
7. Review the initial navigation step
Every recording begins with viewport and navigation steps. Navigation sets the URL and refreshes the page on each replay. Keep it when the flow should start by loading that URL; remove it for an in-page flow that should continue on the current page without reloading.
Handle hover-only interactions
Recorder may not automatically capture hover events in some situations. If a menu or control appears only on hover, the recording can omit the interaction needed to reveal it. Add a hover step manually and configure it with an appropriate selector, then replay the flow to confirm that the dependent menu action works. Chrome documents this failure pattern in its features reference.
Choose an export that fits how you will maintain the flow
| Export | Best fit | Important distinction |
|---|---|---|
| JSON | Keep a human-readable flow that you can edit or import into Recorder again. | It is the directly importable Recorder format. |
| @puppeteer/replay | Replay JSON flows with the Puppeteer Replay library, including in a CI workflow. | The flow remains JSON data rather than becoming only generated script code. |
| Puppeteer script | Customize generated JavaScript more directly, for example to add looping. | The generated script cannot be imported back into Recorder. |
| Puppeteer for Firefox | Use the export option documented in connection with WebDriver BiDi support for Chrome and Firefox. | Check compatibility for the environment where you intend to run it. |
| Puppeteer with Lighthouse analysis | Generate a script that adds Lighthouse analysis. | Choose it when the added analysis is part of the workflow you need. |
To export, open Recorder’s Export menu and select the format that matches your next step. Import a JSON recording through Recorder when you need to continue editing it in the panel. Puppeteer Replay is an open-source library built on Puppeteer and can replay JSON files from the command line. Chrome’s documentation also lists converters for Cypress, Nightwatch, and CodeceptJS, plus replay options involving TestCafe and Sauce Labs. These are integrations, not a guarantee of current maintenance or compatibility; verify that each fits your versions and setup before adopting it. The options and import behavior are described in the Recorder documentation.
Extend Recorder with an extension
Third-party Recorder extensions can add custom export and replay options. Chrome’s instructions are to install an extension from the collection, open DevTools in a new tab, and look for the extension’s options in Recorder. Access may be limited: extensions can be restricted to web pages or blocked by administrator policy. See Chrome’s Recorder extension instructions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common replay failures
| Symptom | Likely cause | What to try |
|---|---|---|
| A step fails before the page is ready. | The page, network request, or animation takes longer than the step timeout. | Replay slowly or step by step to identify the delay; increase the global timeout or adjust that step’s timeout. |
| A menu action cannot find its target. | The menu may be revealed only by a hover that was not recorded. | Add a hover step with a selector for the trigger, then replay and verify the menu action. |
| A selector worked during recording but fails later. | A class or ID may be dynamic or the interface may have changed. | Review the selector and, where available, use a stable test attribute such as data-testid or data-qa. |
| The flow starts on an unexpected page or reloads. | The initial navigation step sets a URL and refreshes the page on replay. | Keep navigation when a fresh load is intended; remove it for in-page automation that should not reload. |
| The flow completes but does not prove the desired result. | Recorded interactions alone may not verify the resulting page state. | Add an assertion for the element, visibility, attribute, or property that signals success. |
| An extension’s Recorder option is missing. | The extension may be restricted to certain pages, not visible in the current DevTools tab, or blocked by policy. | Open DevTools in a new tab and check the extension’s instructions; ask an administrator if policy blocks installation. |
Or skip the browser setup
If you need a screenshot of a page rather than a recorded, replayable interaction flow, ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. For example, use cURL:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for API options and setup. It accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
