The rebuilt Output Console: 6 tabs, no DevTools needed
Opening DevTools just to read a log is a context switch you do a hundred times a day without thinking about it. The rebuilt Output Console removes that switch entirely: a read-only log viewer that lives inside the page, with six tabs covering console output, network traffic, uncaught errors and the GTM dataLayer. No F12. No locked-down-machine excuses. This is the full walkthrough.
What the Output Console actually is
The Output Console is one of JustZix's in-tab developer windows — a "pane" rendered directly into the page DOM by the extension. It is read-only: you don't type into it. Unlike the JS Console (a REPL where you run code), logs flow into the Output Console by themselves. You open it, and it fills up.
There are two ways to open it:
- From the JustZix floating-button menu — a persistent window tied to the rule.
- With the keyboard shortcut Ctrl+Alt+K — a TEMP window you summon on the spot and dismiss when done.
It is a window like any other JustZix pane: drag it, resize it, move it out of the way. It does not block the page underneath.
Why a log window inside the tab beats DevTools
DevTools is excellent. It is also not always available, and not always convenient. Concrete reasons the in-tab console wins:
- Locked-down machines. Corporate policy, kiosk mode, a managed Chrome profile — plenty of environments disable or hide DevTools. The Output Console is just part of the page; nothing to unlock.
- No context switch. The log sits next to the content you are debugging, in the same viewport. You are not splitting your screen or covering half the page with a docked panel.
- It survives a no-frills setup. No source maps, no extensions a teammate forgot to install, no "open DevTools, switch to the right tab, clear the filter" ritual. It is one click.
- It ships with a rule. A JustZix rule bundle is shareable. Hand a teammate a rule that opens the Output Console on a specific URL pattern, and they get the same debugging surface you do — zero setup on their side.
This is not a DevTools replacement for deep work. It is the right tool when you want to see what a page is doing without ceremony.
Six tabs, each with a live count badge
The window is organised into six tabs. Every tab carries a badge showing how many entries it currently holds, updated live as the page runs:
| Tab | What it shows |
|---|---|
| All | Every entry from every source, in chronological order. |
| JZconsole | Only output from your own window.JUSTZIX.* logger. |
| Console | Only the page's standard console.log/info/warn/error/debug. |
| Network | The page's network requests, captured via chrome.webRequest. |
| Errors | Uncaught exceptions and unhandled promise rejections, each expandable. |
| DataLayer | window.dataLayer pushes (GTM) plus a live view of the object. |
The split between JZconsole and Console is deliberate. Your own debug logging should not drown in the page's noise, and the page's noise should not drown your logging. Keep them apart, or read them merged under All.
The contextual filter bar
Between the tabs and the search box sits a filter bar that changes depending on which tab is active. There is no single global filter — each kind of data gets the controls that make sense for it:
- All — no extra filters. It is the firehose.
- JZconsole / Console — level checkboxes:
log,info,warn,error,debug. Uncheck a level and those lines disappear. Want only errors and warnings? Uncheck the other three. - Network — three rows of controls (resource type, HTTP status class, size/duration sliders plus a domain filter). The deep dive on the Network tab covers these in detail.
- Errors — no checkboxes; instead, each error expands to reveal its stack and details.
- DataLayer — the window splits into two columns (more on that below).
Because the bar is contextual, you never scroll past irrelevant controls. The Console tab does not show you a domain filter; the Network tab does not show you log-level checkboxes.
The search box
Below the filter bar, always visible, is a search box. It is a live, case-insensitive substring filter over the entries in the active tab. Type checkout and the list narrows as you type. Press Esc to clear it instantly.
Search and the contextual filters stack. On the Network tab you can uncheck everything except 4xx/5xx status, then type a path fragment in the search box to pin down one failing endpoint.
Collapsible console logs
Real-world console.* calls log objects, arrays, big payloads. Dumped raw, twenty of those make the tab unreadable. So console.* entries are collapsed by default — each shows a short preview line, something like:
[Checkout][14:22:07] EVENT: {…}Click the line and it expands into a full JSON tree of every argument, DevTools-style — drill into nested objects, expand arrays, read the whole payload. Collapse it again when you are done. You get a scannable list and full detail on demand, not one or the other.
The Errors tab
The Errors tab collects what actually broke: uncaught exceptions and unhandled promise rejections. Each entry expands to show the stack trace and details, so you can go from "something failed" to "this line in this file" without leaving the page.
One honest caveat worth knowing up front: a failed fetch or XHR — an API returning 404 or 500 — is not a JavaScript exception. It will not appear in the Errors tab. For those, you go to the Network tab and filter by 4xx/5xx status. The Errors tab is for code that threw, not requests that failed.
The DataLayer tab
If the page runs Google Tag Manager, the DataLayer tab is the fastest way to see what GTM is receiving. The window splits into two columns:
- Left — "New pushes": the stream of
dataLayer.push(...)calls in event order. Every push the page makes shows up here as it happens. - Right — "Current state": the live
window.dataLayerobject as an indexed (0:,1:, …) expandable JSON tree. The snapshot refreshes after each push, and the column header has expand all / collapse all buttons.
You see both the events as they fire and the accumulated state at once — no guessing whether a push landed, no opening a tag-debugging extension.
The window.JUSTZIX logger
The Output Console is not just a passive viewer — it ships a logging API for your own code. Anything you write in the JS pane, in a rule action, or in page code can log straight into the JZconsole tab:
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);The five methods map to the five levels the JZconsole filter checkboxes control. Aliases keep it convenient and safe:
window.__JUSTZIX__— always available.window.JZ— available only if the page does not already ownwindow.JZ, so JustZix never clobbers a site's own global.
Because your logs land in their own tab, they stay readable no matter how chatty the page's native console is.
A practical first session
- Press Ctrl+Alt+K on the page you want to inspect — the Output Console opens as a TEMP window.
- Start on All to get the lay of the land, then move to the tab that matters.
- Debugging your own rule? Sprinkle
JUSTZIX.log(...)calls and watch JZconsole. - Page misbehaving? Check Errors for thrown code, Network for failed requests.
- Auditing analytics? Open DataLayer and trigger the user flow.
- Narrow anything with the level checkboxes and the search box; Esc clears the search.
See also
- The Network tab in depth — a network panel without DevTools
- JustZix examples — ready-to-use CSS and JS rules
The rebuilt Output Console turns "open DevTools and dig" into "glance at the tab next to the page". Download JustZix — it is free, works on Chrome 100+, and installs in about two minutes.
Rate this post
No ratings yet — be the first.