Docs / Timeline

Moving through Steps

Step back and forward, drag across the Steps, or let Autoplay play them. Nothing runs again while you move.

On this page

Previous and next Step
Scrubbing
Autoplay
Output up to this Step

The Timeline moves through a recording that is already made, so going back costs the same as going forward. Every control here is on the Timeline bar.

Previous and next Step

Previous step: press ⌘← or Ctrl+Left, or click the left arrow.
Next step: press ⌘→ or Ctrl+Right, or click the right arrow.
Next step with output: jumps to the next Step that printed to the console.

The same commands are in the Run menu. The code, the Peeks and the panels follow the Step.

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))

14 / 20

From the left: Previous step, Next step, Next step with output, Play, and the speed.

Scrubbing

Click a cell on the strip to go to that Step. Drag along the strip to move through the Steps as fast as you like. The code does not run again: every Step is read from the recording.

A long recording has more Steps than the strip has room for. Then each cell stands for a run of Steps, and a click or a drag goes to the Step under the pointer, not to the start of the run.

Timeline · Esc to exit

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

highest 30

Variables

Nothing in scope

1 / 10

Clicking cells jumps between Steps; the Peek shows total at each one.

Autoplay

Click Play, or press Space.
Click Slower or Faster, the minus and plus beside it, to change the speed.
Click Pause, or press Space again, to stop.

9 / 20

Autoplay is on: the Play button is pressed, and the speed is 2x.

The speed is in Steps a second: 1x is one Step a second, and the default, 2x, is two. It goes from 0.5x to 100x. At the fast speeds, Autoplay moves several Steps at a time. The speed is kept for next time, and is also in Settings → Timeline → Autoplay speed.

Autoplay stops at the last Step. Press Play there, and it starts again from the first Step. Clicking a Step button or the strip stops it where it is.

Output up to this Step

The console follows the Step. A line printed before the Step shows as usual. A line printed at the Step is lit. A line printed after it is dimmed, but stays in place, so the list does not jump while you move. The console keeps the last line printed so far in view.

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

asking for 3

asking for 2

asking for 1

2 × 1 = 2

3 × 2 = 6

4 × 6 = 24

answer 24

At this Step, 2 × 1 = 2 has just printed; the three lines after it are dimmed.

To see all the output plainly, switch off Show output up to this step, the button at the bottom right of the console. It is on by default. For what the console shows, see The console.

The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.

Moving through Steps

Previous and next Step

Scrubbing

Autoplay

Output up to this Step

Related