← Tutti gli articoli

Guide

Una mini-IDE in una scheda del browser: 8 strumenti JustZix che sostituiscono i DevTools

15 maggio 2026 · di JustZix Team

JustZix è nato come estensione per l'iniezione di CSS — ma nell'ultimo anno è cresciuto in qualcosa di molto più grande. Oggi è una mini-IDE in ogni scheda del browser — 4 tipi di finestre (pane), 6 tipi di azione, 2 namespace di API JS e un sistema di snap connections per disporli tutti in una dashboard coerente per dominio. Niente F12. Niente DevTools. Tutto nella scheda stessa. Questo articolo mappa l'intero quadro — cosa usare quando, come si incastra, da dove cominciare.

La mappa: 4 + 6 + 2 + 1

JustZix si divide in quattro componenti principali che puoi usare insieme o separatamente:

In più le snap connections come «colla» — permettono di disporre i pannelli e la barra delle azioni in gruppi che si muovono insieme.

Finestre nel frontend — 4 tipi

1. CSS pane — editor CSS in tempo reale nella scheda

Apri un pannello accanto alla pagina, scrivi CSS, vedi i cambiamenti dal vivo. Auto-save nella scheda. Persistente per scheda tramite sessionStorage. Nessun commit da nessuna parte, muore con la scheda. Perfetto per «devo vedere come apparirebbero i pulsanti in un altro colore, ma non lo sto ancora deployando».

→ CSS pane: un editor CSS in tempo reale su qualsiasi pagina, senza DevTools

2. JS Console — REPL con cronologia ↑↓

L'alternativa REPL ai DevTools. Eval Ctrl+Enter. Le frecce su/giù scorrono la cronologia (sessionStorage per scheda). L'output cattura solo il sync — i task async finiscono direttamente nei DevTools. Perfetto per controlli ad-hoc («quanti elementi hanno la classe X?», «cosa restituisce questa API?»).

→ JS Console: REPL su qualsiasi pagina, senza DevTools

3. JS pane — script Run-on-demand

Codice JS persistente con un pulsante ▶. Ctrl+Enter lo esegue. Stato dirty (indizio visivo che hai modifiche non eseguite). Overlay di errore (barra rossa nel pane senza F12). Perfetto per script distruttivi («svuota il carrello», «elimina la bozza», «resetta il modulo») — non vuoi che si auto-eseguano, vuoi cliccare ▶ su richiesta.

→ JS pane: script Run-on-demand, niente auto-run a ogni visita

4. Output Console — visualizzatore di log in sola lettura

