A mini-IDE in a browser tab: 8 JustZix tools that replace DevTools
JustZix started as a CSS injection extension — but over the past year it grew into something much bigger. Today it's a mini-IDE in every browser tab — 4 window types (panes), 6 action types, 2 JS API namespaces, and a snap connections system to arrange them all into a coherent per-domain dashboard. No F12. No DevTools. All inside the tab itself. This post maps the whole thing — what to use when, how it fits together, where to start.
The map: 4 + 6 + 2 + 1
JustZix splits into four main components you can use together or separately:
| Component | What it does | Number of types |
|---|---|---|
| CSS/JS rules | Inject <style> / <script> on URL match — auto-run | 2 (CSS, JS) |
| Bar actions | Buttons in a floating bar — manual invocation | 6 (BUTTON, SELECT, INPUT, TEXTAREA, SLIDER, TOGGLE3) |
| Windows on the frontend | Floating panels with their own per-pane logic | 4 (CSS pane, JS pane, JS Console, Output Console) |
| JS helpers | Programmatic access — MAIN-world namespaces | 2 (window.JZ, window.JUSTZIX) |
Plus snap connections as the "glue" — lets you arrange panels and the action bar into groups that move together.
Windows on the frontend — 4 types
1. CSS pane — live CSS editor inside the tab
Open a panel next to the page, write CSS, see changes live. Auto-save inside the tab. Persistent per-tab via sessionStorage. No commit anywhere, dies with the tab. Perfect for "I need to see how buttons would look in a different colour, but I'm not deploying it yet".
→ CSS pane: a live CSS editor on any page, without DevTools
2. JS Console — REPL with ↑↓ history
The DevTools REPL alternative. Ctrl+Enter eval. Up/down arrows scroll history (per-tab sessionStorage). Output captures only sync — async tasks land straight in DevTools. Perfect for ad-hoc checks ("how many elements have class X?", "what does this API return?").
→ JS Console: REPL on any page, no DevTools
3. JS pane — Run-on-demand scripts
Persistent JS code with a ▶ button. Ctrl+Enter fires. Dirty state (visual cue that you have unrun changes). Error overlay (red bar inside the pane without F12). Perfect for destructive scripts ("empty cart", "delete draft", "reset form") — you don't want them auto-running, you want to click ▶ on demand.
→ JS pane: Run-on-demand scripts, no auto-run on every visit
4. Output Console — read-only log viewer
The 4th window type — listening, not writing. Captures all page console.log/warn/error/info/debug (sync + async) plus the dedicated window.JUSTZIX.log() channel. viewMode [C/J/C+J] toggles visibility. Per-level filters, search box. 2000 lines. CSP-immune (extension privileges).
→ Output Console: watch the page's console.log inside a tab panel
Action types — 6 in the action bar
The action bar is a floating bar of buttons you invoke manually. Six action types — all living in the same bar, each with its own semantics:
| Type | UX | Active-state memory |
|---|---|---|
| BUTTON | Single click → run code | None — fire-and-forget |
| SELECT static | Dropdown of 2-N options | Yes (dataset) |
| SELECT js | Dropdown with JS-generated options | Yes (native <select>) |
| INPUT | Single-line text input + Enter→run | Yes (per-tab) |
| TEXTAREA | Multi-line text + blur→run | Yes (per-tab) |
| TOGGLE3 | 3-state segmented control | Yes (idx 0/1/2) |
| SLIDER | Range slider (input + change events) | Yes (Number) |
TOGGLE3 — 3-state segmented control
Segmented control with exactly 3 states. Each state gets its own label, value, colour, and JS code. Best use case: Dev/Staging/Prod environment switcher (each state = different subdomain), Light/Dark/Auto theme override, feature flag tri-state Off/Default/Force-on. 5 configurable colours (active bg/text + inactive bg/hover/text).
→ TOGGLE3: 3-state segmented control in the action bar
SLIDER — a CSS variable controller at your fingertips
Native <input type="range"> in the bar. Live drag = save memory (without firing code), release = run code with value as a Number. 4 separate colours (bg, fill, label text, value text). Use case: brightness controller (filter:brightness 50-150%), font-size for accessibility, animation speed throttle for debugging, any CSS variable you want to turn like a physical fader.
→ SLIDER: a CSS variable controller inside the tab
API — two namespaces, two roles
JustZix installs two separate namespaces in MAIN world. Each has its own purpose and lifecycle — they deliberately don't mix:
window.JUSTZIX(logger) — primary alias since v2.13.76. Brand name = vanishingly small collision risk with page scripts.JUSTZIX.log/.warn/.error/.info/.debugdispatches to Output Console (kind='jz'); does NOT pipe to native console. Aliases:window.__JUSTZIX__(always),window.JZ(only when free).window.JZ(action helpers) — operates ondata-jz-action-idelements in the DOM.JZ.click(label)/JZ.value(label)/JZ.setValue(label, v)/JZ.action(label). Can be taken by the page (Google Ads has its own window.JZ) → fallback: nativedocument.querySelector('[data-jz-action-id="..."]').
→ window.JZ + window.JUSTZIX: programmatic API + logger
Snap connections — arrange into a dashboard
Six element types (4 pane types + action bar + floating button) live in a shared ID space. Drag one within ≤20px of another → they snap into a group. Drag the group → everything moves together. Anchor positioning (TL/TR/BL/BR) keeps the layout stable across window resize. That turns "a few separate tools" into "a configurable per-domain dashboard".
→ Snap connections: pane groups — a mini-dashboard inside the tab
How to put it together — 3 practical setups
Setup A: "Personal QA toolbar"
Top-right, anchor TR:
- Action bar: 3-4 BUTTONs for the most common flows ("Login as test user", "Fill demo data", "Reset cart")
- JS pane below the bar: destructive scripts / bulk operations (Run-on-demand, ▶)
- Output Console below the JS pane: monitor JUSTZIX.log + page console
- Everything snapped vertically. F5 → returns to the same places.
Setup B: "Live CSS editor"
Left side, anchor TL:
- CSS pane (narrow, tall): live editing
- Action bar with a "Brightness" SLIDER + "Theme" TOGGLE3
- Snap edge-to-edge — slider + CSS editor in one stream
Setup C: "Debug overlay"
Bottom bar, anchor BL:
- Action bar with BUTTON "Capture state" + TOGGLE3 "Env DEV/STG/PROD"
- Output Console narrow above the bar (height ~200px): non-stop streaming logs
- Looks like a browser DevTools panel, but it's part of the tab (doesn't vanish when you minimise F12)
The first minute — what to do right after install
- Install JustZix (Download here). Click the icon in the toolbar after install.
- Create your first rule in options (extensions → JustZix options). Pick "everywhere" as scope.
- In the CSS editor type:
body { background: lightyellow !important; }— save. Visit any site → background turns yellow. - Add a BUTTON action to this rule: label "🐛 Debug", code
JUSTZIX.log('debug'); - Add an Output Console in the "Windows" section → save. Go back to the page. Click "🐛 Debug" → a line in Output Console.
- Drag Output Console below the action bar, let it snap. You have your first mini-dashboard.
3 minutes from zero to a working setup. Everything persistent — F5 / new tab / browser restart: the setup comes back.
Full post list per component
If you want deeper knowledge about individual components:
- Windows on the frontend: CSS pane · JS Console · JS pane · Output Console · Snap connections
- Action types: TOGGLE3 · SLIDER
- API & helpers: window.JZ + JUSTZIX helpers
- Practical tutorials: Hide cookie banners · Dark mode for any website · Debug GTM without devs · Custom keyboard shortcuts · QA toolbar from scratch · Environment markers
JustZix is an open-source extension, completely free, no account, no server. Everything runs locally in your browser. Install it and build your first mini-IDE in 3 minutes.
Rate this post
No ratings yet — be the first.