Pixel Ruler

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

Pixel Ruler coloca una regla sobre la pantalla y te deja medir cualquier cosa dentro del navegador. Haz clic en el icono de la barra de herramientas, arrastra el mouse sobre el diseño y lee la distancia exacta en píxeles CSS. Pasa el cursor por encima de un elemento y obtienes su ancho, su alto, el padding y las separaciones con los bloques que lo rodean. Los números coinciden con DevTools, porque la extensión lee los mismos píxeles CSS que usa el navegador para dibujar la página. No hay panel que abrir, ni captura que exportar, ni cuentas que sacar. Solo una regla de píxeles encima del sitio que ya estás mirando. Una sola capa, sin nada entre qué alternar: 📏 Mantén presionado y arrastra para medir la distancia entre dos puntos cualesquiera de la página. 📏 Apunta a un elemento y mira su tamaño, su padding y las distancias hasta sus vecinos. 📏 Suelta guías verticales y horizontales y alinea los bloques contra ellas. Siempre tienes una regla en pantalla como referencia, y una sola tecla copia el resultado al portapapeles junto con el selector CSS del elemento que está bajo el puntero. Cómo empezar, en tres pasos: 1. Instala la extensión y fíjala en la barra de herramientas. 2. Abre la página en la que estás trabajando y haz clic en el icono. 3. Arrastra, apunta, mide: presiona Esc dos veces cuando termines. Los desarrolladores front-end la usan para comparar el maquetado con el mockup. Los diseñadores la usan como regla de página cuando el archivo de entrega ya quedó viejo. Los ingenieros de QA reportan un bug con un número real en vez de "el botón se ve un poco abajo". Cualquiera que necesite una medición rápida de píxeles en un sitio en vivo la tiene en dos clics. Lo que te da esta regla web: - la distancia entre dos puntos cualesquiera, en píxeles - el ancho y el alto de cualquier elemento de la página - padding, márgenes y los espacios entre elementos vecinos - las distancias de un elemento a los bloques que lo rodean - escalas en el borde superior y el borde izquierdo de la ventana - la etiqueta, las clases y el selector CSS del elemento que mediste - guías reutilizables para revisar la alineación El control con el teclado mantiene el puntero firme: → Shift fija la medición al eje horizontal o al vertical → Las flechas mueven 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 tienes la misma regla de píxeles que corre en Windows, Linux y ChromeOS, y la misma que corre en Mac, porque la herramienta vive en el navegador y no en el sistema operativo. No hay ninguna descarga que buscar, ni instalador, ni permisos de administrador: la extensión llega desde Chrome Web Store en un clic. Es una regla de píxeles gratis desde el lanzamiento, con todas las funciones abiertas para todos. Una app de regla que se abre en una ventana aparte termina midiendo otra cosa apenas la página se desplaza. Esta regla de píxeles se dibuja dentro de la pestaña y se desplaza junto con el contenido. Es una regla de píxeles en línea: funciona sobre la página en vivo, en un servidor de pruebas, en el sitio de un cliente, detrás de un login. Una regla de escritorio que mide una imagen estática de la ventana no puede hacer eso. ¿Necesitas revisar una ilustración o un logo? Úsala para medir imágenes: pasa el cursor por encima y lee su tamaño renderizado, que muchas veces no es el tamaño 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 capa se dibuja encima de la página, así que mides lo que de verdad ves, incluidos los estados hover que desaparecen cuando un panel se roba el foco. P: Regla de pantalla, regla en píxeles, regla de px, screen pixel ruler, px ruler, pixelruler: ¿cuál de todas es esta? R: Todas. La herramienta es la misma; lo único que cambia es la frase que se busca. P: ¿Puede medir en centímetros o pulgadas? R: No. Es una regla de píxeles y reporta solo píxeles CSS, la unidad que escribes en tu hoja de estilos. P: ¿Funciona en todos lados? 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 otro origen están cerrados para cualquier extensión, y esta no es la excepción. P: ¿Qué datos recopila? R: Ninguno. Cero solicitudes de red, sin cuenta, sin registro. No pide ningún permiso alarmante al instalarse y toca la página solo después de que haces clic en el icono. Las viejas costumbres son más lentas y menos exactas: apoyar una regla de plástico sobre el vidrio de la pantalla de la computadora o contar píxeles en una captura. Una regla para pantalla de computadora tiene que vivir dentro del navegador, volver a dibujarse cuando el diseño se reacomoda y hablar las mismas unidades que el código. Eso es lo que hace esta capa de medición, y por eso una regla de píxeles para sitios web le gana a una 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 queda a una búsqueda de distancia en el tuyo. Instálala, mide píxeles en la próxima página que abras y deja la regla en pantalla a un clic de distancia el resto del día.