What is Replay?
Replay lets you record a browser session to produce a shareable replay for collaborative debugging. The replay isn’t just a video — everything from the browser is recorded so you can inspect everything including HTML elements, JavaScript execution, network requests, user events, and even the state of your React components at each and every moment in time.
Replay refers to both the Replay Browser and the Replay DevTools. They can be used together or independently.
Replay Browser
The Replay Browser is an enhanced web browser you download and install on your computer to record replays. To learn more about recording a replay with the browser, check out our guide here.
The Replay Browser is not required to view existing replays.
Replay DevTools
The Replay DevTools is how you view replays for collaboration and debugging. It’s a normal web application, so you can access it and debug replays using any browser.
Within the Replay DevTools , you have access to the Viewer and a full suite of DevTools. Not only can you inspect the recorded browser session, but you can add retroactive print statements that will be immediately logged to the Console.
Replays are easily shared and commented, and you can manage your replays and settings from the Replay Library .
Check out our case studies to see how companies like Tablecheck adopt Replay.
When do you use Replay?
There is a lot of information packed in each replay, so the possibilities are extensive. Replay is primarily used by developers to reproduce and debug issues with web applications.
Some common uses cases include:
- Developers recording a bug in their local environment to share with their team.
- QA or Test Engineers recording bugs in test, stage, or production environments to include with defect reports.
- Recording automated tests to easily debug failures.
- Support teams recording reproduced user issues to submit bug reports.
We’ve also seen CEOs recording bugs, Product teams recording replays to document user flows, and Engineering teams using Replay to record critical expected functionality in a codebase. Like we said, the possibilities!
Dig into the use cases and real-world functionality of Replay in our Workflows section.
So, why Replay?
Replay may look and feel similar to other tools you’ve used before. Maybe you already use a debugger in a browser or your code editor. Maybe you use a screen recorder to document bugs, or a browser extension to capture some information from a user session.
Replay is different because it combines the ease of a screen recorder with a fully-powered debugging experience. We record the entire browser session and give it wheels so you can inspect, evaluate, and collaborate on any machine, regardless of where the bug originated.
We hear from teams that using Replay:
- Reduces the tools and time needed to reproduce issues.
- Reduces frustration when debugging.
- Increases the number of resolved bugs.
- Encourages collaboration within dev teams and across functions like Product and QA.
- Improves overall developer experience and quality of the codebase by reducing defects.
Check out our posts on how Replay compares to Session Replay tools and Chrome Recorder.
What Does Using Replay Look Like?
Replay was featured on a recent episode of the Learn with Jason Show, as part of a discussion about how to get better at debugging. Replay engineer Mark Erikson joined Jason Lengstorf to discuss debugging mindset and approaches, how to use a GUI debugger, and walked through an example of recording a replay with the Replay Browser and doing time-travel debugging with the Replay Client:
See the Learn with Jason: Travel Through Time to Debug JavaScript episode page for a transcript and additional resource links.
Getting Started
See these pages for steps to download and use Replay:
- Recording Bug Reports covers the basic steps to download, record, debug, and share a recording
- Recording a Web App covers those steps in more detail
Time Traveling with Replay