La Regla de Página añade reglas estilo Photoshop y líneas guía arrastrables a cualquier página web. Reglas precisas al píxel recorren los bordes superior e izquierdo del viewport, y puedes arrastrar líneas guía sobre la página para medir distancias, verificar alineación y comprobar espaciado — todo directamente en la página en vivo.
Los diseñadores que trabajan en Figma o Photoshop confían en reglas y guías para verificar el espaciado y la alineación. Pero cuando esos diseños se implementan en HTML/CSS, verificar la precisión de píxeles generalmente significa abrir DevTools, pasar el cursor sobre los elementos uno por uno y comparar los valores calculados con la maqueta. La Regla de Página trae el flujo de trabajo familiar de regla y guía directamente al navegador. Una regla horizontal con marcas de graduación abarca la parte superior del viewport, y una regla vertical abarca el borde izquierdo — ambas mostrando posiciones en píxeles. Haz clic y arrastra desde cualquier regla para tirar de una línea guía sobre la página. Las guías están codificadas por colores (azul para horizontal, rojo para vertical) y muestran su posición en píxeles. La distancia entre dos guías paralelas cualesquiera se calcula y muestra automáticamente. Arrastra las guías para reposicionarlas, o haz doble clic para eliminarlas. Toda la superposición es no intrusiva — se sitúa sobre la página sin afectar el diseño o las interacciones.
Reglas precisas con marcas de graduación cada 50 píxeles recorren los bordes superior e izquierdo del viewport. Las reglas se desplazan con la página y muestran posiciones de píxeles precisas relativas al origen de la página (0,0). Marcas de graduación a intervalos de 10px con etiquetas cada 50px.
Haz clic y arrastra desde la regla horizontal para crear una guía horizontal, o desde la regla vertical para una guía vertical. Las guías se ajustan a la posición del cursor y muestran su coordenada exacta en píxeles (p. ej., y: 200px). Arrastra para reposicionar, doble clic para eliminar.
Cuando se colocan dos guías paralelas, la distancia en píxeles entre ellas se calcula automáticamente y se muestra con un soporte de conexión y una etiqueta. Coloca dos guías horizontales a 120px de distancia y ve "120px" etiquetado entre ellas.
Las guías horizontales son azules, las guías verticales son rojas — haciendo fácil distinguirlas de un vistazo cuando se colocan múltiples guías. Cada guía muestra su posición en un pequeño distintivo de etiqueta.
Las reglas y guías se renderizan como una superposición transparente que no afecta el DOM, diseño o JavaScript de la página. Aún puedes hacer clic a través para interactuar con los elementos de la página. La superposición solo captura clics en las reglas y manejadores de guía.
Coloca tantas guías como necesites — no hay límite. Crea una cuadrícula de medición completa con guías horizontales y verticales marcando cada punto de alineación significativo en la página.
La maqueta dice que el encabezado tiene 80px de alto y el contenido comienza a 120px desde la parte superior. Coloca guías horizontales en esas posiciones y verifica al instante si la página implementada coincide con las especificaciones de diseño.
Coloca guías en la parte superior e inferior de elementos repetidos (tarjetas, elementos de lista, secciones) para verificar que todos tengan espaciado idéntico. Los espacios inconsistentes entre elementos se vuelven inmediatamente obvios.
Coloca una guía vertical en el borde izquierdo de un encabezado, luego verifica si el texto del párrafo, los botones y las imágenes debajo se alinean a la misma línea. Las desalineaciones de incluso unos pocos píxeles son visibles contra la guía.
Coloca dos guías verticales en los bordes izquierdo y derecho de un elemento para medir su ancho. Coloca dos guías horizontales para la altura. La distancia calculada automáticamente te da las dimensiones exactas en píxeles.
Coloca una guía vertical en anchos de breakpoint comunes (768px, 1024px, 1280px) y redimensiona el navegador para verificar si los elementos se reorganizan correctamente en cada breakpoint. Las guías permanecen fijas como puntos de referencia visuales.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono de la Regla de Página. Aparecen reglas precisas al píxel a lo largo de los bordes superior e izquierdo del viewport.
Haz clic y arrastra desde la regla superior para colocar una línea guía horizontal, o desde la regla izquierda para una guía vertical. La guía sigue al cursor y se ajusta a la posición de píxel donde la sueltas.
Cada guía muestra su posición en píxeles (p. ej., y: 200px). Cuando se colocan dos guías paralelas, la distancia entre ellas se muestra automáticamente con un soporte etiquetado.
Arrastra cualquier guía para moverla a una nueva posición — las etiquetas de distancia se actualizan en tiempo real. Haz doble clic en una guía para eliminarla de la página.
Haz clic en el ícono de la Regla de Página nuevamente para ocultar todas las reglas y guías. Tus posiciones de guía se preservan si reactivas durante la misma sesión.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
