Estilos que importan
Sin reglas tachadas: fuente, tamaño, peso, interlineado, color, fondo, bordes, radio y sombra.
Inspección de diseño
Inspector CSS: pasa el ratón y ve cómo está hecha la página
El inspector CSS de Smart Design Inspector muestra los estilos calculados, la caja, los márgenes, los paddings y las distancias de cualquier elemento al pasar el ratón, sin abrir las herramientas de desarrollador.
Inspeccionar, medir distancias y la regla: gratis para siempre
h1 · tucliente.example
- Fuente
- Inter
- Tamaño
- 48 px
- Peso
- 600
- Interlineado
- 1,1
- Color
- #0B0B0B
- Fondo
- transparente
- Bordes
- —
- Radio
- 0
- Sombra
- —
Copiar CSS
margin024
border0
padding0
560 × 106
| Hasta el botón | 24 px |
| Hasta el párrafo | 16 px |
| Hasta el borde izquierdo | 64 px |
01
DevTools no está pensado para diseñar
El problemaEn DevTools, para saber el tamaño de letra de un titular tienes que abrir el panel, buscar el elemento en el árbol y bajar por una lista de reglas tachadas. Para saber la distancia entre dos bloques, sumar márgenes a mano.
02
Qué ves al pasar el ratón
4 cosasCaja
Ancho, alto, márgenes y paddings dibujados sobre el elemento.
Distancias
Fija un elemento con un clic y pasa el ratón por otro: ves los píxeles entre los dos.
Regla
Mantén pulsada Alt y mide cualquier zona de la página.
03
Pruébalo en esta página
Sin instalarUna web de ejemplo y el panel del inspector, sin instalar nada. Pasa el ratón por un elemento, o elígelo en la lista, y ves sus estilos, su caja y la distancia al elemento de debajo.
Elige un elemento
Smart Design Inspector · CSSh1.hero-title
- Fuente
- —
- Tamaño
- —
- Peso
- —
- Interlineado
- —
- Color
- —
- Fondo
- —
- Bordes
- —
- Radio
- —
- Sombra
- —
- Caja
- —
- Margen
- —
- Padding
- —
Distancia hasta abajo
—
Web de ejemplo · los valores se leen de esta página
04
Después de inspeccionar
4 funciones| Gratis0 €para siempre | Pro49 €pago único | |
|---|---|---|
| Inspeccionar al pasar el ratón: CSS calculado, caja, márgenes y paddings | ||
| Copiar el CSS de cada elemento | ||
| Medir distancias entre elementos y regla | ||
| Copiar una sección como JSX + Tailwind o HTML/CSS | — | Acceso anticipado gratis |
| Exportar el sistema de diseño | — | Acceso anticipado gratis |
¿Es gratis?
Sí. Inspeccionar, medir distancias y la regla son gratis para siempre.
¿En qué se diferencia de DevTools?
Enseña solo los estilos que se aplican, sin reglas tachadas, y dibuja medidas y distancias sobre la página. DevTools sigue siendo mejor para depurar JavaScript o la red.
¿Funciona en cualquier web?
En cualquier página que se abra en Chrome. Las páginas internas del navegador y la propia Chrome Web Store no dejan que las extensiones las lean.
¿Puedo copiar el CSS?
Sí, el de cada elemento. Para copiar una sección entera como JSX + Tailwind o HTML/CSS está la función Pro.
¿En qué navegadores y sistemas funciona?
En Chrome, Edge, Brave, Arc, Opera y Vivaldi, en Windows, Mac y Linux, desde la 1.0. Funciona igual en todos porque la extensión la ejecuta el navegador, no el sistema. El código está preparado para llevarla a Firefox y Safari sin reescribirla. Mientras está en desarrollo, puede haber cambios.
Lista de espera
Sé de los primeros en probarlo
Smart Design Inspector está en desarrollo. Déjanos tu email y te avisamos el día que salga en la Chrome Web Store, con las 3 funciones Pro gratis en acceso anticipado.
Un email el día del lanzamiento y pocos más · Baja con un clic