← Wszystkie wpisy

Okna na froncie

Output Console: monitoruj console.log strony w panelu w karcie — bez DevTools

15 maja 2026 · autor JustZix Team

DevTools console działa świetnie — kiedy są otwarte. Większość czasu nie są. A jeszcze: konsola w DevTools to logi wszystkich stron, których aktualnie używasz. Trudno wyłowić "moje logi z tego konkretnego flow" w lawinie szumu. Output Console (od v2.13.66) to read-only log viewer w samej karcie — widzisz logi tej karty, scoped do tej domeny, zawsze dostępny jak inne panele JustZix.

Cztery typy okien — gdzie się mieści Output Console

Trzy pierwsze typy robią coś ze stroną. Output Console słucha. Każde wywołanie console.log/warn/error/info/debug ze strony (i z innych skryptów JustZix) ląduje w panelu jako kolorowa linia. Plus — dedykowany kanał window.JUSTZIX.log() (od v2.13.73; primary alias od v2.13.76, brand-named, znikoma szansa collision) który NIE leci do natywnej console, tylko do Output Console — twoje skrypty mogą logować bez zaśmiecania DevTools.

Architektura — page hook + sink broadcast

Output Console działa w dwóch krokach:

1. Page hook (MAIN world) — Wstrzyknięty przez chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) (CSP-immune od v2.13.74). Owija console.log/warn/error/info/debug tak, żeby nadal działały (passthrough do oryginału, DevTools nie traci niczego), ale każde wywołanie posyła też window.postMessage({source:'jz-output-console', kind:'console', level, text, t}).
2. Sink broadcast (ISOLATED world) — Content script JustZix słucha window.message i broadcasts entry do wszystkich aktualnie renderowanych Output Console paneli przez _outputConsoleSinks Map. Każdy panel sam appenduje linię do swojego logu (per-instance state).

Plus stringifyArg — type-aware przerobnik argumentów:

• string/number/bool → literal
• Error → .stack (pełen stack trace, nie tylko message)
• object → JSON.stringify z circular guard (WeakSet, więc JSON.stringify(window) nie zawiesi się)
• function → [Function: name] sentinel
• undefined → undefined literal (nie ginie w JSON.stringify)

viewMode: [C+J] / [C] / [J] — dwa kanały, jeden panel

Od v2.13.73 Output Console ma cykliczny viewMode button w header'ze. Trzy stany:

Implementacja: zerowy JS overhead per linia. Każdy entry dostaje classę jz-output-line-{kind}, a tryb dodaje classę jz-output-mode-{mode} na pane. CSS hide-rules robią resztę:

.jz-output-mode-standard .jz-output-line-jz { display: none; }
.jz-output-mode-jz       .jz-output-line-console { display: none; }
/* .jz-output-mode-both pokazuje wszystko */

Filtry per-level + search — power-user features

Pod ⚙ buttonem otwiera się popover z 5 checkbox'ami: log / info / warn / error / debug. Wszystkie zaznaczone domyślnie oprócz debug (default off — strony nadużywają console.debug dla spamu). Mechanizm identyczny jak viewMode — class jz-output-hide-{level} + CSS rule, zero JS overhead.

Plus 🔍 search toggle nad logiem. Live-filter substring match, case-insensitive. Esc czyści. Persist w sessionStorage per-tab — między reloadami filtry/search trzymają się.

// W JS Console wpisz:
for (let i = 0; i < 5; i++) console.log(`User ${i} action`);
for (let i = 0; i < 5; i++) console.warn(`User ${i} warning`);
JUSTZIX.log('My script log');

// Output Console pokaże 11 linii.
// Toggle [J] → tylko 1 (JUSTZIX.log).
// Toggle [C] + filter "warn" only → 5 (console.warn).
// Search "User 3" → wykrywa "User 3 action" + "User 3 warning".

Use case 1 — Monitor dataLayer.push (GTM debug)

Klasyczny problem GTM: chcesz wiedzieć co tag wysyła do dataLayer. DevTools console = przegląda się dziesiątki innych logów. Output Console:

// JS rule (auto-run na site):
const origPush = window.dataLayer.push;
window.dataLayer.push = function(event) {
  JUSTZIX.log('[dataLayer]', JSON.stringify(event));
  return origPush.call(this, event);
};
JUSTZIX.log('dataLayer hook installed.');

Output Console w mode [J] pokazuje tylko twoje JUSTZIX.log linie — każde tag GTM = jedna kolorowa linia. Filtruj "purchase" → tylko ecommerce. Filtruj "ga4" → tylko GA events. Bez F12, bez Tag Assistant'a, bez network panel'a.

