How Runtime Replay compares with browser DevTools

Browser DevTools like Chrome are limited by what you can see in real time. You can inspect the current DOM and React component tree. You can pause at a line of code and step forward. To some extent, you can see a timeline of what happened in the past, but you cannot rewind. And of course, you cannot see what will happen in the future because it has not happened yet!

In contrast, with time travel enabled browser DevTools you can see how your application changed across time. You can inspect the DOM and React component tree at any point in time. You can pause at a line of code and step forwards or backwards. You can even add a console.log on a line of code and see the messages in the Console as if it was always there.

Time travel comes to life when you begin designing DevTools with time travel in mind. Want to know which React component handled a click event? With Replay, you can simply jump from the click event into the onClick handler. Want to know which prop, hook, or state triggered a recent render? With Replay, the React panel now highlights the changed properties.