← Alle Beiträge

Leitfäden

Ein Mini-IDE im Browser-Tab: 8 JustZix-Werkzeuge, die DevTools ersetzen

15 Mai 2026 · von JustZix Team

JustZix begann als CSS-Injektions-Erweiterung — aber im letzten Jahr wuchs es zu etwas viel Größerem. Heute ist es ein Mini-IDE in jedem Browser-Tab — 4 Fenstertypen (Panes), 6 Aktionstypen, 2 JS-API-Namespaces und ein Snap-connections-System, um sie alle zu einem kohärenten Dashboard pro Domain anzuordnen. Kein F12. Keine DevTools. Alles im Tab selbst. Dieser Beitrag kartiert das Ganze — was wann nutzen, wie es zusammenpasst, wo anfangen.

Die Karte: 4 + 6 + 2 + 1

JustZix gliedert sich in vier Hauptkomponenten, die du zusammen oder einzeln nutzen kannst:

Dazu Snap connections als „Klebstoff" — erlaubt es, Panels und die Aktionsleiste in Gruppen anzuordnen, die sich zusammen bewegen.

Fenster im Frontend — 4 Typen

1. CSS pane — Live-CSS-Editor im Tab

Du öffnest ein Panel neben der Seite, schreibst CSS, siehst Änderungen live. Auto-Save im Tab. Persistent pro Tab über sessionStorage. Kein Commit irgendwohin, stirbt mit dem Tab. Perfekt für „Ich muss sehen, wie Buttons in einer anderen Farbe aussähen, aber ich deploye es noch nicht".

→ CSS pane: ein Live-CSS-Editor auf jeder Seite, ohne DevTools

2. JS Console — REPL mit ↑↓-Verlauf

Die DevTools-REPL-Alternative. Ctrl+Enter-Eval. Pfeile hoch/runter scrollen den Verlauf (sessionStorage pro Tab). Output erfasst nur synchron — asynchrone Tasks landen direkt in den DevTools. Perfekt für Ad-hoc-Checks („wie viele Elemente haben Klasse X?", „was gibt diese API zurück?").

→ JS Console: REPL auf jeder Seite, keine DevTools

3. JS pane — Run-on-demand-Skripte

