JavaScript Execution Context Visualizer by Deploy Engineer
This free tool from Deploy Engineer shows what the JavaScript engine does while your code runs. Paste any code, press Visualize (or Ctrl + Enter), then step through it with Next / Back or the arrow keys. Each step shows the running line, the call stack, each execution context's memory, the scope chain, closures, the setTimeout queue, the event loop and the console.
What you can learn with this tool
- Execution context: the Global Execution Context and a new Function Execution Context for every call, with their creation and execution phases.
- Call stack: contexts pushed on and popped off as functions are called and return.
- Hoisting and TDZ: why
varisundefinedandlet/constthrow before their line. - Scope chain: how a variable lookup walks outward scope by scope.
- Closures: memory that stays alive after a function returns.
- this: what
thispoints to in each context, includingnew. - Event loop: how
setTimeoutcallbacks wait in the task queue until the call stack is empty. - Errors:
throw,try/catch/finally.
How to use it
- Type or paste JavaScript in the editor, or pick one of the 10 built-in examples.
- Press Visualize or Ctrl + Enter.
- Use Next / Back, the ← → keys, or the slider to move through the steps.
- Read the notes panel for an explanation of each step and its edge cases.
Supported: functions, closures, var/let/const, objects, arrays, loops, try/catch, this, new and setTimeout. Not supported yet: classes, async/await, Promises and generators.
Frequently asked questions
What is an execution context in JavaScript?
An execution context is the environment JavaScript creates to run code. There is one Global Execution Context, and every function call creates a new Function Execution Context. Each one has a creation phase, where variables and functions are stored in memory, and an execution phase, where the code runs line by line.
What is the call stack?
The call stack is how JavaScript keeps track of which execution context is running. When a function is called, its context is pushed on top of the stack. When it returns, it is popped off and control goes back to the context below it.
What is hoisting and the temporal dead zone (TDZ)?
During the creation phase, var variables are set to undefined and function declarations are stored whole, so they can be used before their line. let and const are also hoisted but stay uninitialized until their line runs. Accessing them before that throws a ReferenceError. That gap is the temporal dead zone.
How does the scope chain work?
When JavaScript looks up a variable, it checks the current scope first. If the name is not there, it follows the outer reference to the scope where the function was written, and keeps going outward until it reaches the global scope. The first match wins.
What is a closure?
A closure is a function that keeps access to the variables of the scope it was created in, even after the outer function has returned. The visualizer shows this memory staying alive after the outer execution context is popped off the call stack.
How does the event loop work with setTimeout?
setTimeout hands its callback to the browser. When the timer finishes, the callback goes into the task queue. The event loop only moves it onto the call stack once the stack is empty, which is why a setTimeout with 0 ms still runs after the rest of your code.
Is this JavaScript visualizer free?
Yes. It runs entirely in your browser, needs no sign-up, and works with your own code or the built-in examples.