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. Lo strumento mostra gli stili calcolati (quelli effettivamente renderizzati dal browser), non solo il CSS scritto. Questo significa che vedi i valori reali dopo che ereditarietà, specificità e cascata sono state risolte — gli stessi valori che determinano ciò che gli utenti vedono a schermo.
Ispezionare un elemento non provoca mai un reflow o un repaint della pagina, quindi puoi esplorare liberamente senza preoccuparti di disturbare la posizione di scorrimento, le animazioni o lo stato JavaScript. Sono supportati anche gli pseudo-elementi come ::before e ::after — passa il cursore sull'elemento genitore e il pannello mostra gli stili del contenuto generato separatamente da quelli dell'elemento stesso. Le proprietà personalizzate CSS (variabili) vengono risolte al loro valore calcolato finale, ma il pannello mostra anche il nome della variabile che lo ha prodotto, così puoi risalire da un colore o da un valore di spaziatura fino alla sua fonte nei design token, invece di vedere solo un numero di pixel grezzo.
Nell'uso quotidiano, la maggior parte degli sviluppatori ricorre all'Ispettore CSS decine di volte in una sessione — per capire perché un margine è collassato, confermare un codice esadecimale prima di copiarlo in un foglio di stile, o verificare che un breakpoint di media query abbia effettivamente applicato gli stili previsti. Essendo un pannello fluttuante e non una modalità a schermo intero del browser, puoi tenerlo aperto mentre cambi scheda per controllare il tuo editor di codice o un file di design, e poi tornare esattamente all'elemento su cui avevi passato il cursore senza perdere il tuo punto di lavoro.
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 64 strumenti per sviluppatori per il tuo browser.