Die neu gebaute Output Console: 6 Tabs, keine DevTools nötig
Die DevTools nur zu öffnen, um ein Log zu lesen, ist ein Kontextwechsel, den du hundertmal am Tag machst, ohne darüber nachzudenken. Die neu gebaute Output Console schafft diesen Wechsel komplett ab: ein schreibgeschützter Log-Viewer, der in der Seite lebt, mit sechs Tabs für Konsolenausgabe, Netzwerkverkehr, nicht abgefangene Fehler und den GTM-dataLayer. Kein F12. Keine Ausreden mit gesperrten Rechnern. Das ist die komplette Anleitung.
Was die Output Console eigentlich ist
Die Output Console ist eines der In-Tab-Entwicklerfenster von JustZix — ein „Pane", das von der Erweiterung direkt in das Seiten-DOM gerendert wird. Sie ist schreibgeschützt: du tippst nicht hinein. Anders als die JS Console (eine REPL, in der du Code ausführst) fließen Logs von selbst in die Output Console. Du öffnest sie, und sie füllt sich.
Es gibt zwei Wege, sie zu öffnen:
- Über das Menü des schwebenden JustZix-Buttons — ein dauerhaftes Fenster, das an die Regel gebunden ist.
- Mit dem Tastaturkürzel Strg+Alt+K — ein TEMP-Fenster, das du spontan herbeirufst und schließt, wenn du fertig bist.
Sie ist ein Fenster wie jedes andere JustZix-Pane: zieh es, ändere die Größe, schieb es aus dem Weg. Es blockiert die Seite darunter nicht.
Warum ein Log-Fenster im Tab die DevTools schlägt
Die DevTools sind ausgezeichnet. Sie sind aber nicht immer verfügbar und nicht immer praktisch. Konkrete Gründe, warum die In-Tab-Konsole gewinnt:
- Gesperrte Rechner. Unternehmensrichtlinien, Kiosk-Modus, ein verwaltetes Chrome-Profil — viele Umgebungen deaktivieren oder verbergen die DevTools. Die Output Console ist einfach Teil der Seite; es gibt nichts zu entsperren.
- Kein Kontextwechsel. Das Log sitzt neben dem Inhalt, den du debuggst, im selben Viewport. Du teilst nicht deinen Bildschirm und verdeckst nicht die halbe Seite mit einem angedockten Panel.
- Es übersteht ein schlichtes Setup. Keine Source Maps, keine Erweiterungen, die ein Teammitglied vergessen hat zu installieren, kein „DevTools öffnen, zum richtigen Tab wechseln, den Filter leeren"-Ritual. Es ist ein Klick.
- Es kommt mit einer Regel. Ein JustZix-Regelbündel ist teilbar. Gib einem Teammitglied eine Regel, die die Output Console bei einem bestimmten URL-Muster öffnet, und es bekommt dieselbe Debugging-Oberfläche wie du — null Einrichtung auf seiner Seite.
Das ist kein DevTools-Ersatz für tiefgehende Arbeit. Es ist das richtige Werkzeug, wenn du sehen willst, was eine Seite tut, ohne Umstände.
Sechs Tabs, jeder mit einem Live-Zähler-Badge
Das Fenster ist in sechs Tabs gegliedert. Jeder Tab trägt ein Badge, das anzeigt, wie viele Einträge er aktuell enthält, live aktualisiert, während die Seite läuft:
| Tab | Was er zeigt |
|---|---|
| Alle | Jeder Eintrag aus jeder Quelle, in chronologischer Reihenfolge. |
| JZconsole | Nur Ausgaben aus deinem eigenen window.JUSTZIX.*-Logger. |
| Console | Nur die Standard-console.log/info/warn/error/debug der Seite. |
| Network | Die Netzwerkanfragen der Seite, erfasst über chrome.webRequest. |
| Errors | Nicht abgefangene Ausnahmen und unbehandelte Promise-Rejections, jede aufklappbar. |
| DataLayer | window.dataLayer-Pushes (GTM) plus eine Live-Ansicht des Objekts. |
Die Trennung zwischen JZconsole und Console ist beabsichtigt. Dein eigenes Debug-Logging sollte nicht im Lärm der Seite untergehen, und der Lärm der Seite sollte nicht dein Logging übertönen. Halte sie getrennt oder lies sie zusammengeführt unter Alle.
Die kontextabhängige Filterleiste
Zwischen den Tabs und dem Suchfeld sitzt eine Filterleiste, die sich abhängig vom aktiven Tab ändert. Es gibt keinen einzelnen globalen Filter — jede Art von Daten bekommt die Bedienelemente, die für sie Sinn ergeben:
- Alle — keine zusätzlichen Filter. Es ist der volle Strom.
- JZconsole / Console — Level-Checkboxen:
log,info,warn,error,debug. Hak ein Level ab und diese Zeilen verschwinden. Willst du nur Fehler und Warnungen? Hak die anderen drei ab. - Network — drei Reihen von Bedienelementen (Ressourcentyp, HTTP-Statusklasse, Größen-/Dauer-Schieberegler plus ein Domain-Filter). Der Deep Dive zum Network-Tab behandelt diese im Detail.
- Errors — keine Checkboxen; stattdessen klappt jeder Fehler auf, um seinen Stack und seine Details zu zeigen.
- DataLayer — das Fenster teilt sich in zwei Spalten (mehr dazu unten).
Weil die Leiste kontextabhängig ist, scrollst du nie an irrelevanten Bedienelementen vorbei. Der Console-Tab zeigt dir keinen Domain-Filter; der Network-Tab zeigt dir keine Log-Level-Checkboxen.
Das Suchfeld
Unter der Filterleiste, immer sichtbar, ist ein Suchfeld. Es ist ein Live-Filter für Teilzeichenketten ohne Groß-/Kleinschreibung über die Einträge im aktiven Tab. Tippe checkout und die Liste verengt sich, während du tippst. Drücke Esc, um es sofort zu leeren.
Suche und die kontextabhängigen Filter stapeln sich. Im Network-Tab kannst du alles außer dem Status 4xx/5xx abhaken und dann ein Pfadfragment in das Suchfeld tippen, um einen fehlschlagenden Endpunkt festzunageln.
Aufklappbare Konsolen-Logs
Reale console.*-Aufrufe loggen Objekte, Arrays, große Payloads. Roh ausgegeben machen zwanzig davon den Tab unlesbar. Deshalb sind console.*-Einträge standardmäßig zusammengeklappt — jeder zeigt eine kurze Vorschauzeile, etwa so:
[Checkout][14:22:07] EVENT: {…}Klicke die Zeile an und sie klappt zu einem vollständigen JSON-Baum jedes Arguments auf, DevTools-artig — bohre dich in verschachtelte Objekte, klappe Arrays auf, lies die ganze Payload. Klappe sie wieder zu, wenn du fertig bist. Du bekommst eine überschaubare Liste und volle Details auf Abruf, nicht das eine oder das andere.
Der Errors-Tab
Der Errors-Tab sammelt, was tatsächlich kaputtgegangen ist: nicht abgefangene Ausnahmen und unbehandelte Promise-Rejections. Jeder Eintrag klappt auf, um den Stack-Trace und die Details zu zeigen, sodass du von „etwas ist fehlgeschlagen" zu „diese Zeile in dieser Datei" kommst, ohne die Seite zu verlassen.
Ein ehrlicher Vorbehalt, den man vorab kennen sollte: ein fehlgeschlagenes fetch oder XHR — eine API, die 404 oder 500 zurückgibt — ist keine JavaScript-Ausnahme. Es erscheint nicht im Errors-Tab. Dafür gehst du in den Network-Tab und filterst nach 4xx/5xx-Status. Der Errors-Tab ist für Code, der eine Ausnahme geworfen hat, nicht für Anfragen, die fehlgeschlagen sind.
Der DataLayer-Tab
Wenn die Seite Google Tag Manager nutzt, ist der DataLayer-Tab der schnellste Weg, zu sehen, was GTM empfängt. Das Fenster teilt sich in zwei Spalten:
- Links — „Neue Pushes": der Strom der
dataLayer.push(...)-Aufrufe in Event-Reihenfolge. Jeder Push, den die Seite macht, taucht hier auf, sobald er passiert. - Rechts — „Aktueller Zustand": das Live-
window.dataLayer-Objekt als indizierter (0:,1:, …) aufklappbarer JSON-Baum. Der Snapshot aktualisiert sich nach jedem Push, und die Spaltenüberschrift hat Buttons für alle aufklappen / alle zuklappen.
Du siehst sowohl die Events, während sie ausgelöst werden, als auch den angesammelten Zustand auf einmal — kein Rätselraten, ob ein Push angekommen ist, kein Öffnen einer Tag-Debugging-Erweiterung.
Der window.JUSTZIX-Logger
Die Output Console ist nicht nur ein passiver Viewer — sie bringt eine Logging-API für deinen eigenen Code mit. Alles, was du im JS-Pane, in einer Regelaktion oder in Seitencode schreibst, kann direkt in den JZconsole-Tab loggen:
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);Die fünf Methoden entsprechen den fünf Levels, die die JZconsole-Filter-Checkboxen steuern. Aliase halten es bequem und sicher:
window.__JUSTZIX__— immer verfügbar.window.JZ— nur verfügbar, wenn die Seite nicht bereitswindow.JZbesitzt, sodass JustZix nie das eigene Global einer Website überschreibt.
Weil deine Logs in ihrem eigenen Tab landen, bleiben sie lesbar, egal wie geschwätzig die native console der Seite ist.
Eine praktische erste Sitzung
- Drücke Strg+Alt+K auf der Seite, die du inspizieren willst — die Output Console öffnet sich als TEMP-Fenster.
- Beginne bei Alle, um dir einen Überblick zu verschaffen, und wechsle dann zu dem Tab, der wichtig ist.
- Debuggst du deine eigene Regel? Streue
JUSTZIX.log(...)-Aufrufe ein und beobachte JZconsole. - Verhält sich die Seite daneben? Prüfe Errors für geworfenen Code, Network für fehlgeschlagene Anfragen.
- Prüfst du Analytics? Öffne DataLayer und löse den Nutzerfluss aus.
- Verenge alles mit den Level-Checkboxen und dem Suchfeld; Esc leert die Suche.
Siehe auch
- Der Network-Tab im Detail — ein Netzwerk-Panel ohne DevTools
- JustZix-Beispiele — einsatzbereite CSS- und JS-Regeln
Die neu gebaute Output Console verwandelt „DevTools öffnen und graben" in „einen Blick auf den Tab neben der Seite werfen". Lade JustZix herunter — es ist kostenlos, läuft auf Chrome 100+ und installiert sich in etwa zwei Minuten.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.