Il 4° tipo di finestra — ascoltare, non scrivere. Cattura tutti i console.log/warn/error/info/debug della pagina (sync + async) più il canale window.JUSTZIX.log() dedicato. viewMode [C/J/C+J] commuta la visibilità. Filtri per livello, campo di ricerca. 2000 righe. Immune alla CSP (privilegi dell'estensione).

→ Output Console: osservare il console.log della pagina in un pannello della scheda

Tipi di azione — 6 nella barra delle azioni

La barra delle azioni è una barra flottante di pulsanti che invochi manualmente. Sei tipi di azione — tutti vivono nella stessa barra, ognuno con la propria semantica:

TOGGLE3 — segmented control a 3 stati

Segmented control con esattamente 3 stati. Ogni stato riceve la propria label, value, colore e codice JS. Miglior caso d'uso: switcher di ambiente Dev/Staging/Prod (ogni stato = sottodominio diverso), override del tema Light/Dark/Auto, feature flag a tre stati Off/Default/Force-on. 5 colori configurabili (bg/testo attivo + bg/hover/testo inattivo).

→ TOGGLE3: segmented control a 3 stati nella barra delle azioni

SLIDER — un controller di variabili CSS a portata di dito

<input type="range"> nativo nella barra. Drag dal vivo = salva la memory (senza eseguire il codice), rilascio = esegue il codice con value come Number. 4 colori separati (bg, riempimento, testo della label, testo del value). Caso d'uso: controller di luminosità (filter:brightness 50-150%), dimensione del font per l'accessibilità, throttle della velocità di animazione per il debug, qualsiasi variabile CSS che vuoi girare come un fader fisico.

→ SLIDER: un controller di variabili CSS nella scheda

API — due namespace, due ruoli

JustZix installa due namespace separati nel MAIN world. Ognuno ha il proprio scopo e ciclo di vita — deliberatamente non si mescolano:

• window.JUSTZIX (logger) — alias primario da v2.13.76. Nome di brand = rischio di collisione trascurabile con gli script della pagina. JUSTZIX.log/.warn/.error/.info/.debug fa dispatch verso la Output Console (kind='jz'); NON inoltra alla console nativa. Alias: window.__JUSTZIX__ (sempre), window.JZ (solo quando libero).
• window.JZ (helper per le azioni) — opera su elementi data-jz-action-id nel DOM. JZ.click(label) / JZ.value(label) / JZ.setValue(label, v) / JZ.action(label). Può essere occupato dalla pagina (Google Ads ha il proprio window.JZ) → fallback: document.querySelector('[data-jz-action-id="..."]') nativo.

→ window.JZ + window.JUSTZIX: API programmatica + logger

Snap connections — disporre in dashboard

Sei tipi di elementi (4 tipi di pane + barra delle azioni + pulsante flottante) vivono in uno spazio di ID condiviso. Trascina uno entro ≤20px da un altro → si agganciano in un gruppo. Trascina il gruppo → tutto si muove insieme. Il posizionamento per anchor (TL/TR/BL/BR) mantiene il layout stabile durante i ridimensionamenti della finestra. Questo trasforma «alcuni strumenti separati» in «una dashboard configurabile per dominio».

→ Snap connections: gruppi di pannelli — una mini-dashboard nella scheda

Come metterlo insieme — 3 setup pratici

Setup A: «toolbar QA personale»

In alto a destra, anchor TR:

• Barra delle azioni: 3-4 BUTTON per i flussi più comuni («Login as test user», «Fill demo data», «Reset cart»)
• JS pane sotto la barra: script distruttivi / operazioni in massa (Run-on-demand, ▶)
• Output Console sotto il JS pane: monitora JUSTZIX.log + la console della pagina
• Tutto agganciato verticalmente. F5 → torna negli stessi posti.

Setup B: «editor CSS in tempo reale»

Lato sinistro, anchor TL:

• CSS pane (stretto, alto): editing dal vivo
• Barra delle azioni con uno SLIDER «Brightness» + un TOGGLE3 «Theme»
• Snap bordo a bordo — slider + editor CSS in un unico stream

Setup C: «overlay di debug»

Barra in basso, anchor BL:

• Barra delle azioni con un BUTTON «Capture state» + un TOGGLE3 «Env DEV/STG/PROD»
• Output Console stretta sopra la barra (altezza ~200px): log in streaming non-stop
• Sembra un pannello DevTools del browser, ma è parte della scheda (non sparisce quando minimizzi F12)

Il primo minuto — cosa fare subito dopo l'installazione

1. Installa JustZix (Scarica qui). Clicca l'icona nella barra degli strumenti dopo l'installazione.
2. Crea la tua prima regola nelle opzioni (estensioni → opzioni JustZix). Scegli «ovunque» come scope.
3. Nell'editor CSS digita: body { background: lightyellow !important; } — salva. Visita qualsiasi sito → lo sfondo diventa giallo.
4. Aggiungi un'azione BUTTON a questa regola: label «🐛 Debug», codice JUSTZIX.log('debug');
5. Aggiungi una Output Console nella sezione «Finestre» → salva. Torna sulla pagina. Clic «🐛 Debug» → una riga nella Output Console.
6. Trascina la Output Console sotto la barra delle azioni, lasciala agganciare. Hai la tua prima mini-dashboard.

3 minuti da zero a un setup funzionante. Tutto persistente — F5 / nuova scheda / riavvio del browser: il setup torna.

Lista completa degli articoli per componente

Se vuoi conoscenza più approfondita sui singoli componenti:

• Finestre nel frontend: CSS pane · JS Console · JS pane · Output Console · Snap connections
• Tipi di azione: TOGGLE3 · SLIDER
• API e helper: window.JZ + JUSTZIX helpers
• Tutorial pratici: Nascondi i banner dei cookie · Modalità scura per qualsiasi sito · Debug di GTM senza dev · Scorciatoie da tastiera personalizzate · Toolbar QA da zero · Marker di ambiente

JustZix è un'estensione open-source, completamente gratuita, senza account, senza server. Tutto gira localmente nel browser. Installala e costruisci la tua prima mini-IDE in 3 minuti.