logo

Debugging a replay

Now for the fun part โ€” debugging! You may not associate debugging with fun, but at Replay we believe bugs can be great for understanding your application and making it better.
To do that, we give you a suite of developer tools built in to every replay. Here is an overview of how you can use Replay to debug your own application.
๐Ÿ’ก
Want to see Replay in action? Check out our Examples for some real-world replays!

Viewing your application

Itโ€™s important to get a sense of what was happening in the app at the time of the issue. With the Viewer, you can see the browser capture and user events in a timeline view.

Finding your source file

Now letโ€™s dig in to the code! Switch to DevTools mode using the toggle in the upper right-hand corner. From here, you can search for your source code to find the files you need to debug.
๐Ÿ’ก
If the code from the browser is different from your source code, check out Replayโ€™s source maps upload feature to make the code easier to navigate.
Now we have our code, application viewer, and console in one screen and can keep debugging.

Inspecting elements

The Elements panel is the blueprint of the HTML elements and CSS styles for your app. If you have issues with how your app is being displayed, this is a great place to start. View the structure of your HTML elements and see what styles have been applied. You can also see which elements have event listeners.

Inspecting events

If a particular user interaction causes the bug to occur, itโ€™s helpful to view with Events. Replay shows you what events happened when, as well as the associated code that triggered the event.
Events can be viewed from the Events pane within the Replay Info panel, or output directly to the console.
Image without caption
๐Ÿ’ก
A key aspect of debugging is identifying unexpected behavior. Bugs happen because we expected the app to do one thing, but then it did something else. Inspecting the code at different moments in time can pinpoint the moment when the app starts down an unexpected path.

Adding print statements

Replay lets you add print statements (also called console logs) to an existing replay with no need to compile or re-run the code. Adding print statements to a replay is like going back in time and adding markers to your code to broadcast information at specific points.
๐Ÿ’ก
Letโ€™s say you have a click handler that is supposed to update the value of a variable, but youโ€™re not sure if itโ€™s actually working. You could add a print statement to log the value of that variable after the function executes to see if it actually updated.
With Replay print statements, you can see how many times a function executed, evaluate parameters, and even add comments to provide insights for your team.

Adding breakpoints

Breakpoints are the remote control for your code โ€” pause, rewind, fast-forward, and step through your code line by line to evaluate it at various points in time. This can be particularly helpful when you have granular timing or async code issues causing a bug.

Evaluating in the console

The console lets you view and navigate between print statements and events that occur in your application. You can also use the console to evaluate expressions in order to see the value of variables at different points in time. Check out our Console documentation for more.

Inspecting network requests

The Replay Network Monitor is helpful for debugging anything related to your API or any external network requests going in and out of your application.
If requests fail or time out or if data coming from your back end isnโ€™t accurate, the Network Monitor can help identify problematic requests for debugging.
๐Ÿ’ก
Check out this video from our Examples page showing how we debugged a GrubHub issue using the Network Monitor.
Climatescape replay
Climatescape replay

Inspecting React components

For React applications, you can view components, props, state, and hooks with Replayโ€™s React DevTools. Weโ€™re working closely with the React team to replicate the same DevTools experience you get in other browsers.
With these tools, you can debug common React app issues like:
  • Was the correct prop passed to a component?
  • Did a hook fire at the correct time with the correct value?
  • Are there competing sources of truth for state management?
  • Is my component tree rendered as expected?

Collaborating with Replay

We believe that there is no shame in bugs, and that asking for help can be a critical step in the debugging process. We make this easy by letting you add comments, share replays, and create teams for collaboration.
Use comments to:
  • Note moments in time where bugs or issues occur.
  • Ask questions about unexpected behavior.
  • Identify functions or lines of code that are problematic.
  • Share the good news when youโ€™ve identified the source of a bug!

Whatโ€™s next

Replay works best when used by a team. Teams lets you easily collaborate and gives access to features like source map uploads, recording automated tests, and managing access to team replays. Learn more in Setting up a team.

Was this page helpful?