← Tutti gli articoli

Finestre nel frontend

Output Console: osservare il console.log della pagina in un pannello della scheda — senza DevTools

15 maggio 2026 · di JustZix Team

La console dei DevTools funziona benissimo — quando è aperta. La maggior parte del tempo non lo è. E peggio: la console dei DevTools mostra i log di ogni pagina che stai usando in quel momento. Difficile pescare «i miei log di questo flusso specifico» nella valanga di rumore. La Output Console (da v2.13.66) è un visualizzatore di log in sola lettura nella scheda stessa — vedi i log di questa scheda, limitati a questo dominio, sempre disponibili come gli altri pannelli JustZix.

Quattro tipi di finestre — dove si inserisce la Output Console

I primi tre tipi fanno qualcosa alla pagina. La Output Console ascolta. Ogni chiamata console.log/warn/error/info/debug della pagina (e di altri script JustZix) arriva come una riga colorata. In più — un canale window.JUSTZIX.log() dedicato (da v2.13.73; alias primario da v2.13.76, con nome di brand e rischio di collisione trascurabile) che NON viene inoltrato alla console nativa, solo alla Output Console — i tuoi script possono loggare senza inquinare i DevTools.

Architettura — hook di pagina + broadcast verso i sink

La Output Console lavora in due passi:

1. Hook di pagina (MAIN world) — Iniettato via chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) (immune alla CSP da v2.13.74). Avvolge console.log/warn/error/info/debug conservando il passthrough verso l'originale (i DevTools non perdono nulla), ma ogni chiamata fa anche window.postMessage({source:'jz-output-console', kind:'console', level, text, t}).
2. Broadcast verso i sink (ISOLATED world) — Il content script di JustZix ascolta window.message e fa il broadcast delle voci verso tutti i pannelli Output Console attualmente renderizzati tramite la Map _outputConsoleSinks. Ogni pannello aggiunge la sua riga al proprio log (stato per istanza).

In più stringifyArg — un trasformatore di argomenti consapevole dei tipi:

• string/number/bool → letterale
• Error → .stack (stack trace completo, non solo il messaggio)
• oggetto → JSON.stringify con una protezione anti-cicli (WeakSet, così JSON.stringify(window) non si blocca)
• funzione → sentinella [Function: name]
• undefined → letterale undefined (non sparisce dentro JSON.stringify)

viewMode: [C+J] / [C] / [J] — due canali, un pannello

Da v2.13.73 la Output Console ha un pulsante viewMode ciclico nell'header. Tre stati:

Implementazione: zero overhead JS per riga. Ogni voce riceve una classe jz-output-line-{kind}, e la modalità aggiunge una classe jz-output-mode-{mode} sul pane. Le regole CSS di nascondimento fanno il resto:

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

Filtri per livello + ricerca — funzioni da power-user

Sotto il pulsante ⚙ si apre un popover con 5 checkbox: log / info / warn / error / debug. Tutte spuntate di default tranne debug (default off — le pagine abusano di console.debug per lo spam). Stesso meccanismo del viewMode — classe jz-output-hide-{level} + regola CSS, zero overhead JS.

In più un toggle di ricerca 🔍 sopra il log. Filtro dal vivo con match su sottostringa, case-insensitive. Esc lo svuota. Persistito in sessionStorage per scheda — filtri/ricerca sopravvivono al ricaricamento.

// Digita nella JS Console:
for (let i = 0; i < 5; i++) console.log(`Azione utente ${i}`);
for (let i = 0; i < 5; i++) console.warn(`Avviso utente ${i}`);
JUSTZIX.log('Log del mio script');

// La Output Console mostrerà 11 righe.
// Passa a [J] → solo 1 (JUSTZIX.log).
// Passa a [C] + solo filtro «warn» → 5 (console.warn).
// Ricerca «utente 3» → cattura «Azione utente 3» + «Avviso utente 3».

Caso d'uso 1 — Monitorare dataLayer.push (debug GTM)

Problema GTM classico: vuoi sapere cosa invia ogni tag al dataLayer. Console dei DevTools = farsi strada tra decine di altri log. Output Console:

// Regola JS (parte automaticamente sul sito):
const origPush = window.dataLayer.push;
window.dataLayer.push = function(event) {
  JUSTZIX.log('[dataLayer]', JSON.stringify(event));
  return origPush.call(this, event);
};
JUSTZIX.log('Hook dataLayer installato.');

