Finestre nella pagina — CSS, JS e console
JustZix ti offre cinque tipi di finestre di sviluppo che si visualizzano direttamente sulla pagina visitata — nessun DevTools da aprire. Le trascini, le agganci bordo a bordo in una mini-dashboard e richiami una copia effimera con una sola scorciatoia.
Strumenti di sviluppo direttamente nella pagina
JustZix visualizza le sue finestre di sviluppo direttamente all\'interno della pagina che stai visitando — non in un pannello DevTools, non in una scheda separata. Puoi trascinare ogni finestra dove vuoi, agganciarne il bordo a un\'altra e unirne diverse in una mini-dashboard accanto al contenuto reale.
Ogni finestra esiste in due varianti: persistente — legata a una regola precisa e caricata insieme a essa — e temporanea (TEMP), richiamata da una scorciatoia per una prova veloce. Sei tu a decidere se una finestra resta o sparisce al ricaricamento.
Il CSS pane e il JS pane
Il CSS pane è un editor di stili in tempo reale: digiti una regola e vedi la pagina cambiare nello stesso istante — senza salvare, senza ricaricare. Il suo contenuto è conservato separatamente per scheda, quindi ogni pagina ha la propria bozza.
Il JS pane è un editor JavaScript eseguito su richiesta. Il codice non parte da solo — lo esegui con il pulsante Run o la scorciatoia Ctrl+Enter quando è pronto. Sopra entrambi gli editor una barra di ricerca funziona con contatore dei risultati, evidenziazione e salti Ctrl+Alt+←/→.
La JS Console e l'Output Console
La JS Console è un REPL nella pagina: digiti un\'espressione, premi Invio, ottieni un risultato e usi le frecce su e giù per richiamare i comandi precedenti — proprio come in un terminale.
L\'Output Console è un visualizzatore di log della pagina con sei schede contate: All, JZconsole, console.*, Network, errori e push a dataLayer. La scheda Network raccoglie le richieste di rete e ti permette di filtrarle per dominio, dimensione e tempo.
L'AI Helper
L\'AI Helper è un assistente IA integrato che si collega a OpenAI, Anthropic o Gemini. Esamina la struttura della pagina, testa il codice da solo nelle finestre TEMP e — solo dopo la tua approvazione — trasforma la soluzione funzionante in una regola CSS o JS pronta all\'uso.
Finestre TEMP
Le versioni TEMP sono le stesse finestre, ma effimere. Le richiami con scorciatoie: Ctrl+Alt+G apre il TEMP CSS pane, Ctrl+Alt+H il TEMP JS pane, Ctrl+Alt+J la TEMP JS Console e Ctrl+Alt+K la TEMP Output Console.
Puoi trascinare, agganciare e ridimensionare le finestre TEMP esattamente come quelle persistenti. Ogni tipo di finestra ricorda separatamente la sua ultima dimensione (per dispositivo) — un doppio clic sulla barra del titolo alterna tra quella dimensione memorizzata e quella predefinita 380×240. Colore, font e dimensione di ogni finestra si impostano dal menu del clic destro.
La chiusura con × non cancella più il contenuto — la finestra viene solo nascosta e il suo stato (codice, log, geometria) attende nella sessione finché non riapri una finestra dello stesso tipo. Quando vuoi davvero ripartire da zero, le intestazioni di TEMP CSS e TEMP JS hanno un pulsante "cancella" (icona cestino, la cancellazione va nello storico undo). I dati delle finestre TEMP scompaiono solo alla chiusura della scheda — è la portata naturale della sessione.
Pannello di modifica in una finestra separata
A volte è più comodo avere il pannello di modifica accanto alla pagina invece che al suo posto. La scorciatoia Ctrl+Alt+I apre il pannello in una finestra del browser separata, seleziona automaticamente la prima regola attiva che corrisponde alla pagina corrente e atterra sulla scheda CSS. Ctrl+Alt+O fa lo stesso per la scheda JS, e Ctrl+Alt+P per la scheda Azioni. Se nessuna regola della pagina corrisponde, il pannello si apre vuoto, pronto per crearne una nuova.
Usate in un pannello già aperto, le stesse scorciatoie non creano una seconda finestra — cambiano la scheda della regola attiva. Il riconoscimento avviene sul tasto fisico, quindi le scorciatoie funzionano su ogni layout di tastiera, incluso il polacco Programmers (AltGr non rompe più Ctrl+Alt+O).
Articoli del blog correlati
Articoli che approfondiscono questo argomento.