Step-through debugging is the process of adding breakpoints to your code. The next time that line of code is executed, the browser will pause the execution so you can explore the application at that state in time. One of the most exciting things about Replay is that it captures the entire session. Usually, from a browser breakpoint, you can only step forward. But with a Replay, you can step back and forth as you please! This is called time travel debugging.
To add a breakpoint, go to a Replay and click on the DevTools tab. From there, you can use the Sources pane in the middle to find a source file by either filename or function name.
You can use the following keyboard shortcuts to navigate the source editor:
Once inside a source file, you can hover over a line number to see how many times that line was executed. You can also click on a line number to add a breakpoint.
Once you've added a breakpoint, Replay will automatically jump to that point in time and pause the application. If the line was executed multiple times, the [scrubber] below allows you to jump between them quickly. You can also add a comment to the breakpoint or even double-click on the line to add a custom print statement or a conditional.
Sometimes we want to put a breakpoint in a function that gets called multiple times. But we only want to pause if a certain condition is met. Think of the example below:
We have a log function that gets called 101 times. What would we do if we wanted to only see the log message associated with "critical" logs? This is where conditional breakpoints come in!
We can double click on the log and add a condition. Since we know that logLevels.critical resolves to the number 2, we can add the condition level === 2 and get the following!
We just used conditional breakpoints to reduce the number of pauses from 101 to 1! Now it's easy to check the console and find our message.
Try using conditional breakpoints in the Replay itself. See if you can find the message that the critical log statement sends without looking at the code!