I have a function that upon pletion re-queues itself with setTimeout(). Could someone explain why Chrome DevTools makes it look like it's calling itself recursively? My understanding is the call stack ought to be clear on each invocation.
Take this very simple example:
<html>
<head>
<script>
function main() {
setTimeout(main, 100); // set breakpoint here
}
main();
</script>
</head>
<body></body>
</html>
The first time the breakpoint is hit I see this:
After 3 more iterations I see this:
Firefox developer tools does what I expect and just shows one instance of the function on the stack each time the breakpoint is hit.
Is there some kind of subtle reference capture going on under Chrome that I'm not aware of, or is this just a DevTools UI thing?
I have a function that upon pletion re-queues itself with setTimeout(). Could someone explain why Chrome DevTools makes it look like it's calling itself recursively? My understanding is the call stack ought to be clear on each invocation.
Take this very simple example:
<html>
<head>
<script>
function main() {
setTimeout(main, 100); // set breakpoint here
}
main();
</script>
</head>
<body></body>
</html>
The first time the breakpoint is hit I see this:
After 3 more iterations I see this:
Firefox developer tools does what I expect and just shows one instance of the function on the stack each time the breakpoint is hit.
Is there some kind of subtle reference capture going on under Chrome that I'm not aware of, or is this just a DevTools UI thing?
Share Improve this question asked Dec 1, 2017 at 1:44 rkagererrkagerer 4,2842 gold badges28 silver badges30 bronze badges 2- 3 It's just devtools UI. You can see that the callstack is only 1 deep, but shows you where the current call was enqueued from. Which is super useful for tracking down why a function is running, and the context in which it was called – coagmano Commented Dec 1, 2017 at 1:49
- 2 Thanks @FredStark. I can see the utility, but is there any way to prevent the call stack list from growing to infinity as my program runs? (without turning off async stack traces) – rkagerer Commented Dec 1, 2017 at 1:54
2 Answers
Reset to default 9To hide it - go to
Devtools Settings -> Preferences -> Debugger
Check "Disable async stack traces"
But I strongly remend to leave it as is. It is very useful for debugging.
I just wasted two hours trying to debug something that was NOT broken because I didn't know about the disable async stack traces setting in Chrome Devtools as mentioned in @bsalex's answer.
When implementing the Ajax long-polling technique, you often call the polling function again after getting a response so you can wait for more events/notifications from the server.
Some people use window.setTimeout() function to call the polling function after a certain delay. Logically, the call is recursive but the call stack should not be growing indefinitely with each call. However, the way Chrome shows async stack traces can deceive you into thinking the call stack is growing and in my case I tried all kinds of hacks to no avail trying to fix the code to avoid a stack overflow.
Turns out there's nothing wrong with the code, it's just "a Chrome thing", and disabling async stack traces makes it clear that the stack is behaving as expected. I leave this answer here so people who encounter this problem in a long-polling scenario know what's happening. I wound up on this question by Googling for chrome xhr call stack keeps growing.