LiveEvalJS — Real-time JS/TS Evaluation for VS Code

LiveEvalJS evaluates JavaScript and TypeScript code in real-time and shows results as inline decorations — no REPL, no console switching, no manual runs.

Supports JavaScript, TypeScript, JSX, and TSX files.

Quick Start

1. Install from VS Code Marketplace
2. Open any .js, .ts, .jsx, or .tsx file
3. Add // ? to any line and results appear instantly

const arr = [1, 2, 3, 4, 5];
arr.reduce((a, b) => a + b, 0);  // ? ⇒ 15

function factorial(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
}
factorial(6);                     // ? ⇒ 720

Markers

All markers are comment suffixes added to the end of a line. The file is re-evaluated on every save (or keystroke, if auto-evaluation is on).

// ? — Inline Value

Shows the value of the expression on that line.

Math.pow(2, 10);              // ? ⇒ 1024
"hello".toUpperCase();        // ? ⇒ "HELLO"
[1, 2, 3].map(x => x * x);  // ? ⇒ [1, 4, 9]

Use /* ? */ for multi-line expressions:

const user = {
  name: "Alice",
  age: 30,
}; /* ? ⇒ {name: "Alice", age: 30} */

console.log() lines are automatically annotated inline even without a // ? marker.

// trace — Function Tracing

Wraps a function to record every call: arguments, return value, depth, and timing.

function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
} // trace
fib(6);
// ⇒ fib  ×25 calls  ↓6 depth  2ms

After evaluating, open LiveEval: Visualize Recursion from the Command Palette for an interactive call tree (see Recursion Visualizer).

// watch — Value History

Records a variable's value every time that line executes. Useful inside loops. Shows a sparkline for numeric data.

let count = 0;
for (let i = 0; i < 5; i++) {
  count += i; // watch
}
// ⇒ count: 0 → 1 → 3 → 6 → 10  ▁▂▄▆█

// ?? — Deep Inspection

Shows type, constructor, keys, and prototype chain.

const user = { name: "Alice", age: 30 }; // ??
// ⇒ 🔬 Object | {name, age} | extends Object

// assert — Inline Test

Evaluates a boolean expression and shows pass or fail with the actual value.

const sum = 10 + 20;
sum === 30; // assert ⇒ ✅ pass
sum === 40; // assert ⇒ ❌ fail · actual: 30

// path — Branch Coverage

Shows which branches inside a function were taken, and how many times each was hit.

function classify(n) {
  if (n > 0) return "pos";
  else if (n < 0) return "neg";
  else return "zero";
} // path
classify(5); classify(-3);
// ⇒ ⬡ 2/3 branches taken

For predicate functions used as callbacks, shows per-call results:

function isEven(n) { return n % 2 === 0; } // path
[1, 2, 3, 4].filter(isEven);
// ⇒ ⬡ 4 calls: 2✓ 2✗

// perf — Benchmarking

Runs the statement repeatedly and reports throughput.

for (let i = 0; i < 1000; i++) { Math.sqrt(i); } // perf
// ⇒ ⚡ 8.42M ops/s · avg 118ns · 1,000 runs

// log — Console-Only Annotation

Captures console.log() output for a line without showing a return value inline.

console.log("Debug:", myObj); // log

Code Coverage

LiveEvalJS automatically tracks which lines executed and highlights them in the gutter:

• Green — line executed (hot path)
• Red — line executed very frequently relative to the rest of the file
• Grey — code block was entered but this specific statement was never reached (dead code)

Branch taken/not-taken indicators appear on if/else lines without any marker needed.

Recursion Visualizer

After adding // trace to a recursive function and evaluating it, open the Command Palette and run LiveEval: Visualize Recursion.

The visualizer shows an interactive D3 tree of every call:

Playback controls

• Step forward/back one call at a time, or use Play to animate through
• Speed slider (100ms – 2000ms per step)
• Scrub slider to jump to any event
• Keyboard: ← / → step, Space play/pause, Home/End jump to start/end, F fit tree

Tree interaction

• Click a node to jump to that call's step
• Ctrl+Click to collapse/expand a subtree
• Return values shown on edges (↩ value)
• Node colour indicates recursion depth (blue → purple → red) and execution time (heat map once done)

Sidebar panels

• Step Details — the current event (call or return), arguments, return value, depth, and any console.log() output from that frame
• Scope — the active call frame's named parameters with their current values; a trail shows how they change as recursion deepens
• Console — all console.log()/console.warn() output emitted so far, attributed to the function that logged it
• Call Stack — every active frame from outermost to deepest, with argument values and change highlighting

Memoization insight

• The toolbar shows a Dupes chip when the same arguments are called more than once
• Click ♻ Memo to replay the trace as if the function were memoized — skipped calls are shown with a dashed teal border and ♻ value edge labels
• The insight chip shows how many calls memoization would eliminate

Multiple traced functions

• If more than one function has // trace in the same file, a function selector bar appears at the top of the visualizer — click to switch between trees

Large traces

• Traces over 500 events show a warning banner; playback is paused automatically
• Configure the capture limit with liveeval.visualization.maxEvents

Commands

Access via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Configuration

All settings are under the liveeval.* namespace (VS Code Settings, Ctrl+,):

Troubleshooting

• Results not appearing — check the status bar shows $(play) LiveEval. If it shows LiveEval Disabled, click it or press Ctrl+Shift+L.
• Extension not activating — open a .js or .ts file; the extension activates on JS/TS language files only.
• Typing feels sluggish — increase liveeval.behavior.evaluationDelay to 500–1000 ms.
• Recursion visualizer shows nothing — confirm the function actually recurses and that // trace is on the function's closing brace or definition line, then run the file before opening the visualizer.