Docs / Timeline
Step Run and the Timeline
Open the Timeline, and JSpark runs your Node Snippet once, records every Step, and lets you walk through them.
A Step Run is a Run that records a Trace: every Step, in the order the code reached them. The code runs to the end first. Then you move through the recording, backwards as easily as forwards, because nothing runs again.
Open the Timeline
- Open a Node Snippet.
- Press ⌘⇧↵ or Ctrl+Shift+Enter, click Timeline on the rail, or choose Run → Timeline.
The Snippet runs once while JSpark records it. The Timeline then opens on the first Step: the code shows the Step lit, the panels show the console and the variables, and the Timeline bar runs along the bottom.
Timeline · Esc to exit
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
in factorial()
everywhere
everywhere
While the Timeline is open:
- The code can't be edited, and Run as you type waits.
- ⌘↵ or Ctrl+Enter records the Snippet again and replaces the recording.
- While the Timeline is open, the tabs are hidden: press Esc to leave it first. The window keeps one recording, so opening the Timeline in another tab replaces it.
The Timeline is for Node Snippets only. A Snippet that runs in a web page has no Timeline. An empty Snippet has nothing to record: the footer says Nothing to step through.
What a Step is
A Step is one statement the code ran, with the values of every variable at that moment. It is found by line and column, so one line can hold several Steps. A statement that runs ten times gives ten Steps.
The Timeline bar shows the recording as a row of cells, one per Step:
- The cell with an edge is the Step on screen. The filled cells are the Steps before it.
- A lighter cell is a Step inside another statement, such as a loop's body. The bar then names what it is inside, and which pass:
2 of 4. - A cell with a line across it is a Step that printed to the console.
- The counter,
13 / 20, is the Step on screen and the Steps recorded.
JSpark records up to 5,000 Steps. JSpark+ records 200,000 by default, and up to 2,000,000. See What is not recorded.
The last Step is where the Run ended: the bar adds · finished. When a Step ran in a later turn of the event loop than the Step before it, the bar says resumed later.
Show or hide the panels
The buttons at the right of the bar show or hide the Timeline Panels: Console, Variables and Call stack. The same switches are in View → Timeline Panels. A hidden panel gives its room to the others. With all three hidden, the output side says All panels off. Turn one on below.
The Call Stack is JSpark+. In JSpark, clicking its button says what JSpark+ adds. See The Call Stack.
Back to editing
Click Back to editing, the last button on the bar, or press Esc. Pressing ⌘⇧↵ or Ctrl+Shift+Enter again does the same. The code can be edited again.
Leaving keeps the recording. Open the Timeline again before you change the code, and you are back on the same Step, without a new Run, unless you opened the Timeline in another tab since. Change the code first, and opening the Timeline records it again.
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.