CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Mide tamaños, distancias, márgenes y espaciado interno 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 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 del Modelo de Caja: Diagrama del modelo de caja mostrando márgenes, bordes, relleno y dimensiones del contenido.
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.
Latest reviews
- (2025-08-05) André Cavallari: One of most useful front-end extensions, it worth each cent, had an issue with my activation but the author was pretty quick to answer and find a solution, so I recommend it to every developers.
- (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