Introduction

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.

Why use Replay.io?

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

1. Create a recording

You can create a recording manually:

or by integrating Replay.io to your Test Suite:

shell
# cypress
npx cypress run --browser replay-chromium
# playwright
npx playwright test --project replay-chromium

2. Replay the recording and debug your app

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

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.