Persistenter JS-Code mit einem ▶-Button. Ctrl+Enter führt aus. Dirty-State (visueller Hinweis, dass du nicht ausgeführte Änderungen hast). Fehler-Overlay (rote Leiste im Pane ohne F12). Perfekt für destruktive Skripte („Warenkorb leeren", „Entwurf löschen", „Formular zurücksetzen") — du willst sie nicht auto-laufen lassen, du willst bei Bedarf ▶ klicken.

→ JS pane: Run-on-demand-Skripte, kein Auto-Run bei jedem Besuch

4. Output Console — schreibgeschützter Log-Viewer

Der 4. Fenstertyp — zuhören, nicht schreiben. Erfasst alle console.log/warn/error/info/debug der Seite (synchron + asynchron) plus den dedizierten window.JUSTZIX.log()-Kanal. viewMode [C/J/C+J] schaltet die Sichtbarkeit um. Filter pro Level, Suchfeld. 2000 Zeilen. CSP-immun (Extension-Privilegien).

→ Output Console: das console.log der Seite in einem Tab-Panel beobachten

Aktionstypen — 6 in der Aktionsleiste

Die Aktionsleiste ist eine schwebende Leiste mit Buttons, die du manuell aufrufst. Sechs Aktionstypen — alle in derselben Leiste, jeder mit eigener Semantik:

TOGGLE3 — 3-Zustands-Segmented-Control

Segmented Control mit genau 3 Zuständen. Jeder Zustand bekommt seine eigene Label, Value, Farbe und JS-Code. Bester Anwendungsfall: Dev/Staging/Prod-Umgebungsumschalter (jeder Zustand = andere Subdomain), Light/Dark/Auto-Theme-Override, Feature-Flag-Tri-State Off/Default/Force-on. 5 konfigurierbare Farben (bg/Text aktiv + bg/Hover/Text inaktiv).

→ TOGGLE3: 3-Zustands-Segmented-Control in der Aktionsleiste

SLIDER — ein CSS-Variablen-Controller in Reichweite

Nativer <input type="range"> in der Leiste. Live-Drag = Memory speichern (ohne Code auszuführen), Loslassen = Code mit value als Number ausführen. 4 separate Farben (bg, Fill, Label-Text, Value-Text). Anwendungsfall: Helligkeits-Controller (filter:brightness 50-150%), Schriftgröße für Barrierefreiheit, Animationsgeschwindigkeits-Drossel zum Debuggen, jede CSS-Variable, die du wie einen physischen Fader drehen willst.

→ SLIDER: ein CSS-Variablen-Controller im Tab

API — zwei Namespaces, zwei Rollen

JustZix installiert zwei separate Namespaces im MAIN world. Jeder hat seinen eigenen Zweck und Lebenszyklus — sie mischen sich bewusst nicht:

• window.JUSTZIX (Logger) — primärer Alias seit v2.13.76. Markenname = verschwindend geringes Kollisionsrisiko mit Seitenskripten. JUSTZIX.log/.warn/.error/.info/.debug dispatcht an die Output Console (kind='jz'); leitet NICHT an die native Konsole weiter. Aliasse: window.__JUSTZIX__ (immer), window.JZ (nur wenn frei).
• window.JZ (Action-Helper) — operiert auf data-jz-action-id-Elementen im DOM. JZ.click(label) / JZ.value(label) / JZ.setValue(label, v) / JZ.action(label). Kann von der Seite belegt sein (Google Ads hat ein eigenes window.JZ) → Fallback: natives document.querySelector('[data-jz-action-id="..."]').

→ window.JZ + window.JUSTZIX: programmatische API + Logger

Snap connections — zu einem Dashboard anordnen

Sechs Elementtypen (4 Pane-Typen + Aktionsleiste + Floating-Button) leben in einem gemeinsamen ID-Raum. Ziehe eines auf ≤20px an ein anderes → sie rasten zu einer Gruppe ein. Ziehe die Gruppe → alles bewegt sich zusammen. Anchor-Positionierung (TL/TR/BL/BR) hält das Layout über Fenstergrößenänderungen hinweg stabil. Das verwandelt „ein paar separate Werkzeuge" in „ein konfigurierbares Dashboard pro Domain".

→ Snap connections: Panel-Gruppen — ein Mini-Dashboard im Tab

Wie man es zusammensetzt — 3 praktische Setups

Setup A: „Persönliche QA-Toolbar"

Oben rechts, Anchor TR:

• Aktionsleiste: 3-4 BUTTONs für die häufigsten Flows („Login as test user", „Fill demo data", „Reset cart")
• JS pane unter der Leiste: destruktive Skripte / Massenoperationen (Run-on-demand, ▶)
• Output Console unter dem JS pane: JUSTZIX.log + Page-Konsole überwachen
• Alles vertikal eingerastet. F5 → kehrt an dieselben Stellen zurück.

Setup B: „Live-CSS-Editor"

Linke Seite, Anchor TL:

• CSS pane (schmal, hoch): Live-Editing
• Aktionsleiste mit einem „Brightness"-SLIDER + „Theme"-TOGGLE3
• Snap Kante an Kante — Slider + CSS-Editor in einem Stream

Setup C: „Debug-Overlay"

Untere Leiste, Anchor BL:

• Aktionsleiste mit BUTTON „Capture state" + TOGGLE3 „Env DEV/STG/PROD"
• Output Console schmal über der Leiste (Höhe ~200px): Logs im Dauerstrom
• Sieht aus wie ein Browser-DevTools-Panel, ist aber Teil des Tabs (verschwindet nicht, wenn du F12 minimierst)

Die erste Minute — was direkt nach der Installation tun

1. JustZix installieren (Hier herunterladen). Klicke nach der Installation auf das Symbol in der Symbolleiste.
2. Erste Regel erstellen in den Optionen (Erweiterungen → JustZix-Optionen). Wähle „überall" als Scope.
3. Im CSS-Editor tippe: body { background: lightyellow !important; } — speichern. Besuche eine beliebige Seite → der Hintergrund wird gelb.
4. Eine BUTTON-Aktion hinzufügen zu dieser Regel: Label „🐛 Debug", Code JUSTZIX.log('debug');
5. Eine Output Console hinzufügen im Abschnitt „Fenster" → speichern. Zurück zur Seite. Klick „🐛 Debug" → eine Zeile in der Output Console.
6. Ziehe die Output Console unter die Aktionsleiste, lass sie einrasten. Du hast dein erstes Mini-Dashboard.

3 Minuten von null bis zu einem funktionierenden Setup. Alles persistent — F5 / neuer Tab / Browser-Neustart: das Setup kehrt zurück.

Vollständige Beitragsliste pro Komponente

Wenn du tieferes Wissen über einzelne Komponenten willst:

• Fenster im Frontend: CSS pane · JS Console · JS pane · Output Console · Snap connections
• Aktionstypen: TOGGLE3 · SLIDER
• API & Helper: window.JZ + JUSTZIX helpers
• Praktische Tutorials: Cookie-Banner ausblenden · Dark Mode für jede Website · GTM ohne Devs debuggen · Eigene Tastaturkürzel · QA-Toolbar von Grund auf · Umgebungs-Marker

JustZix ist eine Open-Source-Erweiterung, komplett kostenlos, kein Konto, kein Server. Alles läuft lokal im Browser. Installiere es und baue dein erstes Mini-IDE in 3 Minuten.