Interactive JavaScript visualizer
Paste JavaScript or pick an example, then step through it line by line. LoopLens shows the call stack, scope and closures, Web APIs, the microtask and task (macrotask) queues, and how the event loop moves promises and timers between them.
Test yourself. When this is on, LoopLens pauses before every step that prints to the console and asks what it will print. Pick an answer to check it, or choose Just show me.Step 0 of 10 · virtual clock 0 ms
Event loop:Script (now)→Microtasks→Task↺, then it repeats.The event loop runs the whole script first. Then it runs every microtask, then one task, and repeats.
Code (current line highlighted)
1current line: function greet(name) {
2 return "Hello, " + name;
3}
4
5function welcome() {
6 const msg = greet("Ada");
7 console.log(msg);
8}
9
10welcome();
11console.log("done");
Call stack (top first)The function running right now is on top. Calling a function adds a frame; returning removes it. Only one frame runs at a time.
main script
Web APIs (timers waiting in the browser)The browser counts timers outside JavaScript. When a timer finishes, its callback moves to the task queue.
empty
The whole script runs as ONE task on the call stack. Lines run top to bottom.
Microtask queue (next first)Promise callbacks (.then, code after await, queueMicrotask) wait here. Once the call stack is empty, all of them run before the next task.
empty
Task queue (next first)Timer callbacks wait here. The event loop takes one task, runs it, then empties the microtask queue before taking the next.
empty
Console output
nothing yet
Scope and variables (yellow = changed this step)
no variables yet