← All posts

Windows on the frontend

JS Console on any page — REPL with ↑↓ history, no DevTools

15 May 2026 · by JustZix Team

F12 → Console → type something → click somewhere else → the screen reflows, DevTools is gone. Or more often: you don't want DevTools open with a client in the room. JustZix v2.13.66+ has JS Console — a floating terminal-like REPL on the page. Ctrl+Enter, ↑/↓ history, Ctrl+L = clear, captures all console.log from page context.

How it differs from DevTools Console

Functionally:

• JS Console lives on the page — a floating window with a header and two sections (output log + input textarea). Doesn't disappear on focus change, doesn't close on reload.
• Per-tab persistence — input draft, output log (up to 200 lines), command history (up to 100) — all in sessionStorage. Reload the tab → everything's still there. DevTools Console — output wiped on reload.
• Scope hierarchy — Console only shows on pages matching the URL pattern of its folder/group/rule. Different configuration per project.
• Cross-device sync — you have a "Stripe debugging" Console on your laptop and work machine. Command history does NOT sync (sessionStorage per tab), but the window itself does.

What's the same: page context. Your code has access to window, document, page globals (e.g. app.store in a React+Redux app). Same evaluation engine, same scope.

First use in 60 seconds

1. In JustZix options pick a folder/group/rule with a relevant URL pattern.
2. Click "Windows" → modal listing CSS panes + JS panes + JS Consoles. Pick "+ Console".
3. Enter a name ("Stripe REPL"), colour (default purple #7C3AED).
4. Visit a matching URL — the Console shows up as a floating window (top-right anchor).
5. Type document.title in the input, press Ctrl+Enter. The output shows > document.title (command echo) + "Real page title" (result).

Keyboard shortcuts

History: max 100 entries, dedup of the last command (no repeats), persisted in sessionStorage per tab. ↑/↓ only works when you're at the edge of the textarea — lets you navigate normally inside multi-line code.

Capturing console.log/warn/error/info (v2.13.67)

Your eval can call console.log('x') — it'll appear in the Console output below the command:

> console.log('hello'); 42
[log] hello
  42

First the logged values, then the return. Works for console.warn, console.error, console.info too — each with its own prefix ([warn], [err], [info]) and colour.

Bonus: if the page itself logs something from page context during your eval (e.g. a fetch inside your code logs an XHR error), you'll see it in the Console. That's debugging gold — the analyst sees exactly what's going on under the hood.

What you actually check

1. Quick fetch test before adding to a rule

> fetch('/api/products/12345').then(r => r.json()).then(console.log)
[log] {id: 12345, name: "...", price: 99.99}

Verify the endpoint returns what you expect. Without opening the Network panel in DevTools.

2. "What's in Redux"

> window.__REDUX_DEVTOOLS_EXTENSION__?.connect?.(); store?.getState?.()
  {user: {...}, cart: {...}, products: [...]}

One-click dump of current state, without installing Redux DevTools.

3. "How many h2 on this page"

> document.querySelectorAll('h2').length
  47

Page structure checks, pre-validating CSS selectors.

4. One-off override

> document.querySelectorAll('.ad').forEach(el => el.remove())
  undefined

Purely destructive, one-time. You don't want a CSS/JS rule for it — you want the action once. Console gives you zero-cost JS.

5. Educational

Teaching a junior dev or someone without DevTools background. You demonstrate typeof null, [].map(x => x + 1), Array.from('hello'). A Console on the page is less intimidating than DevTools.

Scope hierarchy — "GA debug" Console only on *shop*

A JS Console attached to the "E-commerce" folder appears on every page matching shop.com/*. Not on YouTube. Not on Gmail. A "Stripe Dashboard" Console on dashboard.stripe.com/* — useless elsewhere, so it doesn't show. Each project gets its own REPL.

Plus: hide-for-page (click ✕ on the pane header, or right-click → hide) — the Console disappears for the current tab. Reload the tab = restores (sessionStorage flag reset).

Pitfalls

• Async eval — await fetch(...) without a wrapper won't work (no top-level await). Wrap in an IIFE: (async () => { const r = await fetch(...); console.log(await r.json()); })(). Or use .then(...).
• sessionStorage limit — last 200 output lines kept, older trimmed (so storage doesn't grow unbounded). History up to 100 commands.
• Reload tab = doesn't lose output. Close tab = loses. If you want to keep something — copy to an external file, or to a persistent JS rule.
• Sandboxed iframes — the Console doesn't render inside iframe content (unless the iframe URL separately matches a scope pattern). Cross-origin iframe = separate scope.

What's next

JS Console is the 3rd "window on the frontend" type in JustZix. The first (CSS pane) — live CSS editor. The second (JS pane) — persistent JS code with Run-on-demand. The third (Console) — REPL. The fourth (Output Console) — custom logger for user-JS, planned.

Install JustZix and have a REPL in every tab, no F12.