Getting Started
How to record
Everything in Replay starts with a recording. A recording captures your application's runtime so you can inspect it after the fact — add console logs, inspect variables, step through code — without having to reproduce the bug again.
There are three ways to make a recording, each suited to different workflows.
| Method | Best for | Fidelity | How it works |
|---|---|---|---|
| Replay Browser + CLI | Maximum fidelity, manual repro | 100% — records actual execution | Records at the runtime level |
| Chrome Extension | Quick capture, no browser switch | High — re-executes against captured session | Records from within the page |
| Playwright / E2E | CI, automated test suites | 100% — records test execution | Configures test runner to use Replay Browser |
Replay Browser + CLI
The Replay Browser is a custom browser that records at the runtime level — every instruction your code executes is captured exactly as it happened. This gives you 100% faithful recordings with perfect time-travel debugging.
The Replay CLI manages installing the latest Replay Browser version, lets you start Replay Browser to record specific pages, and uploads recordings to your Replay account.
Install the Replay CLI
Terminal
Record and upload
Terminal
This opens the Replay Browser. Interact with your app to reproduce the issue, then close the browser. You'll be prompted to upload, and you'll get a URL to inspect the recording.
Agent-driven recording: If you're working with an AI coding agent, it can trigger recordings for you using the replay-cli skill. Install skills with npx @replayio/replay skills add and ask your agent to record your app.
Chrome Extension
The Chrome Extension lets you record without leaving your normal browser. It captures your session from within the page — network responses, user interactions, DOM updates — and re-executes your code against that captured data. You get full time-travel debugging with access to all the same tools.
The tradeoff: since network requests are served from captured responses rather than hitting real servers, exact timing of async operations may differ slightly from your original session. The recording itself is a 100% accurate capture of the re-execution — but the re-execution is a simulation that may not be perfectly identical to what ran in your browser. For the vast majority of debugging scenarios, this is more than sufficient.
Install the extension
Install the Replay Chrome Extension from the Chrome Web Store.
Record your session
Click the Replay extension icon, hit Start Recording, reproduce the issue in your app, then click Stop and Save. The extension uploads your session and gives you a link to inspect it.
The extension also includes a built-in agent that can answer initial questions about your recording right away, before you even open the full DevTools.
Playwright / E2E Tests
For automated test suites, you can configure Playwright (or Cypress) to record every test run using the Replay Browser. This is ideal for CI — tests run automatically, and when something fails, you get a full time-travel recording of what happened on that CI machine without having to reproduce it locally.
Recordings from E2E tests have the same 100% fidelity as manual Replay Browser recordings.
Configure your test runner
Add the Replay plugin to your Playwright or Cypress configuration. See the detailed setup guides:
View recordings in CI
Once configured, every test run produces recordings that are uploaded automatically. Failed tests show up in the Test Suite Dashboard with links to inspect each recording.
Agent-driven setup: AI coding agents can help configure test recording using the replay-playwright and replay-cypress skills. Install skills with npx @replayio/replay skills add.
Once you have a recording
A recording is a snapshot of your app's runtime. Once it's uploaded, you can investigate it in several ways:
Investigate with an AI agent
Connect Replay's MCP server to your coding agent and let it inspect the recording — read source code, evaluate expressions, analyze React renders, and more.
Investigate with DevTools
Open the recording in Replay DevTools for manual time-travel debugging — step through code, inspect the DOM, view network requests.
Automate with the Protocol API
Use the Replay Protocol directly for custom integrations, scripts, and automated analysis.