L'Ispettore CSS è un potente strumento gratuito per sviluppatori che ti consente di passare il cursore su qualsiasi elemento di una pagina web per visualizzare istantaneamente le sue proprietà CSS calcolate.
Che tu stia risolvendo un problema di layout, studiando un design che ammiri, o controllando rapidamente valori di spaziatura e tipografia, l'Ispettore CSS ti offre tutto ciò di cui hai bisogno in un pannello fluttuante pulito. A differenza dei DevTools del browser, non ti ostacola — nessun pannello ancorato, nessun viewport ridimensionato. Basta passare il cursore, cliccare e ispezionare.
Passa il cursore su qualsiasi elemento per vedere istantaneamente il suo CSS calcolato completo — famiglia di font, dimensione, altezza riga, colore, sfondo, padding, margine, bordo, border-radius, tipo display, posizione, z-index e altro.
Clicca su qualsiasi elemento per bloccare il pannello fluttuante. Questo ti permette di scorrere la pagina o leggere attentamente lunghi elenchi di proprietà senza che il pannello scompaia.
Fai doppio clic su qualsiasi valore CSS nel pannello per modificarlo direttamente. Cambia colori, regola la spaziatura, modifica i font — le modifiche vengono applicate istantaneamente alla pagina.
Copia una singola proprietà (es. "color: #333") o l'intero blocco di stili negli appunti con un clic. L'output copiato è CSS pulito e formattato pronto da incollare.
Visualizza il box model completo dell'elemento — area contenuto, padding, bordo e margine — mostrato visivamente con valori in pixel per ogni lato.
Visualizza larghezza, altezza e posizione dell'elemento sulla pagina. Il riquadro di delimitazione viene evidenziato con una sovrapposizione semitrasparente.
L'Ispettore CSS mostra valori calcolati per oltre 40 proprietà CSS, organizzate per categoria:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorPassa il cursore sugli elementi disallineati per vedere istantaneamente i valori di padding, margine e posizione.
Visita qualsiasi sito web che ammiri e ispeziona la sua tipografia, spaziatura e scelte di colore.
Usa la modifica dal vivo per testare cambiamenti visivi direttamente sulla pagina prima di scrivere codice.
Durante le revisioni di design, verifica rapidamente che il design implementato corrisponda al mockup.
Stai costruendo un nuovo componente che deve corrispondere a un design esistente? Ispeziona l'elemento di riferimento, copia tutte le proprietà CSS e incollale come stili base.
Apri il dock fluttuante di DevSuite Pro e clicca sull'icona dell'Ispettore CSS. Lo strumento si attiva immediatamente.
Sposta il mouse su qualsiasi elemento della pagina. Un pannello fluttuante appare mostrando nome tag, classi, dimensioni e proprietà CSS calcolate.
Trovato l'elemento da ispezionare in dettaglio? Cliccalo. Il pannello si blocca e non scompare quando muovi il mouse.
Fai doppio clic su qualsiasi valore CSS nel pannello bloccato per entrare in modalità modifica. Digita un nuovo valore e premi Invio. La pagina si aggiorna istantaneamente.
Clicca sull'icona copia accanto a qualsiasi proprietà, o usa il pulsante "Copia tutto il CSS" in fondo al pannello.
Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.