Mini-IDE w karcie przeglądarki: 8 narzędzi JustZix, które zastępują DevTools
JustZix zaczynał jako extension do wstrzykiwania CSS — ale przez ostatni rok urosło w coś znacznie większego. Dziś to mini-IDE w każdej karcie przeglądarki — 4 typy okien (panele), 6 typów akcji, 2 namespace'y JS API i system snap connections do układania tego w spójny dashboard per domena. Bez F12. Bez DevTools. Wszystko w samej karcie. Ten post mapuje całość — co kiedy używać, co z czym pasuje, gdzie zacząć.
Mapa: 4 + 6 + 2 + 1
JustZix dzieli się na cztery główne komponenty, których możesz używać razem albo osobno:
| Komponent | Co robi | Liczba typów |
|---|---|---|
| Reguły CSS/JS | Wstrzykuje <style> / <script> przy URL match — auto-run | 2 (CSS, JS) |
| Akcje w pasku | Przyciski w pływającym pasku — manualne wywołanie | 6 (BUTTON, SELECT, INPUT, TEXTAREA, SLIDER, TOGGLE3) |
| Okna na froncie | Pływające panele z własną logiką per pane | 4 (CSS pane, JS pane, JS Console, Output Console) |
| Helpery JS | Programmatic access — namespace w MAIN world | 2 (window.JZ, window.JUSTZIX) |
Plus snap connections jako "klej" — pozwala układać panele i pasek akcji w grupy które poruszają się razem.
Okna na froncie — 4 typy
1. CSS pane — live edytor CSS w karcie
Otwierasz panel obok strony, piszesz CSS, widzisz zmiany live. Auto-save w karcie. Persistent per-tab dzięki sessionStorage. Nie wymaga commitowania nigdzie, ginie razem z kartą. Idealne dla "muszę zobaczyć jak będzie wyglądać przyciski w innym kolorze, ale jeszcze tego nie deployuję".
→ CSS pane: live edytor CSS w karcie, bez DevTools
2. JS Console — REPL z historią ↑↓
DevTools alternative dla REPL. Ctrl+Enter eval. Strzałki ↑↓ przewijają historię (per-tab sessionStorage). Output capturing tylko sync — async tasks lecą bezpośrednio do DevTools. Idealne dla ad-hoc checks ("ile elementów ma klasa X?", "co zwraca to API?").
→ JS Console: REPL na stronie bez DevTools
3. JS pane — Run-on-demand scripts
Persistent JS code z ▶ przyciskiem. Ctrl+Enter odpala. Dirty state (visual cue że masz unrun changes). Error overlay (red bar w pane bez F12). Idealne dla skryptów destruktywnych ("opróżnij koszyk", "skasuj draft", "zresetuj formularz") — nie chcesz ich auto-run, chcesz klikać ▶ na żądanie.
→ JS pane: skrypty Run-on-demand, bez auto-run
4. Output Console — read-only log viewer
Czwarty typ okna — listening, nie writing. Łapie wszystko z page console.log/warn/error/info/debug (sync + async) plus dedykowany kanał window.JUSTZIX.log(). viewMode [C/J/C+J] przełącza widoczność. Filtry per-level, search box. 2000 linii. CSP-immune (extension privileges).
→ Output Console: monitoruj console.log strony w karcie
Typy akcji — 6 w pasku akcji
Pasek akcji to floating bar z przyciskami które wywołujesz manualnie. Sześć typów akcji — wszystkie żyją w tym samym pasku, każdy ma własną semantykę:
| Typ | UX | Memory aktywnego stanu |
|---|---|---|
| BUTTON | Pojedynczy klik → run code | Brak — fire-and-forget |
| SELECT static | Dropdown 2-N opcji | Tak (dataset) |
| SELECT js | Dropdown z opcjami generowanymi przez JS | Tak (natywny <select>) |
| INPUT | Single-line text input + Enter→run | Tak (per-tab) |
| TEXTAREA | Multi-line text + blur→run | Tak (per-tab) |
| TOGGLE3 | 3-state segmented control | Tak (idx 0/1/2) |
| SLIDER | Range slider (input + change events) | Tak (Number) |
TOGGLE3 — 3-stanowe przełączniki
Segmented control z dokładnie 3 stanami. Każdy stan ma własny label, value, kolor i kod JS. Najmocniejszy use case: Dev/Staging/Prod environment switcher (każdy stan = inna subdomain), Light/Dark/Auto theme override, feature flag tri-state Off/Default/Force-on. 5 konfigurowalnych kolorów (active bg/text + inactive bg/hover/text).
→ TOGGLE3: 3-stanowe przełączniki w pasku akcji
SLIDER — kontroler CSS variables z palca
Natywny <input type="range"> w pasku. Live drag = save memory (bez odpalania kodu), release = odpal kod z value jako Number. 4 osobne kolory (bg, fill, label text, value text). Use case: brightness controller (filter:brightness 50-150%), font-size dla accessibility, animation speed throttle do debug, dowolny CSS variable który chcesz kręcić jak fizycznym suwakiem.
→ SLIDER: kontroler CSS variables w karcie
API — dwa namespace'y, dwie role
JustZix wstawia dwa osobne namespace'y w MAIN world. Każdy ma własny cel i lifecycle — celowo nie miesza się z drugim:
window.JUSTZIX(logger) — primary alias od v2.13.76. Brand name = znikoma szansa collision z page scripts.JUSTZIX.log/.warn/.error/.info/.debugdispatcjuje do Output Console (kind='jz'); NIE leci do natywnej console. Aliasy:window.__JUSTZIX__(zawsze),window.JZ(tylko gdy wolne).window.JZ(action helpers) — operuje na elementach zdata-jz-action-idw DOM.JZ.click(label)/JZ.value(label)/JZ.setValue(label, v)/JZ.action(label). Może być zajęte przez stronę (Google Ads ma własne window.JZ) → fallback: natywnydocument.querySelector('[data-jz-action-id="..."]').
→ window.JZ + window.JUSTZIX: programmatic API + logger
Snap connections — układanie w dashboard
Sześć typów elementów (4 typy paneli + pasek akcji + floating button) żyje we wspólnym ID space. Drag jednego blisko (≤20px) drugiego → snapują się w grupę. Drag grupy → wszystko porusza się razem. Anchor positioning (TL/TR/BL/BR) trzyma układ stabilny pod resize okna. To zamienia "kilka oddzielnych narzędzi" w "konfigurowalny dashboard per domena".
→ Snap connections: grupy paneli — mini-dashboard w karcie
Jak to złożyć — 3 praktyczne setupy
Setup A: "Personal QA toolbar"
Prawy górny róg, anchor TR:
- Pasek akcji: 3-4 BUTTONy do najczęstszych flow ("Login as test user", "Fill demo data", "Reset cart")
- JS pane pod paskiem: scriptu destrukcyjne / bulk operations (Run-on-demand, ▶)
- Output Console pod JS pane: monitor JUSTZIX.log + page console
- Wszystko snap'nięte pionowo. F5 → wraca w te same miejsca.
Setup B: "Live CSS editor"
Lewy bok, anchor TL:
- CSS pane (wąski, wysoki): live editing
- Pasek akcji z SLIDER'em "Brightness" + TOGGLE3 "Theme"
- Snap edge-to-edge — slider + CSS edytor w jednym streamie
Setup C: "Debug overlay"
Dolny pasek, anchor BL:
- Pasek akcji z BUTTON "Capture state" + TOGGLE3 "Env DEV/STG/PROD"
- Output Console wąsko nad paskiem (height ~200px): non-stop streaming logów
- Wygląda jak browser DevTools, ale jest częścią karty (nie znika gdy zminimalizujesz F12)
Pierwsza minuta — co zrobić zaraz po installu
- Zainstaluj JustZix (Pobierz tu). Po install klikniesz ikonę w pasku.
- Stwórz pierwszą regułę w options (rozszerzenia → opcje JustZix). Wybierz "wszędzie" jako scope.
- W edytorze CSS wpisz:
body { background: lightyellow !important; }— zapisz. Idź na dowolną stronę → tło żółte. - Dodaj akcję BUTTON w tej regule: label "🐛 Debug", kod
JUSTZIX.log('debug'); - Dodaj Output Console w sekcji "Okna" → zapisz. Wróć na stronę. Klik "🐛 Debug" → linia w Output Console.
- Przeciągnij Output Console pod pasek akcji, niech snap'ne. Masz pierwszy mini-dashboard.
3 minuty od zera do działającego setupu. Wszystko persistent — F5 / nowa karta / restart przeglądarki: setup wraca.
Pełna lista postów per komponent
Jeśli chcesz głębszej wiedzy o pojedynczych komponentach:
- Okna na froncie: CSS pane · JS Console · JS pane · Output Console · Snap connections
- Typy akcji: TOGGLE3 · SLIDER
- API i helpers: window.JZ + JUSTZIX helpers
- Praktyczne tutoriale: Ukryj cookie banery · Tryb ciemny dla każdej strony · Debug GTM bez devów · Skróty klawiszowe · Toolbar QA od zera · Markery środowisk
JustZix to open-source extension, kompletnie za darmo, bez konta, bez serwera. Wszystko działa lokalnie w przeglądarce. Zainstaluj i zbuduj swój pierwszy mini-IDE w 3 minuty.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.