Hacker News Reader

And vuejs has a browser plugin which can sort-of show you which components call which components to get there.

React and Redux both have similar addons as well, to inspect the component tree and to see the state changes over time (and even roll back; "time travel debugging" has been one of Redux's primary features since it was released).

Directly surfacing the effects involved, e.g. HTTP calls via all the event handlers through layers of nesting, would indeed be nice.

I’m not sure how other browsers’ dev tools do on this front, but at least in Chrome most requests in the Network tab will link to the file/line of code which initiated the request. From there you should be able to set breakpoints or whatever to track subsequent requests.

and you can also click on a request in the network tab and find out the line of code triggered it, including callstack

also with react dev tools you can click somewhere on the page and see the react component, it's props, etc. similar tools are available for other frameworks