Fenster auf der Seite — CSS, JS und Konsolen

Entwicklerwerkzeuge direkt auf der Seite

JustZix rendert seine Entwicklerfenster direkt in der besuchten Seite — nicht in einem DevTools-Panel, nicht in einem separaten Tab. Du kannst jedes Fenster überallhin ziehen, seine Kante an ein anderes einrasten und mehrere zu einem Mini-Dashboard neben dem echten Inhalt verbinden.

Jedes Fenster gibt es in zwei Varianten: dauerhaft — an eine bestimmte Regel gebunden und mit ihr geladen — und temporär (TEMP), per Tastenkürzel für einen schnellen Test aufgerufen. Du entscheidest, ob ein Fenster bleibt oder beim Neuladen verschwindet.

Das CSS pane und das JS pane

Das CSS pane ist ein Live-Stil-Editor: Du tippst eine Regel und siehst die Seite im selben Moment verändert — ohne Speichern, ohne Neuladen. Sein Inhalt wird pro Tab getrennt gehalten, sodass jede Seite ihren eigenen Notizblock hat.

Das JS pane ist ein JavaScript-Editor, der bei Bedarf läuft. Der Code startet nicht von selbst — du führst ihn mit der Run-Schaltfläche oder dem Kürzel Ctrl+Enter aus, wenn er fertig ist. Über beiden Editoren arbeitet eine Suchleiste mit Trefferzähler, Hervorhebung und Ctrl+Alt+←/→-Sprüngen.

Die JS Console und die Output Console

Die JS Console ist eine REPL auf der Seite: Du tippst einen Ausdruck, drückst Enter, erhältst ein Ergebnis und holst mit den Pfeiltasten nach oben und unten frühere Befehle zurück — wie in einem Terminal.

Die Output Console ist ein Seitenlog-Viewer mit sechs gezählten Tabs: All, JZconsole, console.*, Network, Fehler und dataLayer-Pushes. Der Network-Tab sammelt Netzwerkanfragen und lässt dich nach Domain, Größe und Zeit filtern.

Der AI Helper

Der AI Helper ist ein integrierter KI-Assistent, der sich mit OpenAI, Anthropic oder Gemini verbindet. Er untersucht die Seitenstruktur, testet Code selbst in TEMP-Fenstern und verwandelt — erst nach deiner Freigabe — die funktionierende Lösung in eine fertige CSS- oder JS-Regel.

TEMP panes

Die TEMP-Versionen sind dieselben Fenster, nur flüchtig. Du rufst sie mit Kürzeln auf: Ctrl+Alt+G öffnet das TEMP CSS pane, Ctrl+Alt+H das TEMP JS pane, Ctrl+Alt+J die TEMP JS Console und Ctrl+Alt+K die TEMP Output Console.

TEMP-Fenster kannst du genau wie die dauerhaften ziehen, einrasten und in der Größe ändern. Jeder Fenstertyp merkt sich seine zuletzt verwendete Größe getrennt (pro Gerät) — ein Doppelklick auf die Titelleiste schaltet zwischen dieser gemerkten Größe und der Standardgröße 380×240 um. Farbe, Schrift und Größe jedes Fensters stellst du aus dem Rechtsklick-Menü ein.

Das Schließen mit × löscht den Inhalt nicht mehr — das Fenster wird nur ausgeblendet, und sein Zustand (Code, Log, Geometrie) wartet in der Sitzung, bis du ein Fenster desselben Typs wieder öffnest. Wenn du wirklich von vorn anfangen willst, tragen die Kopfzeilen von TEMP CSS und TEMP JS eine „Leeren"-Schaltfläche (Papierkorbsymbol, das Leeren geht in den Undo-Verlauf). Daten der TEMP-Fenster verschwinden erst beim Schließen des Tabs — das ist der natürliche Sitzungsumfang.

Bearbeitungspanel in einem separaten Fenster

Manchmal ist es bequemer, das Bearbeitungspanel neben der Seite zu haben statt anstelle ihrer. Das Kürzel Ctrl+Alt+I öffnet das Panel in einem separaten Browserfenster, wählt automatisch die erste aktive Regel aus, die zur aktuellen Seite passt, und landet auf dem CSS-Tab. Ctrl+Alt+O macht dasselbe für den JS-Tab und Ctrl+Alt+P für den Aktionen-Tab. Passt keine Regel der Seite, öffnet das Panel leer, bereit für eine neue.

In einem bereits geöffneten Panel erzeugen dieselben Kürzel kein zweites Fenster — sie wechseln den Tab der aktiven Regel. Die Erkennung läuft über die physische Taste, daher funktionieren die Kürzel auf jedem Tastaturlayout, einschließlich des polnischen Programmers-Layouts (AltGr bricht Ctrl+Alt+O nicht mehr).