Gli stili che contano
Senza regole barrate: font, dimensione, peso, interlinea, colore, sfondo, bordi, raggio e ombra.
Ispezione del design
Ispettore CSS: passa il mouse e vedi com’è fatta la pagina
L’ispettore CSS di Smart Design Inspector mostra gli stili calcolati, il box, i margini, i padding e le distanze di qualsiasi elemento al passaggio del mouse, senza aprire gli strumenti per sviluppatori.
Ispezionare, misurare le distanze e il righello: gratis per sempre
h1 · iltuocliente.example
- Font
- Inter
- Dimensione
- 48 px
- Peso
- 600
- Interlinea
- 1,1
- Colore
- #0B0B0B
- Sfondo
- trasparente
- Bordi
- —
- Raggio
- 0
- Ombra
- —
Copia CSS
margin024
border0
padding0
560 × 106
| Fino al pulsante | 24 px |
| Fino al paragrafo | 16 px |
| Fino al bordo sinistro | 64 px |
01
DevTools non è pensato per il design
Il problemaIn DevTools, per sapere la dimensione del testo di un titolo devi aprire il pannello, cercare l’elemento nell’albero e scorrere un elenco di regole barrate. Per sapere la distanza tra due blocchi, devi sommare i margini a mano.
02
Cosa vedi al passaggio del mouse
4 coseBox
Larghezza, altezza, margini e padding disegnati sull’elemento.
Distanze
Fissa un elemento con un clic e passa il mouse su un altro: vedi i pixel che li separano.
Righello
Tieni premuto Alt e misura qualsiasi zona della pagina.
03
Provalo in questa pagina
Senza installareUn sito di esempio e il pannello dell’ispettore, senza installare nulla. Passa il mouse su un elemento, o sceglilo dall’elenco, e vedi i suoi stili, il box e la distanza dall’elemento sottostante.
Scegli un elemento
Smart Design Inspector · CSSh1.hero-title
- Font
- —
- Dimensione
- —
- Peso
- —
- Interlinea
- —
- Colore
- —
- Sfondo
- —
- Bordi
- —
- Raggio
- —
- Ombra
- —
- Box
- —
- Margine
- —
- Padding
- —
Distanza verso il basso
—
Sito di esempio · i valori vengono letti da questa pagina
04
Dopo l’ispezione
4 funzioni| Gratis0 €per sempre | Pro49 €pagamento unico | |
|---|---|---|
| Ispezionare al passaggio del mouse: CSS calcolato, box, margini e padding | ||
| Copiare il CSS di ogni elemento | ||
| Misurare le distanze tra elementi e righello | ||
| Copiare una sezione come JSX + Tailwind o HTML/CSS | — | Accesso anticipato gratis |
| Esportare il design system | — | Accesso anticipato gratis |
È gratis?
Sì. Ispezionare, misurare le distanze e il righello sono gratis per sempre.
In cosa si differenzia da DevTools?
Mostra solo gli stili applicati, senza regole barrate, e disegna misure e distanze sulla pagina. Per il debug di JavaScript o della rete DevTools resta la scelta migliore.
Funziona su qualsiasi sito?
Su qualsiasi pagina che si apra in Chrome. Le pagine interne del browser e lo stesso Chrome Web Store non permettono alle estensioni di leggerle.
Posso copiare il CSS?
Sì, quello di ogni elemento. Per copiare un’intera sezione come JSX + Tailwind o HTML/CSS c’è la funzione Pro.
Su quali browser e sistemi funziona?
Su Chrome, Edge, Brave, Arc, Opera e Vivaldi, su Windows, Mac e Linux, dalla 1.0. Funziona allo stesso modo ovunque perché è il browser a eseguire l’estensione, non il sistema. Il codice è pronto per portarla su Firefox e Safari senza riscriverla. Durante lo sviluppo potrebbero esserci cambiamenti.
Lista d’attesa
Sii tra i primi a provarlo
Smart Design Inspector è in fase di sviluppo. Lasciaci la tua email e ti avviseremo il giorno in cui arriverà sul Chrome Web Store, con le 7 funzioni Pro gratis in accesso anticipato.
Un’email il giorno del lancio e poche altre · Disiscrizione con un clic