About this JavaScript visualizer
This JavaScript visualizer runs your program one statement at a time and shows what happens at every step: which line is running, the value of each variable, which functions are on the call stack, and what console.log has printed so far. You can go forward and backward as often as you like.
It is built for learning. Watching a loop change a variable, or a recursive function add a new frame for every call, makes it much easier to see how JavaScript really works. Everything runs in your browser, so there is nothing to install and no account to create.
How to use it
- Type or paste your JavaScript in the editor. The example on this page shows a loop and a recursive function.
- If your program uses prompt(), type the answers in the Input box below, one per line.
- Press Visualize. The program is recorded in a moment because nothing needs to be downloaded.
- Use the arrows, the slider, or the Left and Right keys to move through the steps. The highlighted line is the one about to run, and changed variables are marked.
Features
- Step forward and backward through every statement of your program
- See variables for the global scope and for every function call on the stack
- Values that just changed are highlighted
- Console output appears exactly when the program prints it
- Errors show the line that caused them
- Free, no login, works on phones and computers
Good to know
- Recording stops after 3,000 steps, so very long loops are cut short and endless loops cannot freeze the page.
- The inside of async functions and generators is not stepped through; they still run and print, but their lines are not shown.
- Timers (setTimeout, setInterval) run in order without really waiting, so you do not wait for long delays.
- Long values (big arrays or objects) are shortened so the screen stays readable.
- Objects are shown as text, not as boxes with arrows yet.
- Only JavaScript is supported here. For TypeScript, use the TypeScript compiler.
Frequently asked questions
What is a JavaScript visualizer?
It is a tool that runs your code step by step and shows the state of the program at each step, mainly the variables and the call stack. It helps you understand what the code does instead of only seeing the final output.
Does it run my code on a server?
No. Your program runs inside your browser in a background worker, and it is not sent anywhere.
Why are the lines inside my async function not shown?
Async functions and generators pause and resume, which makes a simple line-by-line view misleading, so the visualizer runs them normally without stepping inside. Code outside them, and regular functions they call, is still shown.
Why did it stop after 3,000 steps?
A limit keeps the page fast and stops endless loops. Try fewer iterations to see the whole run.
Is it free?
Yes. There is no sign-up and no limit on how often you use it.
Just want to run your code?
Use the online JavaScript compiler to run a program and see its output straight away.