← Tutti gli articoli

Finestre nel frontend

JS Console su qualsiasi pagina — REPL con cronologia ↑↓, senza DevTools

15 maggio 2026 · di JustZix Team

F12 → Console → digiti qualcosa → clicchi altrove → lo schermo si riassesta, i DevTools sono spariti. O più spesso: non vuoi i DevTools aperti con un cliente nella stanza. JustZix v2.13.66+ ha la JS Console — un REPL flottante stile terminale sulla pagina. Ctrl+Enter, cronologia ↑/↓, Ctrl+L = pulisci, cattura ogni console.log dal contesto della pagina.

In cosa differisce dalla Console dei DevTools

Funzionalmente:

• La JS Console vive sulla pagina — una finestra flottante con un header e due sezioni (log di output + textarea di input). Non sparisce al cambio di focus, non si chiude al ricaricamento.
• Persistenza per scheda — bozza di input, log di output (fino a 200 righe), cronologia comandi (fino a 100) — tutto nel sessionStorage. Ricarica la scheda → tutto ancora lì. Console dei DevTools — output cancellato al ricaricamento.
• Gerarchia di scope — la Console appare solo sulle pagine che corrispondono al pattern URL della sua cartella/gruppo/regola. Configurazione diversa per progetto.
• Sync tra dispositivi — hai una Console «debug Stripe» sul portatile e sulla macchina di lavoro. La cronologia comandi NON si sincronizza (sessionStorage per scheda), ma la finestra stessa sì.

Cosa è uguale: il contesto della pagina. Il tuo codice ha accesso a window, document, alle globali della pagina (es. app.store in un'app React+Redux). Stesso motore di valutazione, stesso scope.

Primo utilizzo in 60 secondi

1. Nelle opzioni di JustZix scegli una cartella/gruppo/regola con un pattern URL rilevante.
2. Clicca «Finestre» → modale con l'elenco di CSS pane + JS pane + JS Console. Scegli «+ Console».
3. Inserisci un nome («Stripe REPL»), colore (viola predefinito #7C3AED).
4. Visita un URL corrispondente — la Console appare come finestra flottante (ancora in alto a destra).
5. Digita document.title nell'input, premi Ctrl+Enter. L'output mostra > document.title (eco del comando) + "Vero titolo della pagina" (risultato).

Scorciatoie da tastiera

Cronologia: max 100 voci, dedup dell'ultimo comando (niente ripetizioni), persistita nel sessionStorage per scheda. ↑/↓ funziona solo quando sei al bordo della textarea — ti permette di navigare normalmente dentro codice multiriga.

Cattura di console.log/warn/error/info (v2.13.67)

Il tuo eval può chiamare console.log('x') — apparirà nell'output della Console sotto il comando:

> console.log('hello'); 42
[log] hello
  42

Prima i valori loggati, poi il valore di ritorno. Funziona anche per console.warn, console.error, console.info — ognuno con il proprio prefisso ([warn], [err], [info]) e colore.

Bonus: se la pagina stessa logga qualcosa dal contesto della pagina durante il tuo eval (es. un fetch nel tuo codice logga un errore XHR), lo vedrai nella Console. È oro per il debug — l'analista vede esattamente cosa succede sotto il cofano.

Cosa controlli davvero

1. Test fetch rapido prima di aggiungerlo a una regola

> fetch('/api/products/12345').then(r => r.json()).then(console.log)
[log] {id: 12345, name: "...", price: 99.99}

Verifica che l'endpoint restituisca ciò che ti aspetti. Senza aprire il pannello Network dei DevTools.

2. «Cosa c'è in Redux»

> window.__REDUX_DEVTOOLS_EXTENSION__?.connect?.(); store?.getState?.()
  {user: {...}, cart: {...}, products: [...]}

Dump in un clic dello stato corrente, senza installare Redux DevTools.

3. «Quanti h2 su questa pagina»

> document.querySelectorAll('h2').length
  47

Controlli sulla struttura della pagina, pre-validazione dei selettori CSS.

4. Override una tantum

> document.querySelectorAll('.ad').forEach(el => el.remove())
  undefined

Puramente distruttivo, una sola volta. Non vuoi una regola CSS/JS per questo — vuoi l'azione una volta. La Console ti dà JS a costo zero.

5. Didattico

Stai insegnando a uno sviluppatore junior o a qualcuno senza esperienza di DevTools. Dimostri typeof null, [].map(x => x + 1), Array.from('hello'). Una Console sulla pagina è meno intimidatoria dei DevTools.

Gerarchia di scope — Console «debug GA» solo su *shop*

Una JS Console collegata alla cartella «E-commerce» appare su ogni pagina che corrisponde a shop.com/*. Non su YouTube. Non su Gmail. Una Console «Stripe Dashboard» su dashboard.stripe.com/* — inutile altrove, quindi non appare. Ogni progetto ottiene il proprio REPL.

In più: hide-for-page (clicca ✕ sull'header del pane, o clic destro → nascondi) — la Console sparisce per la scheda corrente. Ricaricare la scheda = ripristina (flag sessionStorage azzerato).

Trappole

• Eval async — await fetch(...) senza wrapper non funziona (niente top-level await). Avvolgilo in una IIFE: (async () => { const r = await fetch(...); console.log(await r.json()); })(). Oppure usa .then(...).
• Limite del sessionStorage — vengono mantenute le ultime 200 righe di output, le più vecchie tagliate (così lo storage non cresce senza limiti). Cronologia fino a 100 comandi.
• Ricaricare la scheda = non perde l'output. Chiudere la scheda = lo perde. Se vuoi tenere qualcosa — copialo in un file esterno, o in una regola JS permanente.
• Iframe in sandbox — la Console non si visualizza dentro il contenuto di un iframe (a meno che l'URL dell'iframe corrisponda separatamente a un pattern di scope). Iframe cross-origin = scope separato.

Cosa fare dopo

La JS Console è il 3° tipo di «finestra nella pagina» di JustZix. Il primo (CSS pane) — editor CSS in tempo reale. Il secondo (JS pane) — codice JS persistente con Run-on-demand. Il terzo (Console) — REPL. Il quarto (Output Console) — logger personalizzato per il JS dell'utente, previsto.

Installa JustZix e abbi un REPL in ogni scheda, senza F12.