← Tornar a les funcions
Free

Inspector CSS

L'eina CSS Inspector és una potent eina per a desenvolupadors que et permet veure totes les propietats CSS de qualsevol element, simplement passant el ratolí per sobre. Fes clic per bloquejar els estils, edita'ls directament i mira com els canvis s'apliquen a la pàgina a l'instant.

Tant si estàs solucionant problemes de disseny com si estàs estudiant un lloc web que t'agrada, el CSS Inspector t'ofereix tot el que necessites en un panell flotant net. Inspecciona fàcilment sense obrir les eines de desenvolupador del navegador.

Vista prèvia en viu
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
Funcions clau

Visualització de propietats en temps real

Consulta fonts, mides, colors, espais i més a l'instant en passar per sobre de qualsevol element.

Fes clic per bloquejar

Fes clic a l'element per bloquejar el panell i evitar que desaparegui, permetent una inspecció detallada.

Edició d'estils en viu

Fes doble clic sobre els valors per canviar-los directament. Els teus canvis es reflectiran a l'instant a la pàgina.

Còpia amb un sol clic

Copia propietats individuals o tot el bloc d'estils de disseny al teu porta-retalls amb un sol clic.

Visualització del Box Model

Mira els valors de margin, border i padding de manera visual.

Mida i posició de l'element

Mostra l'amplada, l'alçada i la posició de l'element a la pàgina.

Què pots inspeccionar

El CSS Inspector mostra més de 40 propietats:

Tipografia

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Modelo de Caja

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Disseny

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Fons

  • background-color
  • background-image
  • background-size
  • background-position

Efectes

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Casos d'ús comuns

Solució de problemes de disseny

Inspecciona elements mal alineats amb precisió.

Aprèn de dissenys existents

Estudia els estils dels teus llocs web preferits.

Experiments ràpids de disseny

Prova canvis abans d'escriure codi.

Revisions per a clients

Mostra canvis en viu durant les reunions.

Extracció d'estils

Obtén fàcilment el codi CSS per a nous elements.

Com utilitzar-lo
1

Activa el CSS Inspector

Fes clic a la icona del CSS Inspector a la barra d'eines de DevSuite Pro.

2

Passa el ratolí per inspeccionar

Mou el cursor per sobre de qualsevol element per veure'n les propietats.

3

Fes clic per bloquejar

Fes clic a l'element per fixar el panell d'informació.

4

Edita els estils

Fes doble clic sobre els valors per ajustar-los.

5

Copia i utilitza

Copia el codi actualitzat i utilitza'l en el teu projecte.

Llest per provar-ho? Inspector CSS?

Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.

Afegeix a Chrome Afegeix a Edge Afegeix a FireFox