Docs / Timeline

Step Detail

Lines records one Step per statement. Inside lines, in JSpark+, also records each call, callback and loop check.

On this page

Lines
Inside linesJSpark+
Choose the detailJSpark+

Step detail is how much of a Run the Timeline records. JSpark records Lines. JSpark+ can also record Inside lines.

Lines

Each statement the code runs is one Step. A chained call such as scores.filter(…).map(…) is one Step. A loop's header is one Step, when the loop starts; each statement in its body is a Step on every turn.

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

4 / 20

const rest = factorial(n - 1) is one Step; the next Step is already inside the call.

Inside lines JSpark+

In JSpark+, Inside lines also records the calls, callbacks and loop checks inside each line. Each one is an Inner Step. Next step still moves one Step at a time, Inner Steps included.

Timeline · Esc to exit

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

1 / 18

Each callback is its own Step: score >= 10 → true for 12, → false for 7.

An Inner Step is drawn apart from a statement:

Its cell on the bar is lighter, and only its part of the line is lit.
The bar says what it is inside, and which pass: inside scores.filter(…) · 2 of 4.
What it came to is shown after the line: score >= 10 → true.
Point at an operator or a bracket inside the lit part to see the same value, as this step →.

Inside lines records more Steps for the same code, so it reaches the recording limit sooner. See What is not recorded.

Choose the detail JSpark+

Open Settings → Timeline.
Under Step detail, click Lines or Inside lines.

Step detail

LinesInside lines

Also steps into calls, callbacks and loops. Hits the limit sooner.

Step detail in Settings → Timeline, with its cost in one line under it.

The next recording uses it. A recording made with Lines stays as it was: while it is on screen, the bar says lines only — record in detail. Click it to record again with Inside lines.

In JSpark, Settings shows Inside lines marked +, and choosing it says what JSpark+ adds. The Timeline records Lines.

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.

Step Detail

Lines

Inside lines JSpark+

Choose the detail JSpark+

Related