Pixel Ruler

Usa Pixel Ruler para medir píxeles en cualquier página web: una regla en pantalla para tamaños, márgenes y relleno.

Pixel Ruler pone una regla sobre la pantalla y te deja medir cualquier cosa en el navegador. Haz clic en el icono de la barra de herramientas, arrastra el ratón por el diseño y lee la distancia exacta en píxeles CSS. Pasa el puntero sobre un elemento y obtienes su anchura, su altura, su padding y las distancias a los bloques que lo rodean. Las cifras coinciden con DevTools, porque la extensión lee los mismos píxeles CSS que usa el navegador para dibujar la página. Sin panel que abrir, sin capturas que exportar, sin cuentas que echar. Solo una regla de pantalla encima del sitio que ya tienes delante. Una sola superposición, nada entre lo que cambiar: 📏 Mantén pulsado y arrastra para medir la distancia entre dos puntos cualesquiera de la página. 📏 Apunta a un elemento y verás su tamaño, su padding y las distancias a sus vecinos. 📏 Coloca guías verticales y horizontales y alinea los bloques con ellas. Siempre tienes una regla en pantalla como referencia, y una tecla copia el resultado al portapapeles junto con el selector CSS del elemento que hay bajo el puntero. Cómo empezar, en tres pasos: 1. Instala la extensión y ánclala a la barra de herramientas. 2. Abre la página en la que estás trabajando y haz clic en el icono. 3. Arrastra, señala, mide: pulsa Esc dos veces cuando termines. Los desarrolladores front-end la usan para contrastar un maquetado con el mockup. Los diseñadores la usan como regla de página cuando el archivo de entrega ya se ha quedado desfasado. Los ingenieros de QA reportan un bug con un número real en lugar de «el botón se ve un poco bajo». Cualquiera que necesite una medición rápida de píxeles en un sitio en producción la tiene en dos clics. Lo que te da esta regla web: - la distancia entre dos puntos cualesquiera, en píxeles - la anchura y la altura de cualquier elemento de la página - padding, márgenes y los huecos entre elementos vecinos - las distancias de un elemento a los bloques que lo rodean - escalas en los bordes superior e izquierdo de la ventana - la etiqueta, las clases y el selector CSS del elemento medido - guías reutilizables para comprobar la alineación El control con el teclado mantiene el puntero firme: → Shift bloquea la medición en el eje horizontal o en el vertical → Las flechas desplazan el punto actual exactamente 1 px → Esc borra la medición actual; un segundo Esc te devuelve la página → Un atajo copia el resultado al portapapeles Instálala una vez y tendrás la misma regla de píxeles que usan quienes trabajan en Windows, Linux y ChromeOS, y la misma que usan quienes trabajan en Mac, porque la herramienta vive en el navegador y no en el sistema operativo. No hay ninguna descarga de regla de píxeles que buscar, ni instalador, ni permisos de administrador: la extensión llega desde la Chrome Web Store con un clic. De salida es una regla de píxeles gratis, con todas las funciones abiertas a todo el mundo. Una aplicación de regla de pantalla que se abre en una ventana aparte acaba midiendo lo que no toca en cuanto la página hace scroll. Esta app de regla de píxeles se dibuja dentro de la pestaña y se desplaza con el contenido. Esto es una regla de píxeles online: funciona sobre la página real, en un servidor de staging, en el sitio de un cliente, detrás de un login. Una regla de píxeles de escritorio que mide una imagen estática de una ventana no puede hacerlo. ¿Necesitas revisar una ilustración o un logotipo? Úsala como regla de píxeles para imágenes: pasa el puntero por encima y lee su tamaño renderizado, que muchas veces no es el del archivo original. Preguntas y respuestas P: ¿Cómo medir píxeles en pantalla sin abrir DevTools? R: Haz clic en el icono y arrastra. La superposición queda por encima de la página, así que mides lo que realmente ves, incluidos los estados hover que desaparecen cuando un panel se lleva el foco. P: Regla de píxeles de pantalla, regla en pantalla, px ruler, pixelruler: ¿cuál de todas es esta? R: Todas. La herramienta es la misma; lo único que cambia es la búsqueda. P: ¿Puede medir en centímetros o pulgadas? R: No. Es una herramienta de regla de píxeles y solo informa en píxeles CSS, la unidad que escribes en tu hoja de estilos. P: ¿Funciona en todas partes? R: En sitios web normales, sí. Las páginas de sistema de Chrome, el visor de PDF integrado y el interior de los iframe de origen cruzado están cerrados a cualquier extensión, esta incluida. P: ¿Qué datos recoge? R: Ninguno. Cero peticiones de red, sin cuenta, sin registro. No pide ningún permiso inquietante al instalarse y no toca una página hasta que haces clic en el icono. Las viejas costumbres son más lentas y menos exactas: apoyar una regla de plástico en el cristal de la pantalla del ordenador o contar píxeles en una captura. Una regla para la pantalla del ordenador tiene que vivir dentro del navegador, redibujarse cuando el diseño se recompone y hablar las mismas unidades que el código. Eso es lo que hace esta superposición de regla en pantalla, y por eso una regla de píxeles para webs gana a cualquier regla para imágenes pegadas en un editor gráfico. La ficha está disponible en 52 idiomas, así que una regla de píxeles web está a una búsqueda de distancia en el tuyo. Instálala, mide píxeles en la siguiente página que abras y deja la regla en pantalla a un clic el resto del día.