Visualizer

Visualize JavaScript execution, call stack, and task queue in real-time

Example Snippets

Input Code

Loading...

Micro Task Queue

Empty

Macro Task Queue

Empty

Instrumented Code

Console Output

Tips

Micro tasks (Promise, queueMicrotask, MutationObserver, process.nextTick) have higher priority than macro tasks
Macrotasks include setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O events, UI events, and postMessage. They run after all microtasks complete.
After the microtasks queue has been processed, the event loop will check the macrotasks queue and execute all the macrotasks
ReadableStream Callbacks .pipeTo(), .getReader() are also micro tasks
process.nextTick() runs before any I/O or timer callbacks, while setImmediate() runs after I/O events — making it better for deferring execution without blocking I/O.
Promises and setTimeout those resolve / complete quickly might not show in Queue Stack Since that happens instantaneously

This visualization tool is for educational purposes only. The information provided may not always be 100% accurate. Please verify any critical information independently.