At the top of a Replay, you can toggle between the Viewer and the DevTools.
If you're familiar with using browser inspectors, the DevTools section of a Replay should look familiar to you! It's a combination of the elements, sources, and debugger tabs seen in browsers.
The Console on the right is a complete JavaScript REPL and displays any log messages from the recorded application. You can use it to:
You can read more about the Replay console here. Or, check out a Replay showing off the console utility.
If you'd like to browse the HTML of the captured application, you can enable the Elements panel by going to Settings > Experimental. With Elements enabled, you can click through or search through the HTML.
After adding a breakpoint, you can use the Pause Information tab on the sidebar as a step-through debugger. It allows you to step into or out of the line of code you are on. It also shows you the call stack and any variables in the current scope. See more information about step-through debugging in Replay here
Once paused at a breakpoint, you can use the Pause Scrubber to slide through the method you are paused in. Notice the scope variables are uninitialized at the beginning of the scrub (due to hoisting) and updated on the sidebar as we pass the line where they are initialized.