← Wszystkie wpisy

Okna na froncie

JS Console na każdej stronie — REPL z historią ↑↓, bez DevTools

15 maja 2026 · autor JustZix Team

F12 → Console → wpisujesz coś → klik gdzie indziej → ekran rozjeżdża się, devtools znika. Albo cześciej: nie chcesz otwierać devtools w obecności klienta. JustZix od v2.13.66 ma JS Console — pływającą terminalo-podobną konsolę na stronie. Ctrl+Enter, ↑/↓ history, Ctrl+L = clear, przechwytuje cały console.log z page-context.

Czym różni się od DevTools Console

Pozornie tym samym. Funkcjonalnie:

• JS Console żyje na stronie — pływające okno z headerem i dwoma sekcjami (output log + input textarea). Nie odpada przy zmianie focusu, nie zamyka się przy reload.
• Per-tab persystencja — input draft, output log (do 200 linii), historia komend (do 100) — wszystko w sessionStorage. Reload kart → masz to samo. DevTools Console — po reloadzie cały output wyczyszczony.
• Hierarchia scope — Console pojawia się tylko na stronach matchujących wzorzec URL folderu/grupy/reguły. Możesz mieć inną konfigurację dla różnych projektów.
• Sync między urządzeniami — masz Console „Stripe debugging" na laptopie i komputerze służbowym. Twoja historia komend NIE synchronizuje się (sessionStorage per tab), ale samo okno tak.

Co jest tak samo: page context. Twój kod ma dostęp do window, document, globali strony (np. app.store w React'cie z Redux). Ten sam evaluation engine, ten sam scope.

Pierwsze użycie w 60 sekund

1. W options JustZix wybierz folder/grupę/regułę z odpowiednim URL pattern.
2. Klik „Okna" → modal listujący CSS panes + JS panes + JS Consoles. Wybierz „+ Console".
3. Wpisz nazwę („Stripe REPL"), kolor (domyślnie purple #7C3AED).
4. Wejdź na pasujący URL — Console pojawia się jako pływające okno (anchor top-right).
5. Wpisz w input document.title, naciśnij Ctrl+Enter. W output pojawi się > document.title (echo komendy) + "Real page title" (wynik).

Skróty klawiszowe

Historia: max 100 wpisów, dedup ostatniej komendy (nie powtarza), persystencja w sessionStorage per tab. ↑/↓ działa tylko gdy jesteś na krańcu textarea — pozwala normalnie nawigować wewnątrz multi-line kodu.

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

Twój eval może wywołać console.log('x') — pojawi się w output Console pod komendą:

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

Najpierw zalogowane, potem zwrotka. Działa też dla console.warn, console.error, console.info — każdy z innym prefixem ([warn], [err], [info]) i kolorem.

Bonus: jeśli strona sama loguje coś z page-context podczas Twojego eval (np. fetch w środku Twojego kodu loguje XHR error), też zobaczysz to w Console. To debugging gold — analityk widzi exactly co się dzieje pod spodem strony.

Co realnie sprawdzasz

1. Quick fetch test przed wklejeniem do reguły

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

Sprawdzasz, czy endpoint zwraca to, czego się spodziewasz. Bez otwierania Network panel w DevTools.

2. „Co jest w Reduxie"

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

Jednoklikowy dump aktualnego state, bez instalowania Redux DevTools.

3. „Ile

na stronie"

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

Sprawdzanie struktury strony, pre-validacja CSS selektorów.

4. Tymczasowy override

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

Czysto destrukcyjne, jednorazowe. Nie chcesz na to reguły CSS/JS — chcesz akcji raz. Console daje ci 0-koszt JS.

5. Educational

Uczysz młodszego dewelopera lub kogoś bez devtools background. Pokazujesz typeof null, [].map(x => x + 1), Array.from('hello'). Console na stronie jest mniej intymidująca niż DevTools.

Hierarchia scope — Console „GA debug" tylko na *shop*

JS Console przypięty do folderu „E-commerce" pojawia się na każdej stronie pasującej do shop.com/*. Nie na YouTube. Nie na Gmail. Console „Stripe Dashboard" na dashboard.stripe.com/* — bezużyteczne wszędzie indziej, więc się nie pokazuje. Każdy projekt ma swój REPL.

Plus: hide for page (klik ✕ na headerze pane'a, lub right-click → ukryj) — Console znika dla bieżącej karty. Reload karty = przywraca (sessionStorage flag reset).

Pułapki

• Async eval — await fetch(...) bez wrappera nie zadziała (top-level await). Zawiń w IIFE: (async () => { const r = await fetch(...); console.log(await r.json()); })(). Lub używaj .then(...).
• sessionStorage limit — 200 ostatnich linii output zachowane, starsze trimowane (żeby storage nie urósł). Komendy w historii do 100.
• Reload tab = nie traci output. Zamknięcie tab = traci. Jak chcesz coś trzymać — kopiuj do pliku zewnętrznego albo do persistent JS rule.
• Sandbox iframe — Console nie renderuje się wewnątrz iframe-content (chyba że iframe URL pasuje do wzorca scope-a osobno). Cross-origin iframe = inny scope.

Co dalej

JS Console to 3. typ „okna na froncie" w JustZix. Pierwsze (CSS pane) — live edytor CSS. Drugie (JS pane) — persistent JS code z Run-on-demand. Trzecie (Console) — REPL. Czwarte (Output Console) — custom logger dla user-JS, planowane.

Zainstaluj JustZix i miej REPL w każdej karcie, bez F12.