looptrace

JavaScript Event Loop Visualizer — Step Through the Call Stack, Microtask & Macrotask Queues

Watch 36 real snippets execute one step at a time — stack frames pushing and popping, promise callbacks and await continuations draining before any timer fires. Every console order shown here was proven by running the snippet in real Node, not asserted from memory. Predict the output first if you are prepping for interviews.

36 verified snippets proven against Node v25.4.0 100% offline · no tracking

—

· difficulty

A racetrack loop with three stations: run script, drain microtasks, next macrotask. A tick dot marks the current phase. run script drain microtasks next macrotask
phase: run script
snippet.js — runs verbatim in Node

Press next ▸ to start stepping.

Call stack top runs

    Microtask queue drains fully

      Macrotask queue one per turn

        Console

          step 0 / 0 ← → arrow keys work too

          What this models — and what it doesn't

          Modelled (and proven)

          • The canonical WHATWG HTML event loop: run a task → drain the microtask queue completely → take the next macrotask.
          • Synchronous calls and returns on the call stack.
          • setTimeout(fn, 0) as 0-delay FIFO macrotask ordering.
          • Promise.resolve().then() chains and queueMicrotask().
          • async/await with modern ES2019 one-tick resolved await semantics (V8: Faster async functions and promises). Pre-2019 engines ordered some await snippets differently.

          Not modelled — on purpose

          • No free-text code input and no eval. Only the 36 verified snippets run — that is what makes every shown order provable. This is a teaching model, not a debugger for your own code.
          • No DOM/UI events, rendering pipeline, requestAnimationFrame, fetch, or workers.
          • No real clock: timer clamping, throttling and nesting limits are out of scope.
          • Node-specific phases — see the aside below; explained, never simulated.

          FAQ

          What is the difference between a microtask and a macrotask?
          Macrotasks (like setTimeout callbacks) are taken one per event-loop turn. Microtasks (promise callbacks, queueMicrotask, await continuations) are drained completely after every task — even ones queued during the drain — so they always beat the next macrotask.
          Why does setTimeout(fn, 0) run after Promise.then?
          A zero-delay timeout only queues a macrotask. Before taking it, the loop performs a microtask checkpoint that empties the entire microtask queue — every pending .then callback runs first.
          How are the console orders verified?
          Each snippet's code runs verbatim in a real Node child process (Node v25.4.0, verified 2026-07-23); the captured output must exactly equal the model's prediction and the stored order. Disagreements cut the snippet — they are never patched by hand.
          Does looptrace work offline?
          Yes. It is a static page whose Content-Security-Policy (connect-src 'none') makes network requests impossible — the browser enforces the privacy, it is not just promised. Your predict streak lives only in localStorage.