Ispeziona
Inspector
Usa l'inspector di Pickode: box model e tooltip, modifica live del CSS con le frecce, misure con Alt, preset di griglia, CSS salvato per sito, colori e font.
Aggiornata il 20 ottobre 2026
L’inspector è il punto da cui parte quasi tutto in Pickode. Ti serve per vedere com’è fatto un elemento, modificarlo live, misurarlo e poi tenere le modifiche per quel sito o esportarlo.
Come si usa
-
Premi Alt+I su un sito qualsiasi. Passa sopra un elemento per vedere il box model e un tooltip con dimensioni, font, colori e contrasto WCAG.
-
Clicca per selezionarlo. Spostati sul genitore o sui figli finché hai il blocco che ti serve.
-
Modifica le proprietà live: metti il cursore su un valore e premi ↑ o ↓. Puoi anche modificare il testo, oppure nascondere o eliminare l’elemento.
-
Tieni il risultato: copia il selettore o l’HTML, fai uno screenshot dell’elemento, esportalo o salva le modifiche come CSS per il sito.
-
Premi Esc per chiudere un livello alla volta.
Cosa include l’inspector
| Strumento | Dettagli |
|---|---|
| Tooltip | Dimensioni, font, colori e contrasto WCAG dell’elemento sotto il puntatore |
| Modifica live | Valori delle proprietà con ↑/↓, modifica del testo, nascondi o elimina |
| Navigazione e copia | Genitore/figlio, copia selettore, copia HTML, screenshot dell’elemento |
| Shadow DOM | Entra anche negli shadow root chiusi |
| Misure | Tieni premuto Alt su un altro elemento per le distanze in px |
| Griglia | Colonne, gutter, larghezza massima, margini e baseline; preset Bootstrap, Tailwind e Bricks |
Misure e griglia
Con un elemento selezionato, tieni premuto Alt e passa sopra un altro: Pickode mostra le distanze tra i due in pixel. Per controllare gli allineamenti, sovrapponi una griglia alla pagina e imposta colonne, gutter, larghezza massima, margini e baseline, oppure parti dal preset Bootstrap, Tailwind o Bricks.
Salva modifiche sul sito
Le modifiche nell’inspector sono live ma temporanee. Con “Salva modifiche sul sito” salvi il CSS per quel dominio e Pickode lo riapplica a ogni visita. Comodo per provare una correzione sul sito di un cliente prima di mettere mano al tema.
Colori e font
Dalla stessa barra apri altri due strumenti di ispezione:
- Colori: la palette della pagina divisa per testi, sfondi e bordi, in HEX, RGB o HSL, con un contagocce per prendere qualsiasi colore e palette da salvare. In Firefox il contagocce lavora su uno screenshot della pagina con una lente.
- Font: tutte le famiglie, i pesi e le dimensioni usati nella pagina e i font
@font-faceche carica davvero. Il font di ogni elemento compare anche nel tooltip dell’inspector.
Free e Pro
| Free | Pro | |
|---|---|---|
| Inspector, box model, modifica live, misure, griglia | ✓ | ✓ |
| Colori, contagocce, font | ✓ | ✓ |
| CSS per sito | 1 sito | Illimitato |
| Export dall’inspector | HTML + CSS 5 a settimana; altri formati in anteprima parziale | Tutti i formati |
Correlati
Ancora bloccato?Contattaci