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 depurant un problema de disseny, com si estàs fent enginyeria inversa d'un disseny que admires, o simplement volent comprovar ràpidament valors d'espaiat i tipografia, CSS Inspector et dona tot el que necessites en un panell flotant i net. A diferència de les DevTools del navegador, no interfereix en la teva feina: no hi ha panells acoblats ni es redimensiona el viewport. Només cal passar el ratolí per sobre, fer clic i inspeccionar. L'eina mostra els estils calculats (computed styles), és a dir, el que el navegador realment renderitza, no només el CSS tal com l'has escrit. Això vol dir que veus els valors reals després que s'hagin resolt l'herència, l'especificitat i la cascada, els mateixos valors que afecten el que veuen els usuaris a la pantalla.
Inspeccionar un element mai provoca un reflow ni un repaint de la pàgina, així que pots explorar lliurement sense preocupar-te de pertorbar la posició de desplaçament, les animacions o l'estat de JavaScript. També té suport per a pseudoelements com ::before i ::after: passa el ratolí per sobre de l'element pare i el panell mostra els estils del contingut generat per separat dels estils propis de l'element. Les propietats personalitzades de CSS (variables) es resolen al seu valor calculat final, però el panell també et mostra el nom de la variable que l'ha generat, de manera que pots rastrejar un color o un valor d'espaiat fins al seu token de disseny d'origen, en lloc de veure només un número de píxels sense context.
En l'ús diari, la majoria de desenvolupadors recorren a CSS Inspector desenes de vegades en una sola sessió: per comprovar per què s'ha col·lapsat un marge, confirmar un codi hexadecimal abans de copiar-lo a un full d'estils, o verificar que un breakpoint de media query realment ha aplicat els estils que havia d'aplicar. Com que és un panell flotant i no un mode que ocupa tot el navegador, el pots mantenir obert mentre canvies de pestanya per revisar el teu editor de codi o un fitxer de disseny, i tornar directament al mateix element sense perdre el fil.
Consulta fonts, mides, colors, espais i més a l'instant en passar per sobre de qualsevol element.
Fes clic a l'element per bloquejar el panell i evitar que desaparegui, permetent una inspecció detallada.
Fes doble clic sobre els valors per canviar-los directament. Els teus canvis es reflectiran a l'instant a la pàgina.
Copia propietats individuals o tot el bloc d'estils de disseny al teu porta-retalls amb un sol clic.
Mira els valors de margin, border i padding de manera visual.
Mostra l'amplada, l'alçada i la posició de l'element a la pàgina.
El CSS Inspector mostra més de 40 propietats:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorInspecciona elements mal alineats amb precisió.
Estudia els estils dels teus llocs web preferits.
Prova canvis abans d'escriure codi.
Mostra canvis en viu durant les reunions.
Obtén fàcilment el codi CSS per a nous elements.
Fes clic a la icona del CSS Inspector a la barra d'eines de DevSuite Pro.
Mou el cursor per sobre de qualsevol element per veure'n les propietats.
Fes clic a l'element per fixar el panell d'informació.
Fes doble clic sobre els valors per ajustar-los.
Copia el codi actualitzat i utilitza'l en el teu projecte.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 64 eines de desenvolupador per al teu navegador.