← Alle Beiträge

Fenster im Frontend

Output Console: das console.log der Seite in einem Tab-Panel beobachten — ohne DevTools

15 Mai 2026 · von JustZix Team

Die DevTools-Konsole funktioniert großartig — wenn sie offen ist. Meistens ist sie das nicht. Und schlimmer: Die DevTools-Konsole zeigt Logs von jeder Seite, die du gerade nutzt. Schwer, „meine Logs aus diesem konkreten Flow" in der Lawine aus Rauschen herauszufischen. Die Output Console (seit v2.13.66) ist ein schreibgeschützter Log-Viewer im Tab selbst — du siehst die Logs dieses Tabs, begrenzt auf diese Domain, immer verfügbar wie andere JustZix-Panels.

Vier Fenstertypen — wo die Output Console hineinpasst

Die ersten drei Typen tun etwas mit der Seite. Die Output Console hört zu. Jeder console.log/warn/error/info/debug-Aufruf der Seite (und anderer JustZix-Skripte) landet als farbige Zeile. Dazu — ein dedizierter window.JUSTZIX.log()-Kanal (seit v2.13.73; primärer Alias seit v2.13.76, mit Markennamen und verschwindend geringem Kollisionsrisiko), der NICHT an die native Konsole weitergeleitet wird, sondern nur an die Output Console — deine Skripte können loggen, ohne die DevTools zu verschmutzen.

Architektur — Page-Hook + Sink-Broadcast

Die Output Console arbeitet in zwei Schritten:

1. Page-Hook (MAIN world) — Injiziert über chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) (CSP-immun seit v2.13.74). Umhüllt console.log/warn/error/info/debug und erhält den Passthrough zum Original (DevTools verliert nichts), aber jeder Aufruf postet zusätzlich window.postMessage({source:'jz-output-console', kind:'console', level, text, t}).
2. Sink-Broadcast (ISOLATED world) — Das JustZix-Content-Skript lauscht auf window.message und broadcastet die Einträge an alle aktuell gerenderten Output-Console-Panels über die _outputConsoleSinks-Map. Jedes Panel hängt seine Zeile an sein eigenes Log an (Zustand pro Instanz).

Dazu stringifyArg — ein typbewusster Argument-Transformer:

• string/number/bool → Literal
• Error → .stack (vollständiger Stack-Trace, nicht nur die Meldung)
• Objekt → JSON.stringify mit einem Zirkular-Schutz (WeakSet, damit JSON.stringify(window) nicht hängt)
• Funktion → [Function: name]-Sentinel
• undefined → undefined-Literal (verschwindet nicht innerhalb von JSON.stringify)

viewMode: [C+J] / [C] / [J] — zwei Kanäle, ein Panel

Seit v2.13.73 hat die Output Console einen zyklischen viewMode-Button im Header. Drei Zustände:

Implementierung: null JS-Overhead pro Zeile. Jeder Eintrag erhält eine jz-output-line-{kind}-Klasse, und der Modus fügt dem Pane eine jz-output-mode-{mode}-Klasse hinzu. CSS-Hide-Regeln erledigen den Rest:

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

Filter pro Level + Suche — Power-User-Features

Unter dem ⚙-Button öffnet sich ein Popover mit 5 Checkboxen: log / info / warn / error / debug. Standardmäßig alle angehakt außer debug (Standard aus — Seiten missbrauchen console.debug für Spam). Derselbe Mechanismus wie beim viewMode — Klasse jz-output-hide-{level} + CSS-Regel, null JS-Overhead.

Dazu ein 🔍-Such-Toggle über dem Log. Live-Filter mit Substring-Treffer, case-insensitive. Esc leert es. Pro Tab in sessionStorage gespeichert — Filter/Suche überstehen den Reload.

// In die JS Console tippen:
for (let i = 0; i < 5; i++) console.log(`Aktion von User ${i}`);
for (let i = 0; i < 5; i++) console.warn(`Warnung von User ${i}`);
JUSTZIX.log('Log meines Skripts');

// Die Output Console zeigt 11 Zeilen.
// [J] umschalten → nur 1 (JUSTZIX.log).
// [C] umschalten + nur Filter „warn" → 5 (console.warn).
// Suche „User 3" → fängt „Aktion von User 3" + „Warnung von User 3".

Anwendungsfall 1 — dataLayer.push überwachen (GTM-Debug)

Klassisches GTM-Problem: Du willst wissen, was jeder Tag an den dataLayer sendet. DevTools-Konsole = sich durch Dutzende anderer Logs wühlen. Output Console:

// JS-Regel (läuft automatisch auf der Seite):
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 installiert.');

Die Output Console im [J]-Modus zeigt nur deine JUSTZIX.log-Zeilen — jeder GTM-Tag = eine farbige Zeile. Filter „purchase" → nur E-Commerce. Filter „ga4" → nur GA-Events. Kein F12, kein Tag Assistant, kein Network-Panel.

Anwendungsfall 2 — Überwachung eines langen QA-Flows

