← Alle Beiträge

Fenster im Frontend

TEMP-Panes — Wegwerf-Entwicklerfenster unter einem Ctrl+Alt-Shortcut

Nicht jede Änderung verdient eine dauerhafte Regel. Du landest auf fremder Seite, hast eine Frage ans DOM oder willst kurz ein bisschen CSS einwerfen — das war's. Dafür gibt es TEMP-Panes: Fenster, die per Shortcut auf jeder Seite aufgerufen werden, kurz genutzt und beim Neuladen weg sind. Keine Konfiguration, keine Spur in deinen Regeln.

Wie sich TEMP von einem normalen Fenster unterscheidet

JustZix hat vier Arten von On-Page-Fenstern — CSS pane, JS pane, JS Console und Output Console. Normalerweise erstellst du sie im Erweiterungspanel und sie gehören zu einer Regel: Sie speichern sich, kehren nach dem Neuladen zurück, synchronisieren über Geräte hinweg. Gut für Dinge, die du täglich nutzt.

Ein TEMP-Pane ist derselbe Fenstertyp, aber flüchtig. Es entsteht nicht aus einer Regel — es entsteht aus einem Tastatur-Shortcut. Es lebt im sessionStorage des Tabs, also:

Vier Shortcuts

ShortcutTEMP-FensterWofür
Ctrl+Alt+GCSS paneLive-Bearbeiten des Seiten-CSS
Ctrl+Alt+HJS paneJS-Code auf Abruf ausführen
Ctrl+Alt+JJS ConsoleREPL — tippen, Enter, Ergebnis
Ctrl+Alt+KOutput Consoledas console.log der Seite beobachten

Die Shortcuts funktionieren global — du musst nicht erst in die Erweiterung klicken. Du drückst sie auf der Seite und das Fenster ist da.

Nochmal drücken zum Schließen — Toggle

Der Shortcut ist ein Umschalter. Der erste Druck erstellt das Fenster, der zweite schließt es. Kein Risiko, versehentlich fünf TEMP-CSS-Fenster übereinanderzustapeln — es gibt höchstens ein TEMP-Fenster pro Typ gleichzeitig.

Du kannst es auch mit dem × im Fensterkopf schließen oder per Rechtsklick auf die Leiste und „Schließen". Seit v3.2.2 verbergen beide Wege das Fenster nur — der Inhalt, das Log und die Geometrie warten im sessionStorage, bis du ein Fenster desselben Typs wieder öffnest oder den Tab schließt. Das behebt ein früheres Datenverlust-Problem bei einem versehentlichen ×-Klick.

Der „Clear"-Knopf im Header — kontrolliertes Leeren (v3.2.3)

Wenn du ein TEMP-CSS- oder TEMP-JS-Fenster wirklich leeren möchtest, trägt der Header direkt neben dem ×-Knopf einen Knopf mit Mülleimer-Symbol — „clear". Das Leeren wandert in den Undo-Verlauf (Ctrl+Z holt es zurück), und bei TEMP-CSS aktualisiert es das aktive <style> auf der Seite sofort. So werden zwei Absichten getrennt: das Fenster verbergen (×) und seinen Inhalt leeren (Mülleimer).

Weg beim Neuladen — und genau das ist der Punkt

Das ist keine Einschränkung, das ist die ganze Idee. Ein TEMP-Pane existiert, damit du etwas schnell prüfen und kein Chaos hinterlassen kannst. Du hast die Seite eines Kunden geöffnet, Ctrl+Alt+J gedrückt, document.querySelectorAll('.price').length geprüft, F5 gedrückt — und die Seite ist wieder sauber, als wärst du nie da gewesen.

Wenn du dich dabei ertappst, denselben TEMP-Code zum dritten Mal zu tippen — das ist das Signal, daraus eine dauerhafte Regel zu machen.

Eine andere Farbe — du verwechselst es nicht mit einem gespeicherten Fenster

Dauerhafte Fenster sind nach Typ eingefärbt (grün, bernstein, lila, smaragd). TEMP-Fenster bekommen eine eigene Palette — orange, rot, pink, cyan — am gesamten Fensterrahmen, am Header-Akzent und am Statuspunkt. Ein Blick und du weißt, dass es ein flüchtiges Fenster ist, nicht deine gespeicherte Konfiguration.

Anwendungsfall 1 — fremde Seite spurlos debuggen

Ein Klassiker. Du triffst auf eine Seite, die sich seltsam verhält. Ctrl+Alt+K öffnet die Output Console — du siehst, was die Seite loggt und welche Fehler sie wirft. Ctrl+Alt+J öffnet eine JS Console, um das DOM abzufragen. Fertig — neu laden, weg.

Anwendungsfall 2 — ein einmaliges CSS ohne die Regeln zu überfrachten

Du willst einen Sticky-Header für fünf Minuten abschalten, weil er verdeckt, was du liest. Ctrl+Alt+G, header{position:static!important} tippen, in Ruhe lesen, schließen. Es wurde keine Regel erstellt, die du später aufräumen müsstest.

Anwendungsfall 3 — ein REPL auf Produktion

Du willst das API-Verhalten auf einer Live-Seite prüfen. Ctrl+Alt+H öffnet ein TEMP-JS-Pane — füge fetch('/api/...').then(r=>r.json()).then(console.log) ein, führe es mit dem Run-Button aus, das Ergebnis landet in der Konsole. Nach dem Neuladen ist der Code weg — er bleibt in keiner Regel, die jemand später versehentlich auslösen könnte.

Warum gerade G/H/J/K

Es sind benachbarte Tasten der rechten Hand, im Vim-Cluster-Stil — bequem unter den Fingern. Ctrl+Alt+H/J/K/L wäre natürlicher, aber Ctrl+Alt+L sperrt unter Linux (GNOME) den Bildschirm — das OS schnappt sich den Shortcut, bevor die Erweiterung ihn je sieht. Also haben wir das ganze Cluster eine Taste nach links verschoben. G/H/J/K sind in allen gängigen Browsern und Betriebssystemen frei.

Fallstricke

Siehe auch

Installiere JustZix — und halte vier Entwicklerfenster auf jeder Seite einen Shortcut entfernt.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle