← Wszystkie wpisy

Okna na froncie

Przebudowana Output Console: 6 zakładek, bez DevTools

16 maja 2026 · autor JustZix Team

Otwieranie DevTools tylko po to, żeby przeczytać log, to przełączanie kontekstu, które wykonujesz sto razy dziennie, nawet o tym nie myśląc. Przebudowana Output Console całkowicie usuwa to przełączanie: przeglądarka logów tylko do odczytu, która żyje wewnątrz strony, z sześcioma zakładkami obejmującymi wyjście konsoli, ruch sieciowy, nieobsłużone błędy oraz dataLayer z GTM. Bez F12. Bez wymówek o zablokowanej maszynie. Oto pełne omówienie.

Czym właściwie jest Output Console

Output Console to jedno z okien deweloperskich JustZix działających w karcie — „pane" renderowany bezpośrednio w DOM strony przez rozszerzenie. Jest tylko do odczytu: nie wpisujesz w nią niczego. W przeciwieństwie do JS Console (REPL, w którym uruchamiasz kod), logi trafiają do Output Console same z siebie. Otwierasz ją, a ona się zapełnia.

Są dwa sposoby na jej otwarcie:

• Z menu pływającego przycisku JustZix — trwałe okno powiązane z regułą.
• Skrótem klawiszowym Ctrl+Alt+K — okno TEMP, które przywołujesz na miejscu i zamykasz, gdy skończysz.

To okno jak każde inne w JustZix: przeciągasz je, zmieniasz rozmiar, odsuwasz na bok. Nie blokuje strony pod spodem.

Dlaczego okno logów w karcie bije DevTools

DevTools jest świetne. Nie zawsze jest jednak dostępne i nie zawsze wygodne. Konkretne powody, dla których konsola w karcie wygrywa:

• Zablokowane maszyny. Polityka firmowa, tryb kiosku, zarządzany profil Chrome — sporo środowisk wyłącza lub ukrywa DevTools. Output Console to po prostu część strony; nie ma czego odblokowywać.
• Brak przełączania kontekstu. Log znajduje się obok treści, którą debugujesz, w tym samym widoku. Nie dzielisz ekranu ani nie zasłaniasz połowy strony zadokowanym panelem.
• Przetrwa nawet w minimalnej konfiguracji. Bez source map, bez rozszerzeń, których kolega zapomniał zainstalować, bez rytuału „otwórz DevTools, przełącz na właściwą zakładkę, wyczyść filtr". To jedno kliknięcie.
• Dostarczana razem z regułą. Pakiet reguł JustZix można udostępniać. Przekaż koledze regułę, która otwiera Output Console na konkretnym wzorcu URL, a otrzyma tę samą powierzchnię do debugowania co Ty — zero konfiguracji po jego stronie.

To nie jest zamiennik DevTools do głębokiej pracy. To właściwe narzędzie, gdy chcesz zobaczyć, co robi strona, bez ceregieli.

Sześć zakładek, każda z licznikiem na żywo

Okno podzielone jest na sześć zakładek. Każda zakładka ma plakietkę pokazującą, ile wpisów aktualnie zawiera, aktualizowaną na żywo w trakcie działania strony:

Podział na JZconsole i Console jest celowy. Twoje własne logi debugowania nie powinny tonąć w szumie strony, a szum strony nie powinien zagłuszać Twoich logów. Trzymaj je osobno albo czytaj połączone w zakładce All.

Kontekstowy pasek filtrów

Między zakładkami a polem wyszukiwania znajduje się pasek filtrów, który zmienia się w zależności od tego, która zakładka jest aktywna. Nie ma jednego globalnego filtra — każdy rodzaj danych dostaje kontrolki, które mają dla niego sens:

• All — bez dodatkowych filtrów. To strumień wszystkiego.
• JZconsole / Console — pola wyboru poziomów: log, info, warn, error, debug. Odznacz poziom, a te linie znikają. Chcesz tylko błędy i ostrzeżenia? Odznacz pozostałe trzy.
• Network — trzy rzędy kontrolek (typ zasobu, klasa statusu HTTP, suwaki rozmiaru/czasu trwania plus filtr domeny). Szczegółowe omówienie zakładki Network opisuje je dokładnie.
• Errors — bez pól wyboru; zamiast tego każdy błąd rozwija się, ujawniając swój stos i szczegóły.
• DataLayer — okno dzieli się na dwie kolumny (więcej o tym poniżej).

Ponieważ pasek jest kontekstowy, nigdy nie przewijasz obok nieistotnych kontrolek. Zakładka Console nie pokazuje Ci filtra domeny; zakładka Network nie pokazuje Ci pól wyboru poziomów logów.

Pole wyszukiwania

Poniżej paska filtrów, zawsze widoczne, znajduje się pole wyszukiwania. To działający na żywo, niewrażliwy na wielkość liter filtr podciągów nad wpisami w aktywnej zakładce. Wpisz checkout, a lista zawęża się w trakcie pisania. Naciśnij Esc, aby natychmiast je wyczyścić.

