Okna na froncie — CSS, JS i konsole
JustZix daje Ci pięć typów okien deweloperskich, które renderują się wprost na odwiedzanej stronie — bez otwierania DevTools. Przeciągasz je, przyklejasz krawędziami i składasz we własny mini-dashboard, a wersję ulotną wywołasz jednym skrótem.
Narzędzia deweloperskie wprost na stronie
JustZix renderuje swoje okna deweloperskie bezpośrednio w odwiedzanej stronie — nie w panelu DevTools, nie w osobnej karcie. Każde okno możesz przeciągnąć w dowolne miejsce, przykleić krawędzią do innego i połączyć kilka w jeden mini-dashboard, który widzisz obok prawdziwej treści.
Każde okno występuje w dwóch wariantach: trwałym — przypisanym do konkretnej reguły i wczytywanym razem z nią — oraz tymczasowym (TEMP), wywoływanym skrótem na chwilę testów. To Ty decydujesz, czy okno ma zostać, czy zniknąć po przeładowaniu.
CSS pane i JS pane
CSS pane to żywy edytor stylów: wpisujesz regułę, a stronę widzisz zmienioną w tej samej chwili — bez zapisu i bez przeładowania. Treść trzymana jest osobno per karta, więc każda strona ma swój własny brudnopis.
JS pane to edytor JavaScriptu uruchamiany na żądanie. Kod nie startuje sam — wykonujesz go przyciskiem Run lub skrótem Ctrl+Enter, gdy jest gotowy. Nad oboma edytorami działa wyszukiwarka z licznikiem trafień, podświetleniem i skokami Ctrl+Alt+←/→.
JS Console i Output Console
JS Console to REPL na stronie: wpisujesz wyrażenie, naciskasz Enter, dostajesz wynik, a strzałkami w górę i w dół wracasz do wcześniejszych komend — jak w terminalu.
Output Console to podgląd logów strony w sześciu zakładkach z licznikami: All, JZconsole, console.*, Network, błędy oraz pushe do dataLayer. Zakładka Network zbiera żądania sieciowe i pozwala je filtrować po domenie, wielkości i czasie.
AI Helper
AI Helper to wbudowany asystent AI, który łączy się z OpenAI, Anthropic lub Gemini. Bada strukturę strony, sam testuje kod w oknach TEMP i — dopiero po Twojej akceptacji — zamienia działające rozwiązanie w gotową regułę CSS lub JS.
Okna TEMP
Wersje TEMP to te same okna, ale ulotne. Przywołasz je skrótami: Ctrl+Alt+G otwiera TEMP CSS pane, Ctrl+Alt+H — TEMP JS pane, Ctrl+Alt+J — TEMP JS Console, a Ctrl+Alt+K — TEMP Output Console.
Okna TEMP możesz przeciągać, przyklejać krawędziami i zmieniać ich rozmiar dokładnie tak samo jak trwałe. Każdy typ okna pamięta osobno swój ostatni rozmiar (per urządzenie) — podwójny klik w belkę nagłówka przełącza między tym zapamiętanym a domyślnym 380×240. Kolor, font i rozmiar każdego okna ustawisz z menu prawego klawisza.
Zamknięcie krzyżykiem × nie kasuje już zawartości — okno jest tylko chowane, a jego stan (kod, log, geometria) czeka w sesji do ponownego otwarcia tego samego typu. Gdy chcesz zacząć od zera, w nagłówku TEMP CSS i TEMP JS jest przycisk „wyczyść" (ikona kosza, czyszczenie idzie do historii undo). Dane okien TEMP znikają dopiero przy zamknięciu karty — to naturalny zakres sesji.
Panel edycji w osobnym oknie
Czasem wygodniej mieć panel edycji obok strony, nie zamiast niej. Skrót Ctrl+Alt+I otwiera panel w osobnym oknie przeglądarki, automatycznie zaznacza pierwszy aktywny zestaw pasujący do bieżącej strony i ustawia kursor na zakładce CSS. Ctrl+Alt+O robi to samo dla zakładki JS, a Ctrl+Alt+P — dla zakładki Akcje. Jeśli żaden zestaw na stronie nie pasuje, panel otwiera się czysty, gotowy do utworzenia nowego.
Te same skróty użyte w już otwartym panelu nie tworzą drugiego okna — przełączają zakładkę aktywnego zestawu. Dopasowanie idzie po fizycznym klawiszu, więc skróty działają na każdym układzie klawiatury, łącznie z polskim Programmers (AltGr nie psuje już Ctrl+Alt+O).
Powiązane wpisy z bloga
Wpisy, które omawiają to zagadnienie dokładniej.