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 quieren validar la implementación de sus sitios web. Una vez activado, Screen Ruler te permite ver los tamaños, márgenes, rellenos, nombres de etiquetas, IDs y clases simplemente pasando el cursor sobre cualquier elemento. También puedes seleccionar un elemento para medir distancias a otros elementos. Uso - Activa Screen Ruler haciendo clic en el icono de la extensión, seleccionando "Screen Ruler" desde el menú contextual del clic derecho, o usando el atajo Alt/Option + Shift + R. - Pasa el cursor sobre elementos en páginas web para mostrar sus tamaños, márgenes, rellenos, nombres de etiquetas, IDs y clases. - Selecciona un elemento haciendo clic directamente en él, esto hará que el resaltado se vuelva rojo. Para deseleccionar, haz clic de nuevo, presiona Escape o selecciona un elemento diferente. - Para seleccionar el padre de un elemento, usa Alt/Option + Arriba, moviendo tu selección al elemento padre, usa Alt/Option + Abajo para revertir tu selección. - Ve el CSS computado del elemento actualmente seleccionado en el panel lateral. Haz clic en el botón "Copiar CSS" para copiar el CSS computado del elemento actualmente seleccionado a tu portapapeles. Características - Medir el tamaño en píxeles de cualquier elemento. - Medir la distancia en píxeles entre dos elementos cualesquiera. - Nombres de etiquetas HTML, nombres de clases e IDs. - Atajos de selección padre/hijo. - Las selecciones responsivas se redimensionan con tu ventana del navegador. - Acceso desde el menú contextual. - Inspección de CSS computado. - Copiar CSS al portapapeles. - Funciona en cualquier página web. - Personaliza atajos de teclado visitando chrome://extensions/shortcuts. Screen Ruler PRO Screen Ruler también ofrece un nivel PRO que desbloquea características adicionales. 1. Inspector Flotante: Ve propiedades detalladas de elementos al pasar el cursor, incluyendo posición, tamaño, fuente renderizada, colores y más. 2. Visualización de Sombras de Caja: Desglose interactivo de sombras de caja multicapa con vista expandida mostrando cada componente de sombra. 3. Análisis de Animación: Visualiza curvas de tiempo de animación CSS y copia propiedades CSS de animación. 4. Extracción de Recursos: Extrae y descarga imágenes, SVGs y recursos vectoriales directamente desde cualquier página web. 5. Extracción de Colores: Extrae y copia paletas de colores de elementos seleccionados con valores hex, RGB y HSL. 6. Superposición de Cuadrícula de Diseño: Superpone una cuadrícula de diseño personalizable para alineación perfecta del diseño. 7. Capturas de Pantalla de Elementos: Captura capturas de pantalla recortadas de elementos seleccionados usando Ctrl/Cmd + Shift + S. 8. Búsqueda por Selector CSS: Encuentra y resalta elementos usando selectores CSS. 9. Panel Lateral Avanzado: Análisis completo de elementos incluyendo estilos computados, modelo de caja, colores, recursos y animaciones. Screen Ruler PRO requiere un pago único para acceso de por vida. Screen Ruler está hecho para - Desarrolladores: Detectar problemas de diseño o identificar problemas de alineación. Ya sea que estés ajustando márgenes y rellenos, o simplemente asegurándote de que todo se alinee correctamente, Screen Ruler se convierte en una adición indispensable a tu kit de herramientas de desarrollo. - Diseñadores: Asegúrate de que tus diseños han sido implementados con precisión perfecta al píxel. Screen Ruler actúa como un puente entre diseño y desarrollo, permitiéndote verificar que cada elemento se alinea exactamente como lo habías previsto. Instalación - Screen Ruler está diseñado específicamente para estabilidad en Google Chrome 116+. - Screen Ruler es instalable en cualquier navegador Chromium sin embargo, para la mejor experiencia asegúrate de que tu navegador soporte todas las APIs requeridas (como Side Panel y Offscreen). Si hay problemas con la instalación, actualiza tu navegador a la versión más reciente e inténtalo de nuevo.