Why does setTimeout() clutter my call stack under Chrome DevTools?

I have a function that upon completion 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:

One main on stack

After 3 more iterations I see this:

Three main's on stack

Firefox developer tools does what I expect and just shows one instance of the function on the stack each time the breakpoint is hit.

enter image description here

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?

Answers:

Answer

To hide it - go to
Devtools Settings -> Preferences -> Debugger
Check "Disable async stack traces"
But I strongly recommend to leave it as is. It is very useful for debugging.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.