JS_PLAYGROUND & SIMULATORS

Interactive engines for the JavaScript Event Loop, Call Stack, Microtasks, and V8 Garbage Collection.

Interactive JS Engine Visualizer

Event Loop, Call Stack & Microtask Queue Stepper

1. Call Stack (LIFO)1 frames
console.log("1: Sync Start")
2. Web APIs (Background)0 active
[No Active Background Timers]
3. Microtasks (VIP Queue)0 queued
[Queue Empty]
4. Callback Queue (Macrotasks)0 queued
[Queue Empty]
snippet.jsStep 1 of 6
console.log('1: Sync Start');

setTimeout(() => {
  console.log('4: setTimeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('3: Promise microtask');
});

console.log('2: Sync End');
What Just Happened:

Synchronous log executes immediately on the Call Stack.

Console Output (stdout):
> 1: Sync Start
V8 Engine Memory Management

Tri-Color Mark & Sweep Garbage Collector

White (Dead) Grey (Visiting) Black (Alive)
GC Root
Global Window (Root)
Points to: [Node #2, #3]
young Gen
DOM Event Handler
Points to: [Node #4]
young Gen
User Profile State
No outgoing pointers
old Gen
Active API Cache
No outgoing pointers
young Gen
Orphaned Temp Closure (Unreachable)
Points to: [Node #6]
young Gen
Orphaned JSON Buffer (Unreachable)
No outgoing pointers
GC Runtime Trace: Click "Run Tri-Color Mark & Sweep" to trace memory references.

> Live Code Sandbox

Editor_Pane
Loading...
Console_Output
Waiting for output...