Wyszukiwanie i filtry kontekstowe się sumują. W zakładce Network możesz odznaczyć wszystko poza statusem 4xx/5xx, a następnie wpisać fragment ścieżki w polu wyszukiwania, aby namierzyć jeden niedziałający endpoint.

Rozwijalne logi konsoli

Wywołania console.* z prawdziwego świata logują obiekty, tablice, duże ładunki danych. Wyrzucone surowo, dwadzieścia takich wpisów czyni zakładkę nieczytelną. Dlatego wpisy console.* są domyślnie zwinięte — każdy pokazuje krótką linię podglądu, coś w stylu:

[Checkout][14:22:07] EVENT: {…}

Kliknij linię, a rozwinie się w pełne drzewo JSON każdego argumentu, w stylu DevTools — wgłębiaj się w zagnieżdżone obiekty, rozwijaj tablice, czytaj cały ładunek. Zwiń je ponownie, gdy skończysz. Otrzymujesz przejrzystą listę i pełne szczegóły na żądanie, a nie jedno albo drugie.

Zakładka Errors

Zakładka Errors zbiera to, co rzeczywiście się zepsuło: nieobsłużone wyjątki i nieobsłużone odrzucenia promise. Każdy wpis rozwija się, pokazując ślad stosu i szczegóły, więc możesz przejść od „coś zawiodło" do „ta linia w tym pliku" bez opuszczania strony.

Jedno uczciwe zastrzeżenie warte podkreślenia od razu: nieudany fetch lub XHR — API zwracające 404 albo 500 — nie jest wyjątkiem JavaScript. Nie pojawi się w zakładce Errors. Dla takich przypadków przechodzisz do zakładki Network i filtrujesz po statusie 4xx/5xx. Zakładka Errors dotyczy kodu, który rzucił wyjątek, a nie żądań, które zawiodły.

Zakładka DataLayer

Jeśli strona korzysta z Google Tag Manager, zakładka DataLayer to najszybszy sposób, by zobaczyć, co GTM otrzymuje. Okno dzieli się na dwie kolumny:

• Lewa — „New pushes": strumień wywołań dataLayer.push(...) w kolejności zdarzeń. Każdy push wykonany przez stronę pojawia się tutaj w momencie wystąpienia.
• Prawa — „Current state": obiekt window.dataLayer na żywo jako indeksowane (0:, 1:, …) rozwijalne drzewo JSON. Migawka odświeża się po każdym pushu, a nagłówek kolumny ma przyciski rozwiń wszystko / zwiń wszystko.

Widzisz jednocześnie zdarzenia w momencie ich wywołania i zakumulowany stan — bez zgadywania, czy push dotarł, bez otwierania rozszerzenia do debugowania tagów.

Logger window.JUSTZIX

Output Console to nie tylko pasywna przeglądarka — dostarcza API do logowania dla Twojego własnego kodu. Cokolwiek napiszesz w panelu JS, w akcji reguły albo w kodzie strony, może logować się prosto do zakładki JZconsole:

JUSTZIX.log('cart loaded', cart);
JUSTZIX.info('user is logged in');
JUSTZIX.warn('coupon field empty');
JUSTZIX.error('checkout API failed', err);
JUSTZIX.debug('raw payload', payload);

Pięć metod odpowiada pięciu poziomom kontrolowanym przez pola wyboru filtra JZconsole. Aliasy zapewniają wygodę i bezpieczeństwo:

• window.__JUSTZIX__ — zawsze dostępny.
• window.JZ — dostępny tylko wtedy, gdy strona nie posiada już własnego window.JZ, więc JustZix nigdy nie nadpisuje globalnej zmiennej witryny.

Ponieważ Twoje logi trafiają do własnej zakładki, pozostają czytelne niezależnie od tego, jak gadatliwa jest natywna console strony.

Praktyczna pierwsza sesja

1. Naciśnij Ctrl+Alt+K na stronie, którą chcesz zbadać — Output Console otworzy się jako okno TEMP.
2. Zacznij od zakładki All, aby się rozejrzeć, a potem przejdź do zakładki, która ma znaczenie.
3. Debugujesz własną regułę? Rozsyp wywołania JUSTZIX.log(...) i obserwuj JZconsole.
4. Strona się dziwnie zachowuje? Sprawdź Errors pod kątem rzuconych wyjątków, Network pod kątem nieudanych żądań.
5. Audytujesz analitykę? Otwórz DataLayer i wyzwól ścieżkę użytkownika.
6. Zawęź cokolwiek polami wyboru poziomów i polem wyszukiwania; Esc czyści wyszukiwanie.

Zobacz też

• Zakładka Network w szczegółach — panel sieciowy bez DevTools
• Przykłady JustZix — gotowe do użycia reguły CSS i JS

Przebudowana Output Console zmienia „otwórz DevTools i kop" w „zerknij na zakładkę obok strony". Pobierz JustZix — jest darmowy, działa na Chrome 100+ i instaluje się w jakieś dwie minuty.