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.
Typically, you would use Replay to debug, or better understand your app. The journey with Replay.io would have three chapters:
You can create a recording manually:
or by integrating Replay.io to your Test Suite:
# cypress
npx cypress run --browser replay-chromium
# playwright
npx playwright test --project replay-chromium
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.