Line-anchored output and the filter chips

JSLab feature notes: one docs page, explained. Today: The output panel.

JSLab is a JavaScript & TypeScript scratchpad for macOS. You type, it runs, and the output panel fills up. This note covers the two things that make that panel readable: every row knows its line, and four chips filter what you see.

Every row knows its line

Each result, log and error appears as a row tagged with the line that produced it. The link works both ways:

• Hover a row and its line lights up in the editor.
• Put the caret on a line and its rows light up in the output.
• Click a row's line number and the caret jumps there.

Try it with the example from the docs:

const width = 12;
const height = 5;
width * height;
width + height;
Math.hypot(width, height);

Three rows: 60, 17 and 13, each tagged with its line. In a five-line file that's a nicety. In a two-hundred-line one it's the difference between reading output and searching for it.

When you re-run, rows whose values changed tint for a moment, so you see what your edit affected. Rows on the line you're typing on don't flash.

The four chips

Above the output sit four filter chips: All, Results, Logs and Errors. Each shows a live count, and the counts stay visible at zero, so "Errors 0" is a thing you can glance at.

What counts as what:

• Results: values from Auto Log and magic comments.
• Logs: console.log, and also console.info and console.warn.
• Errors: thrown errors, plus stderr and a failed console.assert.

Here's a run that throws: 9.99 is a result tagged :9, the error is tagged :4 with its stack frames, and the chips read All 2, Results 1, Logs 0, Errors 1.

The same filters are commands: Output: Show All, Output: Show Results, Output: Show Logs and Output: Show Errors, in the command palette (⇧⌘P).

Two small things

• Text written with process.stdout.write gets its own rows, without a line number, since no single line produced it.
• Right-click empty space in the panel for Copy All, which copies every entry the current filter shows. Filter to Errors, Copy All, paste into an issue.

Turning it down

Both display options live in Settings → Appearance: Output Highlighting colours values by type, and Output Line Numbers shows the source line beside each row. Both are on by default.

JSLab launches Nov 15. The full page, with a runnable example for each section: https://js-lab.app/docs/output