Description from extension meta
Mida tamaños, distancias, márgenes y rellenos de cualquier elemento en cualquier página web.
Image from store
Description from store
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, 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 las distancias a otros elementos.
Uso
- Activa o desactiva Screen Ruler haciendo clic en el icono de la extensión, seleccionando “Screen Ruler” en el menú contextual del botón derecho o utilizando el atajo `Alt/Opción + Shift + R`.
- Pasa el cursor sobre los elementos en las páginas web para mostrar sus tamaños, márgenes, rellenos, nombres de etiquetas, IDs y clases.
- Selecciona un elemento haciendo clic directamente sobre él, esto hará que el resaltado se vuelva rojo. Para deseleccionar, haz clic nuevamente, presiona Escape o selecciona otro elemento.
- Para seleccionar el elemento padre, usa `Alt/Opción + Arriba`, moviendo tu selección al elemento padre en su lugar. Usa `Alt/Opción + Abajo` para revertir tu selección.
- Abre el panel lateral para ver el CSS calculado del elemento seleccionado actualmente. Haz clic en el botón "Copiar CSS" para copiar el CSS calculado del elemento seleccionado actualmente en tu portapapeles.
Características
- Mide el tamaño en píxeles de cualquier elemento.
- Mide la distancia en píxeles entre dos elementos cualesquiera.
- Nombres de etiquetas HTML, nombres de clases e IDs.
- Atajos de selección de padre/hijo.
- Las selecciones responsivas cambian de tamaño con la ventana de tu navegador.
- Acceso desde el menú contextual.
- Inspección del CSS calculado.
- Copia el CSS al portapapeles.
- Funciona en cualquier página web.
- Personaliza los atajos de teclado visitando `chrome://extensions/shortcuts`.
Screen Ruler PRO
Screen Ruler también ofrece un nivel PRO que desbloquea características adicionales.
1. Inspección de elementos: Ve las propiedades de un elemento cuando pasas el ratón sobre él. Incluye información sobre la posición del elemento, tamaño, fuente renderizada, colores y más.
2. Cuadrícula de diseño: Superpone una cuadrícula de diseño en la parte superior del sitio para validar la alineación de tus diseños.
3. Captura una captura de pantalla del área resaltada actualmente haciendo clic en el control de captura de pantalla o usando el atajo de teclado `Ctrl/Command + Shift + S`. Perfecto para documentación o para adjuntar a tickets de Github.
4. Ve propiedades avanzadas en el panel lateral del navegador, incluyendo el modelo de caja del elemento, colores de selección, recursos y más.
Screen Ruler PRO requiere un pago único para acceso de por vida. Para actualizar a PRO, haz clic en "Upgrade to PRO" en el menú contextual o haz clic derecho en el icono de la extensión para ver las opciones de actualización.
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 esté correctamente alineado, Screen Ruler se convierte en una adición indispensable a tu conjunto de herramientas de desarrollo.
- Diseñadores: Asegúrate de que tus diseños se hayan implementado con precisión de píxeles. Screen Ruler actúa como un puente entre el diseño y el desarrollo, permitiéndote verificar si cada elemento se alinea exactamente como lo planeaste.
Instalación
- Screen Ruler está diseñado específicamente para estabilidad en Google Chrome 116+.
- Screen Ruler se puede instalar en cualquier navegador Chromium, sin embargo, para la mejor experiencia, asegúrate de que tu navegador sea compatible con todas las API necesarias (como el Panel Lateral y Offscreen). Si tienes algún problema con la instalación, actualiza tu navegador a la última versión y vuelve a intentarlo.
Latest reviews
- (2025-06-24) Victor Biletskiy: Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- (2025-06-13) Richard Brus: A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- (2025-05-12) Misha Vs: This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- (2025-04-02) T VICKY: Love it
- (2025-03-03) Kelvin Ugbana: Perfect.. Works for me
- (2025-02-27) Fynn: Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- (2025-02-11) R.c gamer: Great tool! I am a Web developer. It's really usefull for me.
- (2025-01-23) Muhammad Usman: love it 👍🏻
- (2024-11-29) Chikezie Iroegbu: Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.
- (2024-11-28) Anna F.: Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- (2024-09-24) Danny Feliz: I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.
- (2024-09-11) Ishan Shah: Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.
- (2024-09-10) Hashaam Ahmed: Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- (2024-09-06) Patrik Gustavsson: Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- (2024-08-23) Levy Santa Ana: Not working
- (2024-08-21) Manuel Avella-Salazar: Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- (2024-08-07) Shane: Exactly what I was looking for. Excellent!
- (2024-07-25) Best Lay: Very Good
- (2024-06-17) Александр Ратманский: Nice!
- (2024-05-20) Walter Córdoba: ¡Fantastic!
- (2024-05-08) Dave Mejias: This extension is incredible... Do you have any contact info? I need help to buy pro.
- (2024-04-13) JaeHun Sim: Awesome