Most lines print nothing to the console.

Peek: see a line’s value, with no console.log.

End a line with //? and its value appears beside it, after every Run. Here is what it shows in a loop, before and after a change, several at once, and when there is no value.

See one line’s value

End a line with //? and, after the Run, its value appears beside it. In a loop, it is the value from the last pass.

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

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 //? → 53

8⌄}

9⌄

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

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

total 53

highest 30

Done in 2ms·Runs as you type

The loop ran four times; 53 is the value from the last pass.

Every pass of a loop JSpark+

Hover the value and see what the line came to on each pass, in order, and how many times it ran.

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

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 //? → 53

8⌄}

9⌄

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

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

total 53

highest 30

Done in 2ms·Runs as you type

Hovering → 53 lists every pass: 12, 19, 49, 53, four in all.

Just part of a value

After code, write an expression of $, the line’s value, such as //? $.length. If it throws, the Peek shows the error and the Run goes on.

const users = [{ name: "Ada"…

1⌄const users = [{ name: "Ada", age: 36 }, { name: "Lin", age: 29 }]

2⌄

3⌄users //? $.length → 2

4⌄users.map((u) => u.name) //? $.join(", ") → "Ada, Lin"

5⌄users[2] //? $.name → threw TypeError: Cannot read properties of undefined (readi…

Done in 1ms·Runs as you type

Each Peek reads $, the value of its line. There is no users[2], so $.name threw.

Before and after

Put the same Peek before and after a line, and see what the line changed.

const prices = [40, 100, 1, 5, 25]

1⌄const prices = [40, 100, 1, 5, 25]

2⌄//? prices → [40, 100, 1, 5, 25]

3⌄const sorted = prices.sort()

4⌄//? prices → [1, 100, 25, 40, 5]

5⌄

6⌄console.log(sorted === prices)

true

Done in 2ms·Runs as you type

sort() changed the array itself, and sorted the numbers as text.

Several values at once

A /*? block takes one name on each line, so related values sit side by side.

const user = { name: "Ada", tags: ["admin"] }

1⌄const user = { name: "Ada", tags: ["admin"] }

2⌄const copy = { ...user }

3⌄

4⌄copy.name = "Grace"

5⌄copy.tags.push("editor")

6⌄

7⌄/*?

8⌄user.name → "Ada"

9⌄user.tags → ["admin", "editor"]

10⌄copy.tags → ["admin", "editor"]

11⌄*/

Done in 2ms·Runs as you type

The spread copied name, but both objects share one tags array.

When there is no value

A Peek always says something. A line the Run never reached says not reached, in lighter slanted text.

const orders = []

1⌄const orders = []

2⌄

3⌄for (const order of orders) {

4⌄ order.total //? → not reached

5⌄}

6⌄

7⌄console.log("orders", orders.length)

orders 0

Done in 1ms·Runs as you type

The loop body never ran, so the Peek says not reached.

Step by Step, in the Timeline

In the Timeline, a Peek shows its value at the Step on screen, so it changes as you move through the Steps.

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

Step by Step, the Peek shows 12, 19 and 49, and not reached yet before the loop.

Good to know

On every Run: Peeks update each time the code runs, as you type too.
Node and Web: Peek works in Node Snippets and in web pages alike.
Never written in: The value is drawn beside the line. Copying code copies the comment, not the value.
Long values, cut: A value longer than 60 characters is cut short. Hover it to see all of it.

Read the Peek docs All features

Next time you add a console.log, try //? instead.

Download free for Mac

Not a trial: it doesn’t expire.

Windows: coming later