Ein QA-Tester protokolliert einen 30-minütigen Flow. Die DevTools-Konsole läuft nach 5 Minuten voll (Standardmaximum ~1000 Zeilen). Output Console:

• maxLines 2000 (seit v2.13.73, vorher 500) — genug für eine lange Session.
• sessionStorage pro Tab — ein Reload leert das Log nicht (nur das Schließen des Tabs).
• Auto-Scroll-Toggle im Header — ausschalten, um an einer bestimmten Zeile stehen zu bleiben; das Zurückscrollen springt nicht bei jedem neuen Log nach unten.
• Clear-Button mit anpassbarer runColor (seit v2.13.71) — das Log vor dem nächsten QA-Schritt leeren.

Anwendungsfall 3 — Tracking asynchroner Fehler

Das Fehler-Overlay des JS pane (rote Leiste) fängt KEINE asynchronen Fehler — setTimeout(() => { throw err }, 100) erscheint nicht im Pane. Die Output Console fängt sie SCHON — weil console.error auch vom globalen Error-Handler aufgerufen wird:

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

Die Output Console im [J]-Modus + Filter „nur error" — jeder globale Fehler in einer lesbaren Liste. Praktisch, wenn eine SPA 50 Fehler pro Minute loggt und du nur deine willst.

Anwendungsfall 4 — API-Response-Monitor

Eine Seite hat Fetches, die nicht in der Ansicht auftauchen (Background-Sync). Prüfe, was der Server antwortet:

// JS-Regel — Fetch proxen:
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;
};

Die Output Console zeigt URL + die ersten 200 Zeichen der JSON-Antwort. Suche nach URL → nur ein Endpoint sehen. Großartig zum Debuggen flakiger Fetches ohne das F12-Network-Panel.

CSP-strenge Seiten — warum Inline-Skript scheiterte (v2.13.74-Fix)

Bis v2.13.73 wurde der Page-Hook als <script>-Element mit textContent injiziert. Funktionierte auf ~99 % der Seiten — aber strenge CSP (script-src 'self' ohne 'unsafe-inline', z. B. GitHub, Stripe-Checkout, Banken) blockierte die Ausführung still. appendChild gelang (DOM-Mutation OK), aber das Skript wurde nicht ausgeführt, kein Fehler geworfen.

Symptom: window.JUSTZIX.log is not a function + console.log taucht nicht in der Output Console auf. Fix (v2.13.74): Der Hook wanderte zu chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) — Extension-Privilegien schlagen die Seiten-CSP. Nach der ersten Installation erhält die Output Console eine Willkommensnachricht (seit v2.13.76 listet sie aktive Aliasse auf): [JustZix] Output Console hook ready. API: window.JUSTZIX (or JZ / __JUSTZIX__).log/.warn/.error/.info/.debug.

Fallstricke

• Schreibgeschützt. Du kannst hier nicht 2+2 tippen und 4 bekommen. Das ist eine Stream-Ansicht, kein REPL. Für ein REPL nutze die JS Console.
• console.debug ist in den Filtern standardmäßig AUS. Beim ersten Mal siehst du keine Debug-Logs — das ist Absicht (Debug-Spam ist ein Produktivitätskiller). Schalte es im ⚙-Popover ein, falls du es brauchst.
• Der Page-Hook muss früh erfolgen. Der Hook injiziert beim ersten Rendern eines Output-Console-Panels. Logs vor diesem Moment gehen verloren. Best Practice: Panel an eine übergeordnete Regel mit URL-Match hängen — dann installiert sich der Hook ab dem Seitenladen.
• Der Logger funktioniert immer, auch wenn die Seite window.JZ belegt. Seit v2.13.76 ist der primäre Alias window.JUSTZIX (Markenname, verschwindend geringes Kollisionsrisiko), plus window.__JUSTZIX__ immer gesetzt. Das kürzere window.JZ ist NUR dann ein Alias, wenn frei — bei einem Konflikt mit der Seite (z. B. Google Ads) bleibt es bei der Seite. Nutze JUSTZIX.log(), wenn du dir bei der Domain nicht sicher bist.
• 2000-Zeilen-Limit. Längerer Flow → ältere Zeilen werden verdrängt (FIFO). Speichere das Log über den Clear-Button in eine Datei (JSON-Export geplant für v2.13.75; vorerst Copy-Paste aus dem DOM).

Wie es weitergeht

Die Output Console schließt das In-Tab-Mini-IDE ab — ein schreibgeschützter Kanal neben den drei Schreib-Kanälen (CSS pane / JS pane / JS Console). Zusammen ist das eine „Chrome-DevTools-Alternative für 80 % der Fälle" — kein F12, pro Domain begrenzt, mit anpassbarer UI. Sieh dir auch window.JZ helpers für den dedizierten Logging-Kanal an und GTM dataLayer.push debuggen als konkrete Anwendung.

Installiere JustZix — komplett kostenlos, kein Konto, kein Server.