Getting started
What is Replay.io?

What is Replay.io?

Replay.io is a tool that makes debugging easy. It’s a browser that lets you record your web app and retroactively inspect it using print statements and browser DevTools.

You can think about Replay as three tools in one:

Browser

Recorder

DevTools

  • As browser for testers and developers, it’s built on top of Chromium so it has everything you’d find in Chrome, but it has one super power and that’s recording.
  • As recorder you can use it to record your web app and then replay it later exactly as it ran before. That’s how Replay got its name.
  • As DevTools you can inspect your recording (or your "replay" as we like to call it) that contains much more than mere video. You can inspect Network requests, DOM elements, and even React components. But even better, you can find a function, add a console.log(), and the Replay browser will retroactively log the messages to the console.

How to use Replay.io?

💡

This example shows the simplest use case. Once you get familiar with the basic principles of recording and debugging, we highly recommend you to check out our Test Suites documentation to learn how you can integrate Replay Browser into Cypress, Playwright or other framework and draw your test flakiness below 1%.

Typically, you would use Replay to debug, or better understand your app. The journey with Replay.io would have three chapters:

Create a recording

You can create a recording manually:

or by integrating Replay.io to your Test Suite:

npx playwright test --project replay-chromium

Click here Learn more about how to integrate into Playwright

Replay the recording and debug your app

Fix the bug or get help

With a better understanding of data flows, state changes and other processes in your app, you can now fix your bug. Or even better, send a recording to your colleague to debug together.

Common 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.

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.

Recording your first Replay