La Output Console ricostruita: 6 schede, senza bisogno dei DevTools
Aprire i DevTools solo per leggere un log e un cambio di contesto che fai cento volte al giorno senza nemmeno pensarci. La Output Console ricostruita elimina del tutto quel passaggio: un visualizzatore di log in sola lettura che vive dentro la pagina, con sei schede che coprono l'output della console, il traffico di rete, le eccezioni non catturate e il dataLayer di GTM. Niente F12. Niente scuse legate a macchine bloccate. Questa e la guida completa.
Cos'e davvero la Output Console
La Output Console e una delle finestre per sviluppatori in-scheda di JustZix — un "pannello" reso direttamente nel DOM della pagina dall'estensione. E in sola lettura: non ci scrivi dentro. A differenza della JS Console (un REPL dove esegui codice), i log confluiscono nella Output Console da soli. La apri, e si riempie.
Ci sono due modi per aprirla:
- Dal menu del pulsante flottante di JustZix — una finestra persistente legata alla regola.
- Con la scorciatoia da tastiera Ctrl+Alt+K — una finestra TEMP che richiami al volo e chiudi quando hai finito.
E una finestra come qualsiasi altro pannello JustZix: la trascini, la ridimensioni, la sposti via. Non blocca la pagina sottostante.
Perche una finestra di log dentro la scheda batte i DevTools
I DevTools sono eccellenti. Ma non sono sempre disponibili, ne sempre comodi. Motivi concreti per cui la console in-scheda vince:
- Macchine bloccate. Policy aziendali, modalita chiosco, un profilo Chrome gestito — molti ambienti disabilitano o nascondono i DevTools. La Output Console e semplicemente parte della pagina; non c'e niente da sbloccare.
- Nessun cambio di contesto. Il log sta accanto al contenuto che stai analizzando, nella stessa area visibile. Non stai dividendo lo schermo ne coprendo meta pagina con un pannello agganciato.
- Sopravvive a una configurazione minimale. Niente source map, niente estensioni che un collega ha dimenticato di installare, nessun rituale "apri i DevTools, passa alla scheda giusta, pulisci il filtro". E un solo clic.
- Viene distribuita con una regola. Un pacchetto di regole JustZix e condivisibile. Passa a un collega una regola che apre la Output Console su un determinato schema di URL, e ottiene la stessa superficie di debug che hai tu — zero configurazione dalla sua parte.
Non e un sostituto dei DevTools per il lavoro approfondito. E lo strumento giusto quando vuoi vedere cosa sta facendo una pagina senza cerimonie.
Sei schede, ciascuna con un contatore live
La finestra e organizzata in sei schede. Ogni scheda porta un badge che mostra quante voci contiene al momento, aggiornato in tempo reale mentre la pagina gira:
| Scheda | Cosa mostra |
|---|---|
| All | Ogni voce da ogni sorgente, in ordine cronologico. |
| JZconsole | Solo l'output del tuo logger window.JUSTZIX.*. |
| Console | Solo il console.log/info/warn/error/debug standard della pagina. |
| Network | Le richieste di rete della pagina, catturate tramite chrome.webRequest. |
| Errors | Eccezioni non catturate e promise rejection non gestite, ciascuna espandibile. |
| DataLayer | Push su window.dataLayer (GTM) piu una vista live dell'oggetto. |
La separazione tra JZconsole e Console e deliberata. Il tuo logging di debug non dovrebbe annegare nel rumore della pagina, e il rumore della pagina non dovrebbe annegare il tuo logging. Tienili separati, oppure leggili uniti sotto All.
La barra dei filtri contestuale
Tra le schede e la casella di ricerca c'e una barra dei filtri che cambia a seconda della scheda attiva. Non esiste un unico filtro globale — ogni tipo di dato riceve i controlli che hanno senso per esso:
- All — nessun filtro aggiuntivo. E la cascata completa.
- JZconsole / Console — caselle di spunta per livello:
log,info,warn,error,debug. Deseleziona un livello e quelle righe spariscono. Vuoi solo errori e avvisi? Deseleziona gli altri tre. - Network — tre righe di controlli (tipo di risorsa, classe di stato HTTP, slider di dimensione/durata piu un filtro per dominio). L'approfondimento sulla scheda Network li copre nel dettaglio.
- Errors — niente caselle di spunta; ogni errore si espande invece per rivelare il suo stack e i dettagli.
- DataLayer — la finestra si divide in due colonne (di piu qui sotto).
Poiche la barra e contestuale, non scorri mai oltre controlli irrilevanti. La scheda Console non ti mostra un filtro per dominio; la scheda Network non ti mostra le caselle di livello dei log.
La casella di ricerca
Sotto la barra dei filtri, sempre visibile, c'e una casella di ricerca. E un filtro live, per sottostringa e senza distinzione tra maiuscole e minuscole sulle voci della scheda attiva. Digita checkout e la lista si restringe mentre scrivi. Premi Esc per svuotarla all'istante.
La ricerca e i filtri contestuali si combinano. Nella scheda Network puoi deselezionare tutto tranne lo stato 4xx/5xx, poi digitare un frammento di percorso nella casella di ricerca per individuare un singolo endpoint che fallisce.
Log della console comprimibili
Nel mondo reale le chiamate console.* registrano oggetti, array, payload voluminosi. Riversati grezzi, venti di quelli rendono la scheda illeggibile. Per questo le voci console.* sono compresse per impostazione predefinita — ciascuna mostra una breve riga di anteprima, qualcosa come:
[Checkout][14:22:07] EVENT: {…}Clicca la riga e si espande in un albero JSON completo di ogni argomento, in stile DevTools — entra negli oggetti annidati, espandi gli array, leggi l'intero payload. Comprimila di nuovo quando hai finito. Ottieni una lista scorrevole e tutti i dettagli su richiesta, non l'uno o l'altro.
La scheda Errors
La scheda Errors raccoglie cio che si e davvero rotto: eccezioni non catturate e promise rejection non gestite. Ogni voce si espande per mostrare lo stack trace e i dettagli, cosi puoi passare da "qualcosa e fallito" a "questa riga in questo file" senza lasciare la pagina.
Un'avvertenza onesta da conoscere subito: un fetch o XHR fallito — un'API che restituisce 404 o 500 — non e un'eccezione JavaScript. Non apparira nella scheda Errors. Per quelli, vai alla scheda Network e filtra per stato 4xx/5xx. La scheda Errors e per il codice che ha lanciato un'eccezione, non per le richieste fallite.
La scheda DataLayer
Se la pagina usa Google Tag Manager, la scheda DataLayer e il modo piu veloce per vedere cosa sta ricevendo GTM. La finestra si divide in due colonne:
- Sinistra — "New pushes": il flusso delle chiamate
dataLayer.push(...)in ordine di evento. Ogni push fatto dalla pagina compare qui mentre accade. - Destra — "Current state": l'oggetto
window.dataLayerlive come albero JSON indicizzato (0:,1:, …) ed espandibile. Lo snapshot si aggiorna dopo ogni push, e l'intestazione della colonna ha i pulsanti espandi tutto / comprimi tutto.
Vedi sia gli eventi mentre scattano sia lo stato accumulato in una volta sola — niente congetture sul fatto che un push sia andato a buon fine, niente apertura di un'estensione per il debug dei tag.
Il logger window.JUSTZIX
La Output Console non e solo un visualizzatore passivo — distribuisce un'API di logging per il tuo codice. Tutto cio che scrivi nel pannello JS, in un'azione di una regola o nel codice della pagina puo registrare direttamente nella scheda JZconsole:
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);I cinque metodi corrispondono ai cinque livelli controllati dalle caselle del filtro JZconsole. Gli alias lo rendono comodo e sicuro:
window.__JUSTZIX__— sempre disponibile.window.JZ— disponibile solo se la pagina non possiede giawindow.JZ, cosi JustZix non sovrascrive mai una variabile globale del sito.
Poiche i tuoi log finiscono nella loro scheda dedicata, restano leggibili per quanto chiacchierona sia la console nativa della pagina.
Una prima sessione pratica
- Premi Ctrl+Alt+K sulla pagina che vuoi ispezionare — la Output Console si apre come finestra TEMP.
- Parti da All per farti un quadro generale, poi passa alla scheda che conta.
- Stai facendo il debug della tua regola? Sparpaglia chiamate
JUSTZIX.log(...)e osserva JZconsole. - La pagina si comporta male? Controlla Errors per il codice che lancia eccezioni, Network per le richieste fallite.
- Stai verificando le analytics? Apri DataLayer e attiva il flusso utente.
- Restringi qualsiasi cosa con le caselle di livello e la casella di ricerca; Esc svuota la ricerca.
Vedi anche
- La scheda Network in profondita — un pannello di rete senza DevTools
- Esempi di JustZix — regole CSS e JS pronte all'uso
La Output Console ricostruita trasforma "apri i DevTools e scava" in "dai un'occhiata alla scheda accanto alla pagina". Scarica JustZix — e gratuito, funziona su Chrome 100+ e si installa in circa due minuti.
Valuta questo articolo
Nessuna valutazione — sii il primo.