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!

Replay DevTools

Replays come built in with a full suite of developer tools for debugging. These tools are similar to those you may have seen in a browser or your development environment like VS Code.

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.

Click on various points in the Timeline to navigate the replay and isolate specific areas where you’d like to debug.

Finding your source fileju

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.

You can also use the Sources tab to browse the available files.

💡

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. It’s also helpful to add comments for yourself and your team as you navigate the replay so you can keep track during the debugging process.

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!

Time Travel Debugging

Replay is so much more than a traditional debugger. Because we’ve recorded your application execution, you can travel back in time to the moment the bug occurred to see what happened. This is more than just rewinding and fast-forwarding, you can also inspect values and retroactively add console logs as if you were debugging in that point in time.

Navigating to events

If a particular user interaction causes the bug to occur, it’s helpful to view with Events.

Events can be viewed from the Events pane within the Replay Info panel, or output directly to the console.

💡

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.

Jump to code

It can be helpful to jump directly to the line of code that causes an event. In the events pane, click the blue button to have that line of code open in the source viewer.

This is one of the features we’re the most proud of. It’s a huge time saver!

Navigating in the console

You can jump between console messages generated from your application, or ones you’ve added with Replay’s print statements feature.

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.

Navigating 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. All network requests appear as a timeline so you can navigate back and forth between calls.

💡

Check out this video from our Examples page showing how we debugged a GrubHub issue using the Network Monitor.

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.

Navigating Redux events

The experimental Redux DevTools integration will show dispatched actions up to the point in time you are paused in the replay. We are building out functionality to add a timeline view, stack traces, and more.

Inspecting and Evaluating

Once you’ve narrowed in on the points in time to debug, Replay provides all the tools you need to inspect and evaluate your application.

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 React components

For React applications, you can view components, props, state, and hooks with Replay’s React DevTools.

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?

Inspecting function and code line execution

How confident are you in the actual execution of your code? Bugs often occur when the reality of our app execution does not match our expectations. With Replay, the Function Outline shows all the functions in the source and how many times each function was executed.

The Heat Map in the editor’s gutter is helpful for seeing how many times a line was executed. This helps to identify dead code that never ran, or lines that are running too frequently and may be causing performance issues.

Inspecting call stack and scopes

When paused on a specific execution of a line of code, you can view the call stack leading up to that point.

The Scopes pane will show the values of properties and variables within a given scope when paused on an execution of a line of code.

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.

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.