On-page windows — CSS, JS and consoles

Developer tools right on the page

JustZix renders its developer windows directly inside the page you are visiting — not in a DevTools panel, not in a separate tab. You can drag each window anywhere, snap its edge to another, and join several into one mini-dashboard sitting next to the real content.

Every window comes in two variants: persistent — tied to a specific rule and loaded together with it — and temporary (TEMP), summoned by a shortcut for a quick test. You decide whether a window stays or disappears on reload.

The CSS pane and the JS pane

The CSS pane is a live style editor: you type a rule and see the page change in the same instant — no save, no reload. Its content is kept separately per tab, so every page has its own scratchpad.

The JS pane is a JavaScript editor run on demand. The code does not start on its own — you execute it with the Run button or the Ctrl+Enter shortcut when it is ready. Above both editors a search bar works with a match counter, highlighting and Ctrl+Alt+←/→ jumps.

The JS Console and the Output Console

The JS Console is an on-page REPL: you type an expression, press Enter, get a result, and use the up and down arrows to recall earlier commands — just like a terminal.

The Output Console is a page-log viewer with six counted tabs: All, JZconsole, console.*, Network, errors and dataLayer pushes. The Network tab collects network requests and lets you filter them by domain, size and time.

The AI Helper

The AI Helper is a built-in AI assistant that connects to OpenAI, Anthropic or Gemini. It inspects the page structure, tests code on its own in TEMP windows and — only once you approve — turns the working solution into a ready CSS or JS rule.

TEMP panes

The TEMP versions are the same windows, but ephemeral. You summon them with shortcuts: Ctrl+Alt+G opens the TEMP CSS pane, Ctrl+Alt+H the TEMP JS pane, Ctrl+Alt+J the TEMP JS Console, and Ctrl+Alt+K the TEMP Output Console.

You can drag, snap and resize TEMP windows exactly like the persistent ones. Each window type remembers its last size separately (per device) — a double-click on the title bar toggles between that remembered size and the default 380×240. Color, font and size of each window are set from the right-click menu.

Closing with × no longer wipes the content — the window is only hidden, and its state (code, log, geometry) waits in the session until you reopen a window of the same type. When you really do want to start over, the TEMP CSS and TEMP JS headers carry a "clear" button (trash icon, the clear goes into undo history). TEMP window data disappears only when the tab closes — that is the natural session scope.

Edit panel in a separate window

Sometimes it is more comfortable to have the edit panel next to the page instead of replacing it. The Ctrl+Alt+I shortcut opens the panel in a separate browser window, automatically selects the first active rule that matches the current page and lands on the CSS tab. Ctrl+Alt+O does the same on the JS tab, and Ctrl+Alt+P on the Actions tab. If no rule on the page matches, the panel opens clean, ready for you to create a new one.

Used inside an already open panel, the same shortcuts do not create a second window — they switch the active rule's tab. Matching is keyed on the physical key, so the shortcuts work on every keyboard layout, including the Polish Programmers layout (AltGr no longer breaks Ctrl+Alt+O).