The console shows what your code printed, not how it got there.

Replay your code, backwards too.

JSpark records a Node Run Step by Step, and lets you move through it, backwards as well as forwards. Nothing runs again.

Step through a Run, backwards too

JSpark runs the Snippet once and records every Step. Then you move back and forward through the recording, and nothing runs again.

TimelineEditing is paused while you replay · Esc to go back

1⌄function factorial(n) {

2⌄ console.log("asking for", n)

3⌄ if (n === 1) return 1

4⌄ const rest = factorial(n - 1)

5⌄ console.log(n, "×", rest, "=", n * rest)

6⌄ return n * rest

7⌄}

8⌄

9⌄console.log("answer", factorial(4))

Console

asking for 4
L2
asking for 3
L2
asking for 2
L2
asking for 1
L2
2 × 1 = 2
L5
3 × 2 = 6
L5
4 × 6 = 24
L5
answer 24
L9

Variables

everywhere

factorial: Function

1 / 20

A real recording of factorial(4). Moving back to an earlier Step runs nothing again.

What each Step changed

Variables lists every name in scope at the Step, grouped by scope. A name the Step changed is lit.

TimelineEditing is paused while you replay · Esc to go back

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //? → 19

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

Console

total 53

L10

highest 30

L11

Variables

in this loop

score: 7new each turn

everywhere

scores: Array(4)

total: 12

5 / 10inside f · 2 of 4

Step 5, the loop’s second turn: score became 7 and total became 12, so both are lit.

A name’s value then, and what a closure remembers

Hover a name to see its value at the Step on screen, never a later one. A name a function keeps from further out is marked remembered.

TimelineEditing is paused while you replay · Esc to go back

1⌄function makeCounter() {

2⌄ let count = 0

3⌄ return () => {

4⌄ count += 1

5⌄ return count

6⌄ }

7⌄}

8⌄

9⌄const next = makeCounter()

10⌄next()

11⌄next()

12⌄console.log("count", next())

Console

count 3

L12

Variables

everywhere

makeCounter: Function

1 / 13

makeCounter has returned, yet count keeps going up, 1 then 2. Variables marks it as remembered.

Objects as they were

An object shows what it held at each Step, not what it became later.

TimelineEditing is paused while you replay · Esc to go back

1⌄const cart = { items: [], total: 0 }

2⌄

3⌄cart.items.push("apple")

4⌄cart.total += 3

5⌄cart.items.push("bread")

6⌄cart.total += 5

7⌄

8⌄console.log("cart", cart)

Console

cart Object

Variables

Nothing in scope

1 / 7

At Step 5, cart holds two items and a total of 3, though by the end its total is 8.

The console, up to this Step

The line printed at this Step is lit, and later output is dimmed. Next Step with output jumps to the next Step that printed.

TimelineEditing is paused while you replay · Esc to go back

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //?

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

Console

total 53

L10

highest 30

L11

Variables

Nothing in scope

1 / 10

Each press jumps to the next console.log. Its line lights, and what prints later stays dim.

Inside lines JSpark+

Step into each call, callback and loop check, and see what each one came to, such as score >= 10 → true.

TimelineEditing is paused while you replay · Esc to go back

1⌄const scores = [12, 7, 30, 4]

2⌄

3⌄const passed = scores.filter((score) => score >= 10)

4⌄const doubled = passed.map((score) => score * 2)

5⌄const total = doubled.reduce((sum, score) => sum + score, 0)

6⌄

7⌄console.log("total", total)

Console

total 84

Variables

Nothing in scope

Call stack

global1

1 / 18

The filter, map and reduce callbacks each get a Step of their own, with what they came to.

The Call Stack JSpark+

At every Step, see which function called the one you are in, with each call’s arguments and line.

TimelineEditing is paused while you replay · Esc to go back

1⌄function factorial(n) {

2⌄ console.log("asking for", n)

3⌄ if (n === 1) return 1

4⌄ const rest = factorial(n - 1)

5⌄ console.log(n, "×", rest, "=", n * rest)

6⌄ return n * rest

7⌄}

8⌄

9⌄console.log("answer", factorial(4))

Console

asking for 4
L2
asking for 3
L2
asking for 2
L2
asking for 1
L2
2 × 1 = 2
L5
3 × 2 = 6
L5
4 × 6 = 24
L5
answer 24
L9

Variables

everywhere

factorial: Function

Call stack

global9

1 / 20

Five calls of factorial pile up, each with its own n, then unwind as they return.

Longer recordings JSpark+

JSpark records up to 5,000 Steps. JSpark+ records 200,000 at first, and up to 2,000,000 when you ask for more. A recording that stopped early says so, and offers to record more.

TimelineEditing is paused while you replay · Esc to go back

1⌄let total = 0

2⌄for (let i = 0; i < 10000; i++) {

3⌄ total += i

4⌄}

Console

Variables

Nothing in scope

1 / 5000incomplete — record more

This loop needs 10,000 Steps. The bar says the recording is incomplete, and offers to record more.

Good to know

Node Snippets only: A Web Snippet runs as a live page and has no Timeline.
The editor waits: While the Timeline is open, the code is read-only and Run as you type waits. Esc goes back to editing.
Steps you can use: A recording that ran out of room keeps the Steps it recorded, and you can still move through them.
Keys: ⌘⇧↵ opens the Timeline, ⌘← and ⌘→ move one Step, and Space plays and pauses.

Read the Timeline docs All features

Next time a loop surprises you, replay it.

Download free for Mac

Not a trial: it doesn’t expire.

Windows: coming later