Screen Ruler

La regla visual definitiva para diseñadores y desarrolladores

SaaSApp

Sobre Screen Ruler

Screen Ruler va mucho más allá de las DevTools del navegador. Analiza visualmente flexbox y grid, inspecciona gradientes con sus color stops, simula pseudo-estados en múltiples elementos y convierte CSS a Tailwind.

Además incluye una pestaña de Page con previsualizaciones de rendimiento, SEO y redes sociales.

¿Qué es Screen Ruler?

Screen Ruler es una extensión para navegadores basados en Chromium que convierte cualquier página web en un lienzo medible. Al activarla (con el icono, el menú contextual o el atajo Alt/Option + Shift + S), basta con pasar el cursor sobre el contenido para ver tamaños, márgenes, paddings, nombres de etiqueta, clases e IDs. Si haces clic sobre un elemento, queda seleccionado y puedes medir distancias respecto a otros o subir y bajar por el árbol del DOM con atajos de teclado.

La información detallada aparece en un panel lateral: CSS computado del elemento seleccionado, con opción de copiarlo al portapapeles. La versión gratuita incluye además reglas horizontales y verticales con mira, selector de color, capturas recortadas de un elemento concreto, detección de fallos de contraste WCAG, avisos de problemas SEO habituales (títulos ausentes, varios H1, imágenes sin alt) e inspección de meta etiquetas con vista previa de cómo se verá la página al compartirla en Facebook, X y LinkedIn.

La versión PRO amplía el conjunto con edición de CSS en vivo con soporte de @media y forzado de pseudo-estados, modo responsive con emulador de dispositivos, generador de clases de Tailwind v4, visualización de Flexbox y Grid, gradientes, sombras, animaciones y transiciones, extracción de imágenes, SVG, paletas de color y tipografías, detección de más de 180 tecnologías, breakpoints, modo rayos X y análisis del peso de la página.

Características principales de Screen Ruler

Medición al vuelo del tamaño en píxeles de cualquier elemento y de la distancia entre dos elementos, con selección de padre o hijo mediante atajos.
Panel lateral con el CSS computado del elemento seleccionado y botón para copiarlo al portapapeles.
Reglas horizontales y vertical con mira, selector de color y capturas de pantalla recortadas al elemento elegido.
Revisión de accesibilidad y SEO: detecta fallos de contraste WCAG con recomendaciones y problemas como títulos ausentes, H1 duplicados o imágenes sin texto alternativo.
Inspección de meta etiquetas SEO, Open Graph y Twitter Cards, con previsualización de cómo se comparte la página en Facebook, X y LinkedIn.
En PRO: editor de CSS en vivo, modo responsive, conversión a clases de Tailwind v4, visualización de Flexbox, Grid, gradientes y sombras, y extracción de imágenes, colores y tipografías.

¿Para quién es Screen Ruler?

Está pensada para desarrolladores front-end que necesitan detectar desajustes de maquetación o problemas de alineación, y para diseñadores que quieren comprobar que su diseño se implementó con precisión de píxel. También resulta útil a quien revisa webs ajenas: la detección de tecnologías, la extracción de assets y las comprobaciones de SEO y accesibilidad la hacen práctica para auditorías rápidas.

Casos de uso

Verificar que los márgenes y paddings de un componente recién maquetado coinciden con el diseño original antes de dar el trabajo por cerrado.
Revisar una landing antes de publicarla para comprobar meta etiquetas y ver cómo se verá al compartirla en redes.
Detectar fallos de contraste WCAG en una sección concreta de la página y aplicar las recomendaciones que sugiere la extensión.
Convertir los estilos computados de un elemento en clases de utilidad de Tailwind v4 al migrar un proyecto (función PRO).

Precio de Screen Ruler

La extensión se instala gratis desde Chrome Web Store e incluye compras dentro de la aplicación. La versión PRO, que desbloquea funciones como el editor de CSS en vivo o el generador de Tailwind, se adquiere con un pago único que da acceso de por vida; el importe concreto no aparece en las fuentes consultadas.

¿Screen Ruler está disponible en español?

SíLa extensión está disponible en 22 idiomas, entre ellos el español, además de portugués de Brasil y de Portugal.

Preguntas frecuentes sobre Screen Ruler

¿Funciona en navegadores que no sean Chrome?: Se puede instalar en cualquier navegador basado en Chromium, aunque está optimizada para Google Chrome 116 o superior; conviene tener el navegador actualizado para que APIs como Side Panel y Offscreen funcionen correctamente.
¿Qué incluye la versión gratuita frente a la PRO?: La gratuita cubre medición de elementos, CSS computado, reglas, selector de color, capturas, avisos de accesibilidad y SEO y vistas previas sociales; PRO añade edición de CSS en vivo, modo responsive, Tailwind, visualización de Flexbox/Grid, gradientes, extracción de assets y detección de tecnologías, entre otras.
¿Qué datos maneja la extensión?: El desarrollador declara que trata información de identificación personal, actividad del usuario y contenido de sitios web, y que no vende esos datos a terceros fuera de los casos de uso aprobados.