Screen Ruler

¿Qué es Screen Ruler?

Screen Ruler es una extensión de Chrome para inspeccionar y medir páginas web. Ayuda a diseñadores y desarrolladores a revisar dimensiones de elementos, espaciado, selectores, CSS calculado, colores, capturas de pantalla, problemas de contraste de accesibilidad y metadatos relacionados con SEO directamente en el navegador.

La extensión se puede activar desde su icono en la barra de herramientas, el menú contextual del clic derecho o un atajo de teclado. Una vez activa, superpone herramientas de inspección sobre la página para que los usuarios puedan pasar el cursor o hacer clic en elementos para inspeccionar el diseño y los metadatos de la página sin salir del sitio.

Características principales

• Medir tamaño y espaciado de elementos: ver dimensiones en píxeles, márgenes, paddings y distancias entre elementos.
• Inspeccionar la identidad del elemento: revelar nombres de etiqueta, IDs y nombres de clase al pasar el cursor o al seleccionar.
• Ver CSS calculado y copiarlo: inspeccionar los estilos calculados del elemento actual en el panel lateral y copiar el CSS al portapapeles.
• Usar reglas y un selector de color: colocar guías horizontales y verticales para una medición precisa y muestrear colores desde cualquier parte de la página.
• Capturar contenido seleccionado: tomar capturas recortadas de los elementos elegidos con un atajo de teclado.
• Revisar señales de calidad de la página: detectar problemas de contraste WCAG, problemas SEO comunes, metaetiquetas y datos de vista previa social para Facebook, X y LinkedIn.

Cómo usar Screen Ruler

Después de instalar la extensión, actívala desde el icono de la barra de herramientas, el menú contextual o el atajo Alt/Option + Shift + R. Pasa el cursor sobre los elementos para inspeccionar su tamaño y metadatos, o haz clic en un elemento para seleccionarlo y compararlo con el contenido cercano.

Desde el panel lateral, puedes ver el CSS calculado y copiarlo, usar atajos de selección de padre/hijo, inspeccionar reglas y colores, y acceder a herramientas para capturas de pantalla, metaetiquetas y análisis de la página. La extensión también admite atajos personalizados a través de la configuración de extensiones de Chrome.

Casos de uso

• Comprobar el espaciado y la alineación en una landing page o maqueta de interfaz antes de entregar el trabajo al equipo de ingeniería.
• Identificar la clase CSS, el ID y los estilos calculados exactos de un elemento durante la depuración frontend.
• Muestrear un color de una referencia de diseño o de una página en vivo para ajustar un sistema visual.
• Capturar una captura recortada de un solo componente para documentación o informes de errores.
• Revisar una página en busca de metadatos SEO faltantes, múltiples H1 o problemas de contraste antes de publicar.

Preguntas frecuentes

¿Screen Ruler funciona en cualquier sitio web? La ficha indica que funciona en cualquier página web.

¿Cómo se activa la extensión? Se puede abrir desde el icono de la extensión, el menú contextual del clic derecho o el atajo de teclado Alt/Option + Shift + R.

¿Puedo copiar CSS desde un elemento? Sí. El panel lateral incluye una vista de CSS calculado y un botón “Copy CSS”.

¿Incluye herramientas más avanzadas además de la inspección? Sí. La ficha también menciona capturas de pantalla, selector de color, comprobaciones de accesibilidad, análisis SEO e inspección de vista previa social. Algunas capacidades adicionales forman parte del plan PRO.

Alternativas

• Herramientas de desarrollo del navegador: útiles para la inspección y depuración directas, especialmente cuando se trabaja dentro de los paneles integrados de Chrome en lugar de una extensión superpuesta.
• Otras extensiones de inspección del navegador: herramientas similares pueden centrarse más específicamente en mediciones, reglas, inspección de CSS o selector de color.
• Herramientas de handoff de diseño y QA: son más adecuadas cuando los equipos necesitan flujos de trabajo de revisión visual más amplios en lugar de inspección de elementos en el navegador.
• Herramientas de auditoría de accesibilidad y SEO: pueden ofrecer informes de problemas más profundos si el objetivo principal son los flujos de auditoría en lugar de la inspección en vivo de páginas.