See Your JavaScript Run 12 Different Ways: Meet JSVisualizer (and How It Differs from Python Tutor)

Why "seeing" code matters

If you've ever learned to program — or taught someone who is — some of these will sound familiar:

• You copy an example, run it, and get the right answer. But you couldn't explain why it's the right answer.
• Recursion makes perfect sense during the lecture. Then you sit down to write a recursive function and your mind goes blank.
• You sprinkle console.log everywhere to chase a value, and halfway through you forget what you were looking for.

The root problem is that a program's behavior is invisible. Source code is static text, but when it runs it produces state that changes over time. Most beginner struggles come down to not being able to picture that hidden motion accurately.

This series introduces JSVisualizer, a web app that runs JavaScript one step at a time and shows you what's going on through 12 different views.

https://tntetsu.github.io/JSVisualizer/

It runs entirely in your browser. Nothing to install, no account needed.

The interface follows your browser's language (English, or Japanese if your browser prefers Japanese). You can switch at any time with the EN / 日 button in the top-right corner.

In this first post, I'll give you a quick tour and compare JSVisualizer with the well-known Python Tutor. From the next post on, each article picks one classic algorithm and pairs it with the view that explains it best.

The screen at a glance

The screen has two halves:

• Left: your code. Paste in any JavaScript and run it. The line being executed is highlighted in blue, and the expression being evaluated right now is highlighted in orange. When execution is inside a function, the expression that called it (here, fact(n - 1)) gets a dashed purple underline.
• Right: the views. Each tab shows the same moment of the same run from a different angle. Above is the Call Stack view, showing calls piling up: fact(4) → fact(3) → fact(2).

To use it, write some code, press ▶ Run, and use the buttons along the top to step forward (or backward). You can also drag the slider to jump to any point in the run.

The user manual explains every button and view in detail. You can also open it with the ? button in the top-right corner.

Feature 1: Step at four levels of detail

You choose how big a "step" is. Each level has its own forward and back buttons:

Buttons	Unit	Use it when you want to…
◀ Expr / ▶ Expr	Expression (finest)	see the order in which something like a + b * c is evaluated
◀◀ Stmt / ▶▶ Stmt	Statement	follow the flow one statement at a time
◁ Human / ▷ Human	"Human-friendly" step	stop only at meaningful changes: assignments, condition checks, loop updates (the best place for beginners to start)
⏪ Func / ⏩ Func	Function call	skip over function bodies and watch only calls and returns

A typical workflow: use Human steps to get the big picture, then switch to Expr steps when something puzzling happens. Every level can step backward, so when you think "wait, what just happened?", you can rewind instantly.

Feature 2: Twelve views

The views fall into three groups, depending on what they show:

Group	What it shows	Views
State	What the program remembers at a given moment	Variable, Exec Trace, Call Stack, Lifetime, Memory
Behavior	How execution unfolds over time	Expr, Subst, Control Flow, Heatmap, Call Tree
Data structures	What's inside arrays and objects	Arrays, Objects

Views also differ in how they handle time. Some show only the current moment and redraw on every step (e.g. Variable, Call Stack). Others lay out the whole history so you can see how you got here (e.g. Exec Trace, Subst, Heatmap). The first kind answers "what's going on right now?"; the second answers "how did things change?"

For example, here is the Subst view (short for substitution). It rewrites the recursive call fact(4) the way you'd expand it by hand — 4 * fact(3), then 4 * 3 * fact(2), and so on — leaving the whole expansion on screen at once.

Same program, same moment: the Call Stack view shows calls stacking up, while the Subst view shows an expression being rewritten. If one picture doesn't click, another one might. That's the whole reason for having twelve.

How is this different from Python Tutor?

Python Tutor is the best-known program visualizer out there and is used by learners all over the world. Despite the name, it also supports Java, C, C++, and JavaScript. So the first question people ask about JSVisualizer is usually, "How is this different from Python Tutor?"

	JSVisualizer	Python Tutor
Languages	JavaScript only	Python, Java, C, C++, JavaScript
Step size	4 levels (expression, statement, human-friendly, function), forward and back	1 level (line), forward and back
Visualizations	12 views, switchable via tabs	1 (frames and objects diagram)
Which expression is running	Highlights the exact expression	An arrow points to the line
The big picture of recursion (call tree, expansion by substitution)	Call Tree and Subst views	In JavaScript mode, frames disappear once a call returns
Sharing	Links that open specific code (via ?code=, see below)	Shareable links and embed codes for a specific run

Python Tutor's diagram — frames on the left, objects on the right, arrows for references — is an excellent way to understand how variables relate to memory. JSVisualizer has a view of the same kind, called Memory.

Where JSVisualizer differs is that you're not limited to that one diagram. You pick the view that fits the question you're asking:

• How does a variable change as a loop runs? → Variable, Exec Trace
• How does a complicated condition turn into true or false? → Expr (stepping one expression at a time)
• Which branch of an if did the program take? → Control Flow
• Is my recursive function computing the same thing over and over? → Call Tree

So which one should you use?

Honestly, it's not about which is better — they shine in different situations.

Reach for Python Tutor when you…

• are learning Python, C, or another language besides JavaScript
• want to really understand variables, references, and memory ("boxes and arrows")
• want to hand students a single link that replays one specific run

Reach for JSVisualizer when you…

• are learning or teaching JavaScript
• want to see things a memory diagram can't easily show: evaluation order, which lines ran and how often, how recursion branches out
• want to look at the same program from several angles

For instructors: links that open specific code

You can add parameters to the URL so that JSVisualizer opens with a specific piece of code already loaded:

https://tntetsu.github.io/JSVisualizer/?code=<URL of a code JSON>&view=<view to show first>

• code: the URL of a JSON file shaped like { "title": "...", "code": "..." }
• view: the view that opens the first time the reader presses ▶ Run (trace, subst, controlflow, …)

Put a link like this in your slides or assignments — "open this, press Run, and step through it" — and every student starts from the same screen without retyping any code. Every post in this series ends with a link in this format.

Try it yourself

This link opens the factorial example from this post. Press ▶ Run and the Subst view opens. Use ▷ Human to step forward, and try switching between tabs as you go.

▶ Open in JSVisualizer (factorial, Subst view)

function fact(n) {
  if (n <= 1) {
    return 1;
  }
  return n * fact(n - 1);
}
console.log(fact(4));

Of course, you can also open the home page and paste in your own code.

Wrapping up

• JSVisualizer is a web app that steps through JavaScript and lets you watch it run through 12 different views.
• You can step at four levels of detail, and step backward at every level.
• Beyond the memory diagram that Python Tutor does so well, you can pick a view that matches your question: evaluation order, branching, execution counts, or how recursion unfolds.

Next up: the first big hurdle in programming — the for loop. We'll take the classic "add up 1 through 5" program and use the Variable view to follow sum and i one step at a time.