Screen Ruler - Measure The Web

Screen Ruler es el compañero perfecto para desarrolladores web y diseñadores que desean validar la implementación de sus sitios web. Una vez activado, le permite ver los tamaños, márgenes, rellenos, nombres de etiquetas, ID y clases simplemente pasando el cursor sobre cualquier contenido web. También puede seleccionar un elemento para medir distancias a otros.

Uso

- Active la extensión haciendo clic en el icono, seleccionando en el menú contextual del botón derecho o usando el atajo `Alt/Opción + Shift + R`.
- Pase el cursor sobre los elementos en las páginas web para mostrar sus tamaños, márgenes, rellenos, nombres de etiquetas, ID y clases.
- Seleccione un elemento haciendo clic directamente sobre él; esto volverá el resaltado rojo. Para deseleccionar, haga clic nuevamente, presione Escape o seleccione un elemento diferente.
- Para seleccionar el padre, use `Alt/Opción + Arriba`. Use `Alt/Opción + Abajo` para revertir su selección.
- Vea el CSS computado del elemento actualmente seleccionado en el panel lateral. Haga clic en el botón "Copiar CSS" para copiar el CSS computado a su portapapeles.

Características

- Mida el tamaño en píxeles de cualquier elemento.
- Mida la distancia en píxeles entre dos elementos cualesquiera.
- Nombres de etiquetas HTML, nombres de clases e ID.
- Atajos de selección padre/hijo.
- Las selecciones receptivas cambian de tamaño con la ventana de su navegador.
- Acceso desde el menú contextual.
- Inspección de CSS computado.
- Copiar CSS al portapapeles.
- Reglas de página para mediciones precisas (guías horizontales y verticales con mira).
- Herramienta de selector de color para muestrear y copiar colores de cualquier parte de la página.
- Capturas de pantalla de elementos: Capture capturas de pantalla recortadas de los elementos seleccionados usando `Ctrl/Cmd + Shift + S`.
- Funciona en cualquier página web.
- Personalice los atajos de teclado visitando `chrome://extensions/shortcuts`.

Screen Ruler PRO
También está disponible un nivel PRO que desbloquea características adicionales.

- Inspector flotante: Vea propiedades detalladas del elemento al pasar el cursor, incluyendo posición, tamaño, fuente renderizada, colores y más.
- Problemas de accesibilidad: Detecte y resalte automáticamente fallos de contraste WCAG en su selección con recomendaciones accionables.
- Modo receptivo: Pruebe sus diseños en diferentes ventanas gráficas de dispositivos con un emulador de dispositivo interactivo y dimensiones personalizadas.
- Visualización de sombras de caja: Desglose interactivo de sombras de caja multicapa con una vista explosionada.
- Análisis de animación: Visualice curvas de tiempo de animación CSS y copie propiedades de animación.
- Extracción de activos: Extraiga y descargue imágenes, SVG y activos vectoriales.
- Extracción de color: Extraiga y copie paletas de colores del contenido seleccionado con valores hexadecimales, RGB y HSL.
- Superposición de cuadrícula de diseño: Superponga una cuadrícula de diseño personalizable para una alineación de diseño perfecta.
- Búsqueda de selectores CSS: Encuentre y resalte elementos usando selectores CSS.
- Tipografía: Analice y extraiga todos los estilos de tipografía utilizados en su selección.
- Modo de rayos X: Revele la estructura subyacente de la página delineando todo el contenido.

PRO requiere un pago único para acceso de por vida.

Hecho para

- Desarrolladores: Detecte problemas de diseño o identifique problemas de alineación. Ya sea que esté ajustando márgenes y rellenos, o simplemente asegurándose de que todo se alinee correctamente, esta herramienta se convierte en una adición indispensable a su kit de herramientas de desarrollo.
- Diseñadores: Asegúrese de que sus diseños se hayan implementado con precisión de píxel perfecta. Actúa como un puente entre el diseño y el desarrollo, permitiéndole verificar si cada componente se alinea exactamente como lo pretendía.

Instalación

- Diseñado específicamente para la estabilidad en Google Chrome 116+.
- Instalable en cualquier navegador Chromium; sin embargo, para la mejor experiencia, asegúrese de que su navegador admita todas las API requeridas (como Panel lateral y Offscreen). Si hay algún problema con la instalación, actualice su navegador a la última versión e intente nuevamente.