← Alle Beiträge

Fenster im Frontend

JS Console auf jeder Seite — REPL mit ↑↓-Verlauf, ohne DevTools

15 Mai 2026 · von JustZix Team

F12 → Console → etwas tippen → woanders klicken → der Bildschirm fließt um, DevTools ist weg. Oder häufiger: du willst die DevTools nicht offen haben, während ein Kunde im Raum ist. JustZix v2.13.66+ hat JS Console — ein schwebendes, terminalartiges REPL auf der Seite. Ctrl+Enter, ↑/↓-Verlauf, Ctrl+L = leeren, erfasst jedes console.log aus dem Seitenkontext.

Wie es sich von der DevTools-Console unterscheidet

Funktional:

• Die JS Console lebt auf der Seite — ein schwebendes Fenster mit einem Header und zwei Bereichen (Ausgabe-Log + Eingabe-Textarea). Verschwindet nicht bei Fokuswechsel, schließt nicht beim Neuladen.
• Persistenz pro Tab — Eingabe-Entwurf, Ausgabe-Log (bis zu 200 Zeilen), Befehlsverlauf (bis zu 100) — alles im sessionStorage. Tab neu laden → alles noch da. DevTools-Console — Ausgabe beim Neuladen gelöscht.
• Scope-Hierarchie — die Console erscheint nur auf Seiten, die dem URL-Muster ihres Ordners/ihrer Gruppe/Regel entsprechen. Andere Konfiguration pro Projekt.
• Geräteübergreifende Synchronisierung — du hast eine „Stripe-Debugging"-Console auf deinem Laptop und Arbeitsrechner. Der Befehlsverlauf synchronisiert NICHT (sessionStorage pro Tab), aber das Fenster selbst schon.

Was gleich ist: der Seitenkontext. Dein Code hat Zugriff auf window, document, Seiten-Globals (z. B. app.store in einer React+Redux-App). Dieselbe Evaluierungs-Engine, derselbe Scope.

Erste Nutzung in 60 Sekunden

1. Wähle in den JustZix-Optionen einen Ordner/eine Gruppe/Regel mit einem relevanten URL-Muster.
2. Klicke „Fenster" → Modal mit CSS panes + JS panes + JS Consoles. Wähle „+ Console".
3. Gib einen Namen ein („Stripe REPL"), Farbe (Standard Violett #7C3AED).
4. Besuche eine passende URL — die Console erscheint als schwebendes Fenster (Anker oben rechts).
5. Tippe document.title in die Eingabe, drücke Ctrl+Enter. Die Ausgabe zeigt > document.title (Befehls-Echo) + "Echter Seitentitel" (Ergebnis).

Tastenkürzel

Verlauf: max. 100 Einträge, Dedup des letzten Befehls (keine Wiederholungen), im sessionStorage pro Tab persistiert. ↑/↓ funktioniert nur, wenn du am Rand der Textarea bist — so kannst du dich normal in mehrzeiligem Code bewegen.

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

Dein Eval kann console.log('x') aufrufen — es erscheint in der Console-Ausgabe unter dem Befehl:

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

Zuerst die geloggten Werte, dann der Rückgabewert. Funktioniert auch für console.warn, console.error, console.info — jedes mit eigenem Präfix ([warn], [err], [info]) und eigener Farbe.

Bonus: wenn die Seite selbst während deines Evals etwas aus dem Seitenkontext loggt (z. B. loggt ein fetch in deinem Code einen XHR-Fehler), siehst du es in der Console. Das ist Debugging-Gold — der Analyst sieht genau, was unter der Haube vor sich geht.

Was du tatsächlich prüfst

1. Schneller fetch-Test, bevor du ihn in eine Regel packst

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

Prüfe, ob der Endpunkt zurückgibt, was du erwartest. Ohne das Network-Panel der DevTools zu öffnen.

2. „Was ist in Redux"

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

Ein-Klick-Dump des aktuellen States, ohne Redux DevTools zu installieren.

3. „Wie viele h2 auf dieser Seite"

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

Prüfungen der Seitenstruktur, Vorab-Validierung von CSS-Selektoren.

4. Einmaliges Override

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

Rein destruktiv, einmalig. Du willst dafür keine CSS/JS-Regel — du willst die Aktion einmal. Die Console gibt dir JS zum Nulltarif.

5. Lehrzwecke

Du bringst einem Junior-Entwickler oder jemandem ohne DevTools-Hintergrund etwas bei. Du demonstrierst typeof null, [].map(x => x + 1), Array.from('hello'). Eine Console auf der Seite ist weniger einschüchternd als DevTools.

Scope-Hierarchie — „GA-Debug"-Console nur auf *shop*

Eine an den Ordner „E-Commerce" angehängte JS Console erscheint auf jeder Seite, die shop.com/* entspricht. Nicht auf YouTube. Nicht in Gmail. Eine „Stripe Dashboard"-Console auf dashboard.stripe.com/* — anderswo nutzlos, also erscheint sie dort nicht. Jedes Projekt bekommt sein eigenes REPL.

Plus: hide-for-page (klicke ✕ im Pane-Header oder Rechtsklick → ausblenden) — die Console verschwindet für den aktuellen Tab. Tab neu laden = stellt sie wieder her (sessionStorage-Flag zurückgesetzt).

Fallstricke

• Async-Eval — await fetch(...) ohne Wrapper funktioniert nicht (kein Top-Level-await). Wickle es in eine IIFE: (async () => { const r = await fetch(...); console.log(await r.json()); })(). Oder nutze .then(...).
• sessionStorage-Limit — die letzten 200 Ausgabezeilen bleiben, ältere werden gekürzt (damit der Storage nicht unbegrenzt wächst). Verlauf bis zu 100 Befehle.
• Tab neu laden = verliert die Ausgabe nicht. Tab schließen = verliert sie. Wenn du etwas behalten willst — kopiere es in eine externe Datei oder in eine dauerhafte JS-Regel.
• Sandboxed iframes — die Console rendert nicht innerhalb von iframe-Inhalt (außer die iframe-URL entspricht separat einem Scope-Muster). Cross-Origin-iframe = eigener Scope.

Was kommt als Nächstes

Die JS Console ist der 3. „Fenster auf der Seite"-Typ in JustZix. Der erste (CSS pane) — Live-CSS-Editor. Der zweite (JS pane) — persistenter JS-Code mit Run-on-demand. Der dritte (Console) — REPL. Der vierte (Output Console) — eigener Logger für Nutzer-JS, geplant.

Installiere JustZix und hab ein REPL in jedem Tab, kein F12.