What is Replay?
Replay is a tool that lets you record your web app and retroactively inspect it using print statements and Browser DevTools. It’s a browser that you’ll open whenever you want to debug your application. It creates recordings that capture everything that happens in the browser, like clicks, interactions, network requests and so on.
Recordings created with Replay allow you to travel back in time to any state of your application and then add breakpoints and
console.log() to any place in your code. This allows you to debug as if your application is running locally. How does Replay work?
Replay has a standalone browser that you can use to create recordings (Replays). When you record a Replay, you get a URL that you can inspect or share.
Top use cases
- Local debugging: developers use Replay to better understand how their application works and debug difficult bugs.
- Bug reports: teams use Replay to record bug reports in their Support and QA workflows so that developers can debug the issues without having to reproduce it locally.
- Flaky and failed tests: teams use Replay to record their end-to-end tests in CI so that developers can debug flaky and failed tests.
Check out our case studies to see how companies like Tablecheck adopt Replay.
What makes time travel special?
Time travel makes it possible to build a collaborative debugging experience that’s 10X better than Chrome DevTools.
The first thing you’ll notice when you open a replay is the Jump to Code button which lets you jump from an event into the React event handler.
When you start debugging, you’ll find the Add Console Log + button which lets you add an expression which will be retroactively logged to the console.
These features and many more would not be possible without the ability to replay the browser and integrate deeply into React. And we’re just getting started, if you’d like to see where we’re headed, check out our React and Replayability roadmap.
Time travel in action ⤵️
How does Replay.io compare to Session Replay tools?
Replay records the runtime so you can retroactively debug your application with print statements and Browser DevTools. Session Replay tools like Full story record the DOM so you can see how your users use your application.
For more context, checkout our full comparison here.
See Replay in action
If you’re a visual learner, you’ll enjoy Filip Hric’s video Time Travelling with Replay.io. In the video, he shares his initial impressions of Replay and walks through how Replay helps him debug his application locally and debug Cypress flakes in CI.
For more walk throughs, checkout Replay in action.
Getting started
- Recording Bug Reports covers the basic steps to download, record, debug, and share a recording
- Test Suites provides more context on how you can record end-to-end tests in CI and debug flakes with Replay DevTools.