In Chrome, you can see the call stack on the right of the sources tab in the console. But it doesn’t keep a history of the previous stacks, it refreshes as it exits execution contexts. Is there a way to view the entire history of the call stack? Is this achievable through other methods? I could place console.trace in every function/script but there has to be another way.
It’s not going to save all your stacks, but you can use something like stacktrace.js to capture the current call stack and store it in a history somewhere. You can do it by hand without stacktrace.js, but trust me you’ll appreciate the benefits of the library.
Now if you want to track state over time, I recommend something like Redux and the devtools that go with it. Or some other means of generating and tracking effects (where changing state is an effect) such as RxJS. This is usually a lot more useful than capturing call stacks. This requires writing your app in a functional style, so obviously it’s no good for existing apps, but it’s something to think on.
I just looked into stacktrace.js. I read the docs and followed the example but it just shows the stack at a point in time, no different than the chrome stack or using console.trace. Not sure if it has more advanced features to achieve what I need.
console.trace() works pretty well, I’m using console.log(arguments) then console.trace() and it gives me a pretty good idea of what’s happening. The issue is automating adding this (or just console.trace()) wherever relevant. I guess I could do it with search and replace in vscode.
Look at built into WebStorm tool called spy-js. WebStorm is free to use for 30 days and after that you’ll have to restart it every 30 minutes. EAP (alpha/beta) versions are also free and usually last for 3 months