CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Mida distancias y cuadrículas con precisión de píxeles en cualquier página web.
Image from store
Description from store
La precisión de píxeles es la protagonista silenciosa de un gran diseño. Un solo píxel desalineado puede romper el ritmo de una cuadrícula, hacer que el texto parezca descentrado o que un componente entero parezca "casi perfecto", pero no del todo. Grid Ruler Lite ofrece a desarrolladores front-end, diseñadores de UI/UX, testers de control de calidad y a cualquiera que se preocupe por el refinamiento visual un kit de herramientas de medición instantánea en el navegador: sin software de diseño pesado, sin paneles de DevTools saturados ni capturas de pantalla enviadas a aplicaciones externas. Con un solo clic, la extensión superpone una regla redimensionable, guías de ajuste a la cuadrícula y cuadrículas de línea base opcionales sobre cualquier página web para que puedas comprobar el espaciado, verificar cuadrículas de 8 puntos y detectar errores de diseño en segundos.
¿Qué hace que Grid Ruler Lite se destaque?
Activación con un clic, desistimiento con un clic
Haga clic en el icono de la barra de herramientas (o invoque el acceso directo que configuró en la configuración del teclado del navegador) y la extensión inyectará un ligero<canvas> La superposición está encapsulada en su propio Shadow-DOM. El CSS de tu página no interfiere y la superposición nunca altera el árbol DOM que estás probando. Al hacer clic de nuevo, todas las guías, cuadrículas y etiquetas desaparecen: sin recarga de página ni escuchas de eventos persistentes.
Por qué lo querrás en tu kit de herramientas
Ahorra tiempo: Medir los rellenos en DevTools requiere explorar las casillas anidadas y agregar mentalmente los valores de borde y margen. Grid Ruler Lite muestra las distancias visualmente con un solo arrastre.
Reducir errores: Detecte pequeñas regresiones de espaciado antes de que lleguen a la etapa de prueba o, peor aún, a producción, especialmente en puntos de interrupción de respuesta donde el control de calidad no siempre llega.
Mejore la colaboración: los diseñadores pueden superponer la cuadrícula de 8 puntos directamente en una compilación implementada y compartir una captura de pantalla, lo que brinda a los desarrolladores comentarios exactos en píxeles sin comentarios de Figma.
Mantén la concentración: No es necesario usar Alt+Tab para entrar en Photoshop ni abrir archivos de Sketch solo para medir un botón. Todo sucede en la página en vivo, tal como lo ven los usuarios finales.
Educar y documentar: los gerentes de producto y los redactores técnicos pueden demostrar el comportamiento del diseño con capturas de pantalla de reglas, lo que hace que los documentos de especificaciones sean más claros para todas las partes interesadas.
Grupos de usuarios objetivo
Grupo de usuarios
Desarrolladores front-end
Es necesario verificar el espaciado de CSS, los espacios de flexbox y la alineación de los componentes en los puntos de interrupción. Arrastre reglas, ajuste a los bordes, bloquee guías, exporte capturas de pantalla para revisiones de relaciones públicas.
Diseñadores de UI/UX
Se debe confirmar que las compilaciones de desarrollo respetan los sistemas de diseño de 8 o 10 puntos. Superponer cuadrículas de línea base, medir rellenos, compartir PNG anotados.
Probadores de control de calidad
Informar errores perfectos con evidencia clara
Las mediciones rápidas y la captura de pantalla con una sola tecla se integran directamente con los rastreadores de errores
Editores de contenido y administradores de proyectos
Verifique el envoltorio del título, el espaciado del espacio publicitario y los diseños de las tarjetas en páginas controladas por CMS. La superposición no técnica evita la complejidad de DevTools.
Educadores y estudiantes
Enseñe principios de diseño, teoría de cuadrícula y diseños responsivos en vivo en el navegador. Demostraciones visuales en tiempo real sin herramientas externas.