Screen Ruler - Measure The Web

Mide tamaños, distancias, márgenes y espaciado interno de cualquier elemento en cualquier página 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.