← Tutti gli articoli

Finestre nel frontend

TEMP pane — finestre di sviluppo usa-e-getta sotto una scorciatoia Ctrl+Alt

Non ogni modifica merita una regola permanente. Atterri sulla pagina di qualcun altro, hai una domanda per il DOM, o vuoi inserire un po' di CSS per un minuto — tutto qui. È per questo che esistono i TEMP pane: finestre richiamate da una scorciatoia su qualsiasi pagina, usate per un attimo e sparite al ricaricamento. Zero configurazione, zero traccia nelle tue regole.

In cosa TEMP differisce da una finestra normale

JustZix ha quattro tipi di finestre nella pagina — CSS pane, JS pane, JS Console e Output Console. Normalmente le crei nel pannello dell'estensione e appartengono a una regola: si salvano, tornano dopo il ricaricamento, si sincronizzano tra dispositivi. Ottimo per ciò che usi ogni giorno.

Un TEMP pane è lo stesso tipo di finestra, ma effimero. Non nasce da una regola — nasce da una scorciatoia da tastiera. Vive nel sessionStorage della scheda, quindi:

Quattro scorciatoie

ScorciatoiaFinestra TEMPPer cosa
Ctrl+Alt+GCSS panemodifica dal vivo del CSS della pagina
Ctrl+Alt+HJS panecodice JS eseguito su richiesta
Ctrl+Alt+JJS ConsoleREPL — digita, Invio, risultato
Ctrl+Alt+KOutput Consoleosserva il console.log della pagina

Le scorciatoie funzionano globalmente — non serve cliccare prima nell'estensione. La premi sulla pagina e la finestra è lì.

Premi di nuovo per chiudere — toggle

La scorciatoia è un interruttore. La prima pressione crea la finestra, la seconda la chiude. Nessun rischio di impilare per sbaglio cinque finestre TEMP CSS una sull'altra — c'è al massimo una finestra TEMP per tipo alla volta.

Puoi anche chiuderla con la × nell'intestazione della finestra, o con il clic destro sulla barra e «Chiudi». Dalla v3.2.2 entrambi i modi si limitano a nascondere la finestra — il contenuto, il log e la geometria restano in attesa nel sessionStorage finché non riapri una finestra dello stesso tipo o chiudi la scheda. Questo risolve un precedente problema di perdita di dati a causa di un clic accidentale sulla ×.

Il pulsante «clear» nell'intestazione — svuotamento controllato (v3.2.3)

Quando invece vuoi svuotare una finestra TEMP CSS o TEMP JS, l'intestazione mostra un pulsante con l'icona del cestino — «clear» — proprio accanto al pulsante ×. Lo svuotamento entra nella cronologia dell'undo (Ctrl+Z lo annulla) e, per il TEMP CSS, aggiorna immediatamente lo <style> dal vivo sulla pagina. In questo modo si separano due intenti: nascondere la finestra (×) e svuotarne il contenuto (cestino).

Sparita al ricaricamento — ed è proprio questo il punto

Non è una limitazione, è tutta l'idea. Un TEMP pane esiste perché tu possa controllare qualcosa in fretta e non lasciare disordine. Hai aperto la pagina di un cliente, premuto Ctrl+Alt+J, controllato document.querySelectorAll('.price').length, premuto F5 — e la pagina è di nuovo pulita, come se non fossi mai stato lì.

Se ti sorprendi a digitare lo stesso codice TEMP per la terza volta — è il segnale di trasformarlo in una regola permanente.

Un colore diverso — non la confonderai con una finestra salvata

Le finestre persistenti sono colorate per tipo (verde, ambra, viola, smeraldo). Le finestre TEMP ricevono una palette separata — arancione, rosso, rosa, ciano — sull'intero bordo della finestra, sull'accento dell'intestazione e sul punto di stato. Un'occhiata e sai che è una finestra effimera, non la tua configurazione salvata.

Caso d'uso 1 — fare il debug della pagina altrui senza traccia

Un classico. Capiti su una pagina che si comporta in modo strano. Ctrl+Alt+K apre l'Output Console — vedi cosa registra la pagina e quali errori lancia. Ctrl+Alt+J apre una JS Console per interrogare il DOM. Fatto — ricarica, sparita.

Caso d'uso 2 — un CSS una tantum senza ingombrare le regole

Vuoi disattivare un header sticky per cinque minuti perché copre ciò che stai leggendo. Ctrl+Alt+G, digiti header{position:static!important}, leggi in pace, chiudi. Non è stata creata alcuna regola da ripulire in seguito.

Caso d'uso 3 — un REPL in produzione

Vuoi controllare il comportamento dell'API su una pagina dal vivo. Ctrl+Alt+H apre un TEMP JS pane — incolla fetch('/api/...').then(r=>r.json()).then(console.log), eseguilo col pulsante Run, il risultato atterra nella console. Dopo il ricaricamento il codice è sparito — non resta in alcuna regola che qualcuno potrebbe avviare per sbaglio in seguito.

Perché proprio G/H/J/K

Sono tasti adiacenti della mano destra, in stile cluster Vim — comodi sotto le dita. Ctrl+Alt+H/J/K/L sarebbe più naturale, ma Ctrl+Alt+L su Linux (GNOME) blocca lo schermo — il sistema operativo cattura la scorciatoia prima che l'estensione la veda. Quindi abbiamo spostato l'intero cluster di un tasto a sinistra. G/H/J/K sono liberi su tutti i browser e sistemi operativi diffusi.

Trappole

Vedi anche

Installa JustZix — e tieni quattro finestre di sviluppo a una scorciatoia di distanza su ogni pagina.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso