[armagon]

When working with React and Redux and Redux Sagas, I wish I could more easily figure out causal chains for what happens. When I previously did work as a game programmer, for most things (except, say, debugging why things rendered a certain way), you could just go to where the thing happened, put in a breakpoint, and you'd get a beautiful call stack making it easy to reason about how you got to where you are.

In my current web development work, using the aforementioned tools, where it isn't just one thing calling the next, but there's a huge amount of indirection and message passing, I have to spend a ton of time figuring out what set of events occurred, and where, and why, to figure out why I got the result I got.

[afiori]

Is there a reason why the browser debugger is not useful in your case? (or in any other case?) I found it useful for debugging simple jquery websites but I imagine a dozen things can go wrong between the debugger and webpack/next/react/jsx/redux/hot-reload

[armagon]

The browser debugger is still helpful, but it isn't able to link together the cause and effects (because the code in the system was designed that way -- it doesn't matter who fires off an action, it will (eventually) make certain code happen to respond to it. But, when you see the response code go off, it can be hard to figure out what action caused it -- moreso if your codebase abstracts things like the names of strings representing actions so you can't just grep for them.)

I think some sort of higher-level debugger ought to be possible, but don't know what it would look like.