Use case 2 — Long-running QA flow monitoring

QA tester loguje 30-minutowy flow. DevTools console przepełnia się po 5 minutach (default max ~1000 linii). Output Console:

• maxLines 2000 (od v2.13.73, było 500) — wystarczy na długą sesję.
• Per-tab sessionStorage — przeładowanie nie czyści logu (tylko close tab).
• Auto-scroll toggle w header — wyłącz żeby zatrzymać scroll przy konkretnej linii, scroll-back nie skoczy do dołu na nowy log.
• Clear button z customizowalnym runColor (od v2.13.71) — wyczyść log przed kolejnym krokiem QA.

Use case 3 — Async error tracking

JS pane error overlay (czerwony bar) NIE łapie async errors — setTimeout(() => { throw err }, 100) nie pokaże się w pane. Output Console JEDNAK łapie — bo console.error jest też wywoływane przez globalny error handler:

// JS rule:
window.addEventListener('error', (e) => {
  JUSTZIX.error('[unhandled]', e.message, '@', e.filename + ':' + e.lineno);
});
window.addEventListener('unhandledrejection', (e) => {
  JUSTZIX.error('[promise reject]', e.reason);
});

Output Console w mode [J] + filter "error only" — wszystkie globale błędy w czytelnej liście. Przydatne np. jak SPA loguje 50 errors na minutę i chcesz tylko swoje.

Use case 4 — API response monitor

Strona ma fetch'e które nie pokazują się w widoku (background sync). Sprawdź co serwer odpowiada:

// JS rule — proxy fetch:
const origFetch = window.fetch;
window.fetch = async function(...args) {
  const res = await origFetch.apply(this, args);
  const clone = res.clone();
  clone.json().then(data => {
    JUSTZIX.log('[fetch]', args[0], '→', JSON.stringify(data).slice(0, 200));
  }).catch(() => {});
  return res;
};

Output Console pokazuje URL + first 200 znaków JSON response. Search po URL → zobacz tylko jeden endpoint. Świetne do debug'owania flaky fetches bez F12 Network panel.

CSP-strict pages — czemu inline script failowal (v2.13.74 fix)

Do v2.13.73 page hook wstrzykiwany był jako <script> element z textContent. Działało na ~99% stron — ale strict CSP (script-src 'self' bez 'unsafe-inline', np. GitHub, Stripe checkout, banki) silnie blokowało execution. appendChild przechodził (DOM mutation OK), skrypt się nie wykonywał, brak rzuconego błędu.

Symptom: window.JUSTZIX.log is not a function + console.log nie pojawia się w Output Console. Fix (v2.13.74): hook przeniesiony na chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) — extension privileges wygrywają z page CSP. Po pierwszym install Output Console dostaje welcome message (od v2.13.76 wyświetla aktywne aliasy): [JustZix] Output Console hook gotowy. API: window.JUSTZIX (lub JZ / __JUSTZIX__).log/.warn/.error/.info/.debug.

Pułapki

• Read-only. Nie da się tu wpisać 2+2 i dostać 4. To stream view, nie REPL. Do REPL używaj JS Console.
• console.debug default OFF w filtrach. Pierwszy raz nie zobaczysz debug logów — to celowe (debug spam jest poprawą produktywności). Włącz w popover ⚙ jeśli potrzebujesz.
• Page hook trzeba żebym był early. Hook wstrzyka się przy pierwszym renderze Output Console panela. Logi przed tym momentem są lost. Best practice: panel attached do parent rule z URL match — wtedy hook się instaluje od page load.
• Logger zawsze działa, nawet gdy strona zajmuje window.JZ. Od v2.13.76 primary alias to window.JUSTZIX (brand name, znikoma szansa collision) + window.__JUSTZIX__ ustawiony zawsze. Krótszy window.JZ jest aliasem TYLKO jeśli wolne — przy konflikcie z page (np. Google Ads) zostaje przy stronie. Używaj JUSTZIX.log() kiedy nie masz pewności co do domeny.
• 2000 linii cap. Dłuższy flow → starsze linie są usuwane (FIFO). Save log do pliku przez Clear button (od v2.13.75 planowane export do JSON; na razie copy-paste z DOM).

Co dalej

Output Console domyka mini-IDE w karcie — read-only kanał razem z trzema pisalnymi (CSS pane / JS pane / JS Console). Razem to "Chrome DevTools alternative dla 80% przypadków" — bez F12, scoped per domena, z customizowalnym UI. Sprawdź też window.JZ helpers dla dedykowanego kanału logging'u i debug GTM dataLayer.push jako konkretną aplikację.

Zainstaluj JustZix — kompletnie za darmo, bez konta, bez serwera.