La Output Console in modalità [J] mostra solo le tue righe JUSTZIX.log — ogni tag GTM = una riga colorata. Filtro «purchase» → solo e-commerce. Filtro «ga4» → solo eventi GA. Niente F12, niente Tag Assistant, niente pannello Network.

Caso d'uso 2 — Monitoraggio di un flusso QA lungo

Un tester QA registra un flusso di 30 minuti. La console dei DevTools si riempie dopo 5 minuti (massimo predefinito ~1000 righe). Output Console:

• maxLines 2000 (da v2.13.73, prima era 500) — abbastanza per una sessione lunga.
• sessionStorage per scheda — un ricaricamento non svuota il log (solo la chiusura della scheda lo fa).
• Toggle auto-scroll nell'header — disattivalo per fermarti a una riga specifica; lo scorrimento all'indietro non salta in fondo a ogni nuovo log.
• Pulsante Clear con runColor personalizzabile (da v2.13.71) — svuota il log prima del prossimo passo QA.

Caso d'uso 3 — Tracciamento degli errori asincroni

L'overlay di errore del JS pane (barra rossa) NON cattura gli errori asincroni — setTimeout(() => { throw err }, 100) non appare nel pane. La Output Console li cattura SÌ — perché console.error viene invocato anche dal gestore di errori globale:

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

La Output Console in modalità [J] + filtro «solo error» — ogni errore globale in una lista leggibile. Comodo quando una SPA logga 50 errori al minuto e vuoi solo i tuoi.

Caso d'uso 4 — Monitor delle risposte API

Una pagina ha fetch che non appaiono nella vista (sync in background). Controlla cosa risponde il server:

// Regola JS — proxy del 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;
};

La Output Console mostra l'URL + i primi 200 caratteri della risposta JSON. Cerca per URL → vedi un solo endpoint. Ottimo per debuggare fetch instabili senza il pannello Network di F12.

Pagine con CSP rigorosa — perché lo script inline falliva (fix v2.13.74)

Fino a v2.13.73 l'hook di pagina veniva iniettato come elemento <script> con textContent. Funzionava su ~99% delle pagine — ma una CSP rigorosa (script-src 'self' senza 'unsafe-inline', es. GitHub, il checkout di Stripe, le banche) bloccava silenziosamente l'esecuzione. appendChild riusciva (mutazione del DOM OK), ma lo script non veniva eseguito, nessun errore lanciato.

Sintomo: window.JUSTZIX.log is not a function + console.log non appare nella Output Console. Fix (v2.13.74): l'hook è passato a chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) — i privilegi dell'estensione battono la CSP della pagina. Dopo la prima installazione la Output Console riceve un messaggio di benvenuto (da v2.13.76 elenca gli alias attivi): [JustZix] Output Console hook ready. API: window.JUSTZIX (or JZ / __JUSTZIX__).log/.warn/.error/.info/.debug.

Trappole

• Sola lettura. Non puoi digitare 2+2 qui e ottenere 4. È una vista a stream, non un REPL. Per un REPL usa la JS Console.
• console.debug è OFF di default nei filtri. La prima volta non vedrai i log di debug — è voluto (lo spam di debug è un divoratore di produttività). Attivalo nel popover ⚙ se ti serve.
• L'hook di pagina deve avvenire presto. L'hook si inietta al primo render di un pannello Output Console. I log prima di quel momento vanno persi. Best practice: pannello agganciato a una regola genitore con match di URL — così l'hook si installa dal caricamento della pagina.
• Il logger funziona sempre, anche quando la pagina occupa window.JZ. Da v2.13.76 l'alias primario è window.JUSTZIX (nome di brand, rischio di collisione trascurabile), più window.__JUSTZIX__ sempre impostato. Il più corto window.JZ è un alias SOLO quando libero — in caso di conflitto con la pagina (es. Google Ads) resta alla pagina. Usa JUSTZIX.log() quando non sei sicuro del dominio.
• Limite di 2000 righe. Flusso più lungo → le righe più vecchie vengono espulse (FIFO). Salva il log in un file tramite il pulsante Clear (export JSON previsto per v2.13.75; per ora copia-incolla dal DOM).

Cosa fare dopo

La Output Console chiude la mini-IDE nella scheda — un canale in sola lettura accanto ai tre canali di scrittura (CSS pane / JS pane / JS Console). Insieme è una «alternativa a Chrome DevTools per l'80% dei casi» — niente F12, limitata per dominio, con UI personalizzabile. Vedi anche window.JZ helpers per il canale di logging dedicato e debuggare GTM dataLayer.push come applicazione concreta.

Installa JustZix — completamente gratuito, senza account, senza server.