Docs / Everyday

The console

The console shows what a Run printed, its errors, and the value of its last line.

On this page

What a Run printed
The last value
Objects
Errors and where they came from
Clear the console
Good to know

The console sits beside or under your code. It shows what each Run printed with console.log and the other console methods, in the order it was printed.

What a Run printed

Each console.log call is one line. Values in one call are printed a space apart, so console.log("Hello", 42) prints Hello 42.

const user = { name: "Ada", langs: ["js", "ts"] }

1⌄const user = { name: "Ada", langs: ["js", "ts"] }

2⌄

3⌄console.log("Hello", 42)

4⌄console.log(user)

5⌄setTimeout(() => console.log("a moment later"), 100)

6⌄

7⌄user.langs.length

Hello 42

Object

latea moment later

Done in 105ms·Runs as you type

Two printed lines, the value of the last line after <, and a line printed later by a timer, marked late.

In a Node Snippet, output that arrives after your code’s last line has run, for example from setTimeout, wears a late badge.

The last value

When the last line of a Node Snippet is an expression, the console shows its value after a <. In the picture above, user.langs.length is the last line, so the console shows < 2. You don't need to wrap it in console.log.

The line runs once. JSpark keeps its value; it does not run it again.
A value of undefined is not shown, so a Snippet that ends with console.log(…) shows no extra line.

To see the value of any other line, add a Peek.

Objects

An object or an array is printed as one closed line, such as Object or Array(2). Click the chevron in front of it to open it, one level at a time.

const user = { name: "Ada", langs: ["js", "ts"] }

1⌄const user = { name: "Ada", langs: ["js", "ts"] }

2⌄

3⌄console.log("Hello", 42)

4⌄console.log(user)

5⌄setTimeout(() => console.log("a moment later"), 100)

6⌄

7⌄user.langs.length

Hello 42

Object

name : Ada

langs : Array(2)

latea moment later

Done in 105ms·Runs as you type

The object opened: name is Ada, and langs is an array of two, still closed.

To print objects already open, click the last button in the footer. Its tooltip says Collapsed by default or Expanded by default. The same choice is Settings → Console → Expand objects, off at first.

The console prints values as they are, not as text:

Map(2) and Set(3) open to their entries. A Map entry shows its key, then =>, then its value.
An empty slot in an array shows as <empty>, not as undefined.
-0 prints as -0.
A getter shows as (getter). The console does not call it.
An object that contains itself shows (already shown above) where it comes back.
A very large object is cut short, with a line such as … 250 more entries.

Errors and where they came from

An error is printed in red: its message, then the functions it came through, one per line. In a TypeScript Snippet, each line in your own code names the function and its line, such as total — line 2. Your Snippet’s own body is top level.

function total(items) {

1⌄function total(items) {

2⌄ return items.reduce((sum, item) => sum + item.price, 0)

3⌄}

4⌄

5⌄console.log(total([{ price: 5 }, { price: 7 }]))

6⌄console.log(total())

TypeError: Cannot read properties of undefined (reading 'reduce')

total — line 2

top level — line 6

Threw in 2ms·Runs as you type

total() was called with nothing, so items is undefined. The error came from line 2, called from line 6.

Click one of those lines to put the cursor on that line in the editor. An error that names a line, such as a syntax error, is a link too.

What printed before the error stays in the console: in the picture, 12 from the first call. The footer says Threw and how long the Run took.

Clear the console

Do one of these:

Press ⌘K or Ctrl+K.
Choose Run → Clear Console.
Click the Clear console button in the footer.

In the Timeline, the console can’t be cleared: its lines belong to the recording.

Good to know

Settings → Console → Colored output colours values by type, and warnings and errors from console.warn and console.error. It is off at first.
Settings → Console → Text size follows the editor’s size until you set the console apart.
Peek values are drawn beside the code, never in 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.