← Wszystkie wpisy

Okna na froncie

TEMP panes — tymczasowe okna deweloperskie pod skrótem Ctrl+Alt

Nie każda zmiana zasługuje na trwałą regułę. Wchodzisz na cudzą stronę, masz jedno pytanie do DOM-u albo chcesz na chwilę dorzucić kawałek CSS — i tyle. Do tego są TEMP panes: okna wywoływane skrótem na dowolnej stronie, których używasz przez moment i które znikają po przeładowaniu. Zero konfiguracji, zero śladu w Twoich regułach.

Czym TEMP różni się od zwykłego okna

JustZix ma cztery typy okien na froncie strony — CSS pane, JS pane, JS Console i Output Console. Normalnie tworzysz je w panelu wtyczki i są przypisane do reguły: zapisują się, wracają po reloadzie, synchronizują między urządzeniami. To dobre dla rzeczy, których używasz codziennie.

TEMP pane to ten sam typ okna, ale ulotny. Nie powstaje z reguły — powstaje ze skrótu klawiszowego. Żyje w sessionStorage karty, więc:

Cztery skróty

SkrótOkno TEMPDo czego
Ctrl+Alt+GCSS panelive edycja CSS strony
Ctrl+Alt+HJS panekod JS uruchamiany na żądanie
Ctrl+Alt+JJS ConsoleREPL — wpisz, Enter, wynik
Ctrl+Alt+KOutput Consolepodgląd console.log strony

Skróty działają globalnie — nie musisz najpierw klikać w okno wtyczki. Naciskasz na stronie i okno jest.

Drugi raz zamyka — toggle

Skrót jest przełącznikiem. Pierwsze naciśnięcie tworzy okno, drugie je zamyka. Nie ma ryzyka, że przez przypadek nahandlujesz pięć okien TEMP CSS jeden na drugim — na każdy typ przypada maksymalnie jedno okno TEMP naraz.

Zamknąć możesz też krzyżykiem × w nagłówku okna albo prawym klikiem na pasek i wybierając „Zamknij". Od v3.2.2 okno jest w obu wypadkach jedynie ukrywane — zawartość, log i geometria czekają w sessionStorage aż do ponownego otwarcia tego samego typu okna lub do zamknięcia karty. To naprawia wcześniejszy problem utraty danych przy przypadkowym kliknięciu w ×.

Przycisk „wyczyść" w nagłówku — czyszczenie kontrolowane (v3.2.3)

Gdy faktycznie chcesz opróżnić okno TEMP CSS lub TEMP JS, w nagłówku obok krzyżyka jest przycisk z ikoną kosza — „wyczyść". Czyszczenie trafia do historii undo (Ctrl+Z cofa) i dla TEMP CSS od razu aktualizuje żywy <style> na stronie. To rozdziela dwie intencje: schowanie okna (×) od czyszczenia jego treści (kosz).

Znika po reloadzie — i o to chodzi

To nie jest ograniczenie, to cała idea. TEMP pane jest po to, żeby coś szybko sprawdzić i nie zostawić bałaganu. Wszedłeś na stronę klienta, otworzyłeś Ctrl+Alt+J, sprawdziłeś document.querySelectorAll('.price').length, naciskasz F5 — i strona jest znów czysta, jakby Cię tam nie było.

Jeśli złapiesz się na tym, że ten sam kod TEMP wpisujesz trzeci raz — to sygnał, że pora zrobić z niego trwałą regułę.

Inny kolor — nie pomylisz z trwałym oknem

Trwałe okna mają kolory zależne od typu (zielony, bursztynowy, fioletowy, szmaragdowy). Okna TEMP dostają osobną paletę — pomarańczowy, czerwony, różowy, cyjan — na ramce całego okna, akcencie nagłówka i kropce statusu. Jeden rzut oka i wiesz, że to okno ulotne, a nie Twoja zapisana konfiguracja.

Use case 1 — debug cudzej strony bez śladu

Klasyk. Trafiasz na stronę, która dziwnie się zachowuje. Ctrl+Alt+K otwiera Output Console — widzisz, co strona loguje i jakie rzuca błędy. Ctrl+Alt+J otwiera JS Console, w której odpytasz DOM. Skończyłeś — przeładuj, znika.

Use case 2 — jednorazowy CSS bez zaśmiecania reguł

Chcesz na pięć minut wyłączyć sticky header, bo zasłania to, co czytasz. Ctrl+Alt+G, wpisujesz header{position:static!important}, czytasz w spokoju, zamykasz. Nie powstała żadna reguła, którą trzeba by potem sprzątać.

Use case 3 — REPL na produkcji

Chcesz sprawdzić zachowanie API na żywej stronie. Ctrl+Alt+H otwiera TEMP JS pane — wklejasz fetch('/api/...').then(r=>r.json()).then(console.log), uruchamiasz przyciskiem Run, wynik ląduje w konsoli. Po reloadzie kod znika — nie zostaje w żadnej regule, którą ktoś mógłby później przez przypadek odpalić.

Dlaczego akurat G/H/J/K

To sąsiadujące klawisze prawej ręki w stylu klastra Vima — wygodne pod palcami. Naturalniejszy byłby Ctrl+Alt+H/J/K/L, ale Ctrl+Alt+L na Linuksie (GNOME) blokuje ekran — system przejmuje skrót, zanim wtyczka go zobaczy. Cały klaster przesunęliśmy więc o jeden klawisz w lewo. G/H/J/K są wolne we wszystkich popularnych przeglądarkach i systemach.

Pułapki

Zobacz też

Zainstaluj JustZix — i miej cztery okna deweloperskie pod skrótem na każdej stronie.

Oceń ten wpis

Brak ocen — oceń jako pierwszy.

Wypróbuj samodzielnie

Zainstaluj JustZix i wklej dowolny snippet z tego artykułu. Dwie minuty od zera do działającej reguły na wszystkich Twoich urządzeniach.

Pobierz JustZix

Funkcje · Jak to działa · Przykłady · Zastosowania