Replay DevTools
Inspect a recording by hand, with browser DevTools panels that can pause at any moment of the session.
Replay DevTools is the in-browser UI for inspecting a recording. Open a recording and you get the panels you know from Chrome DevTools, with one difference: the app is not running live. A browser in the cloud replays the recorded session and can pause at any point, so you can add console logs to code that already ran, jump to the moment a request was sent, or inspect a component's props on its fifteenth render. How does time travel work? explains the mechanism.
Opening a recording
Every recording has a URL of the form https://app.replay.io/recording/<recording-id>. Recordings made with the CLI or the Playwright reporter print this URL when the upload finishes; recordings attached to a Replay QA bug report link to it from the report. Team recordings require you to be signed in as a team member; see Sharing and teams.
The page opens in Viewer mode: the video, the timeline, and the list of user events. Switch to DevTools mode with the toggle in the top-right corner, or select an event and click Jump to Code, which switches modes and pauses at the handler that ran for that event.
Your first look
Suppose a purchase form failed after a click. A quick pass through the panels:
Jump to the event
In the Events timeline, find the last click before the error and click Jump to Code. DevTools opens paused in the event handler, with the call stack and local variables as they were at that moment.
Inspect the network request
The handler sent a POST to /api/purchase. Open the Network panel and select the request that returned 400.
Compare request and response
The Response tab shows the server's message, Color is not found, received: undefined. The Request tab shows the body the app actually sent, and it does include a color.
The client sent the right data and the server rejected it. That is a backend bug, and the recording URL is the bug report.
What is in DevTools
Time travel tools
Add console logs after the fact, jump to any event, narrow the focus window, and leave comments at a point in time.
Browser panels
The viewer, Console, Sources, Pause, Elements, and Network panels, and what time travel adds to each.
Framework panels
React component tree, Redux actions, and Playwright test steps, each with a jump to the code that ran.
Sharing and teams
Share a recording, move it to a team, create a team, and manage team API keys.
Working with a coding agent instead
Everything DevTools shows is also available to an agent through Replay MCP, which reads the same recording through the same replaying browser. Use DevTools when you want to look for yourself, and hand the recording ID to the agent when you want it to do the digging.