← Volver a las funciones
Free

Inspector CSS

La herramienta CSS Inspector es una potente herramienta para desarrolladores que te permite ver todas las propiedades CSS de cualquier elemento simplemente pasando el ratón por encima. Haz clic para bloquear los estilos, edítalos directamente y mira cómo los cambios se aplican a la página al instante.

Ya sea que estés depurando un problema de diseño, haciendo ingeniería inversa de un diseño que admiras, o simplemente comprobando valores de espaciado y tipografía, CSS Inspector te ofrece todo lo que necesitas en un panel flotante limpio. A diferencia de las DevTools del navegador, no se interpone en tu camino — nada de paneles acoplados ni de un viewport redimensionado. Solo pasa el cursor, haz clic e inspecciona. La herramienta muestra los estilos computados (lo que el navegador realmente renderiza), no solo el CSS tal como lo escribiste. Esto significa que ves los valores reales una vez resueltas la herencia, la especificidad y la cascada — los mismos valores que determinan lo que ven los usuarios en pantalla.

Inspeccionar un elemento nunca provoca un reflow ni un repaint de la página, así que puedes explorar libremente sin preocuparte por alterar la posición de scroll, las animaciones o el estado de JavaScript. Los pseudo-elementos como ::before y ::after también son compatibles — pasa el cursor sobre el elemento padre y el panel muestra los estilos del contenido generado por separado de los del propio elemento. Las propiedades personalizadas de CSS (variables) se resuelven a su valor computado final, pero el panel también te muestra el nombre de la variable que lo produjo, para que puedas rastrear un color o un valor de espaciado hasta su token de diseño original en lugar de ver solo un número de píxeles sin contexto.

En el uso diario, la mayoría de los desarrolladores recurren a CSS Inspector docenas de veces por sesión — para comprobar por qué se colapsó un margin, confirmar un código hexadecimal antes de copiarlo en una hoja de estilos, o verificar que un breakpoint de media query realmente aplicó los estilos que debía. Como es un panel flotante y no un modo que ocupa todo el navegador, puedes mantenerlo abierto mientras cambias de pestaña para revisar tu editor de código o un archivo de diseño, y luego volver directamente al mismo elemento sobre el que estabas trabajando sin perder tu posición.

Vista previa en vivo
example.com/landing-page CSS Inspector: ACT
Pasa el cursor sobre cualquier elemento para inspeccionar su CSS
Regístrate ahora
button.cta-primary
180 × 48 top: 312px · left: 40px
Propiedades CSS Bloqueado
<button> .cta-primary
MODELO DE CAJA
margin: 0
padding: 12 24
180 × 48
Tipografía
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Diseño y espaciado
displayinline-flex
padding12px 24px
border-radius8px
Apariencia
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copiar todo el CSS Editar
Características clave

Visualización de propiedades en tiempo real

Consulta fuentes, tamaños, colores, espaciados y más al instante al pasar el ratón por encima.

Haz clic para bloquear

Haz clic en el elemento para bloquear el panel y evitar que desaparezca, permitiendo una inspección detallada.

Edición de estilos en vivo

Haz doble clic sobre los valores para cambiarlos directamente. Tus cambios se reflejarán al instante en la página.

Copia con un solo clic

Copia propiedades individuales o todo el bloque de estilos de diseño a tu portapapeles con un solo clic.

Visualización del Box Model

Mira los valores de margin, border y padding de manera visual.

Tamaño y posición del elemento

Muestra el ancho, el alto y la posición del elemento en la página.

Qué puedes inspeccionar

El CSS Inspector muestra más de 40 propiedades:

Tipografía

  • 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

Diseño

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

Fondo

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

Efectos

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Casos de uso comunes

Solución de problemas de diseño

Inspecciona elementos mal alineados con precisión.

Aprende de diseños existentes

Estudia los estilos de tus sitios web favoritos.

Experimentos rápidos de diseño

Prueba cambios antes de escribir código.

Revisiones con clientes

Muestra cambios en vivo durante las reuniones.

Extracción de estilos

Obtén fácilmente el código CSS para nuevos elementos.

Cómo usarlo
1

Activa el CSS Inspector

Haz clic en el icono del CSS Inspector en la barra de herramientas de DevSuite Pro.

2

Pasa el ratón para inspeccionar

Mueve el cursor por encima de cualquier elemento para ver sus propiedades.

3

Haz clic para bloquear

Haz clic en el elemento para fijar el panel de información.

4

Edita los estilos

Haz doble clic sobre los valores para ajustarlos.

5

Copia y utiliza

Copia el código actualizado y utilízalo en tu proyecto.

¿Listo para probarlo?

Instala DevSuite Pro gratis y desbloquea más de 64 herramientas de desarrollador para tu navegador.

Añadir a Chrome Añadir a Edge Añadir a FireFox