How to go backwards while debugging Javascript in Chrome sources debugging?

Question

Chrome sources debugging has buttons for step over, step into, and step out. There is no stepping backwards in time to see what were the previous functions.

Answer 1

replay.io

Disclaimer: my friend works at this company, and I learned about replay.io through him. He did not ask me to write this, I'm doing this of my own initiative because reverse debugging is awesome. I haven't tested it yet. I hope knowledge of such possibly closed source tools helps push the open source state of the art forward. They have some open source e.g. at: https://github.com/replayio/devtools but I don't know how exactly how much functionality that covers.

https://www.replay.io/ appears to have backwards/time travel debugging. It is presumably not fully FOSS but the website states that "Replay will always be free for individuals" so at least it is freemium.

The time travelling debug feature is documented at: https://docs.replay.io/debugging#d8966bc9bbb24a6f897c36ff70d398d1

replay.io appears to be trace-based: first you record one execution, and then you can replay the exact same thing as many times as you like, and go backwards in time if you want.

Once you have a trace, every execution is exactly the same, including e.g. the exact timing of asynchronous events such as getting HTTP responses back, so the recording presumably contains stuff like asynchronous events.

A common use case for this type of reverse debugger is to run your CI through it every time, so that you are able to reproduce bugs that depend on race conditions.

In the compiled languages world, the amazing open source Mozilla rr achieves some similar looking functionality.

One cool thing is that replay.io appears to be able to render DOM as it would render on the browser at each step even when going back.

Answer 2

What I needed is in right side bar, right-click on an item in Call stack -> Restart frame. That restarts the selected function from the first line.

Answer 3

One quick workaround I found out is to make a small change to the source file any change is fine (space, comment, whatever) while you are in the middle of the breakpoint then press Ctrl+s (save the file) and it will jump back to the first break point in that source. Then you can check your changes (F10 'step-in') then make another change if needed, Save it and it will restart. This is the fastest approach I have so far.

Answer 4

This is what I was looking for and found this link first. It is a more advanced version of the question I suppose..

The correct keyword to help search this is "Time Travel Debugging"

First noted here in this version of nodejs called, "Node-ChakraCore".

https://github.com/nodejs/node-chakracore/blob/master/TTD-README.md

Answer 5

As I said on this answer, you can step back by placing a new breakpoint and restarting the actual function. Hope this makes the trick.

Answer 6

You can sort of go backwards if you click through in the "Call Stack" on the right side to see the parent functions.