CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Mesurez des distances et des grilles parfaites au pixel près sur n'importe quelle page Web.
Image from store
Description from store
La précision au pixel près est le héros discret d'un design réussi. Un seul pixel mal aligné peut perturber le rythme d'une grille, donner l'impression que le texte est décentré ou donner à un composant entier un aspect « presque correct », mais incomplet. Grid Ruler Lite offre aux développeurs front-end, aux concepteurs UI/UX, aux testeurs QA et à tous ceux qui se soucient de la qualité visuelle une boîte à outils de mesure instantanée, directement dans leur navigateur : pas de logiciel de conception lourd, pas de panneaux DevTools encombrés, ni de captures d'écran déplacées dans des applications externes. D'un simple clic, l'extension superpose une règle redimensionnable, des repères d'alignement sur la grille et des grilles de référence optionnelles sur n'importe quelle page web, vous permettant ainsi de vérifier l'espacement, les grilles à 8 points et de détecter les erreurs de mise en page en quelques secondes.
Qu'est-ce qui distingue Grid Ruler Lite ?
Activation en un clic, résiliation en un clic
Cliquez sur l'icône de la barre d'outils (ou appelez le raccourci que vous avez défini dans les paramètres du clavier du navigateur) et l'extension injecte un léger<canvas> Superposition encapsulée dans son propre Shadow-DOM. Le CSS de votre page ne peut interférer, et la superposition ne modifie jamais l'arborescence DOM que vous testez. Cliquez à nouveau et chaque guide, grille et étiquette disparaît : pas de rechargement de page, pas d'écouteurs d'événements persistants.
Pourquoi vous le voudrez dans votre boîte à outils
Gagnez du temps : pour mesurer les marges dans DevTools, il faut explorer les cases imbriquées et ajouter mentalement des valeurs de bordure et de marge. Grid Ruler Lite affiche les distances visuellement en un seul glissement.
Réduisez les bugs : détectez les minuscules régressions d'espacement avant qu'elles n'atteignent la phase de préparation ou, pire, la production, en particulier dans les points d'arrêt réactifs où les yeux de l'assurance qualité ne se posent pas toujours.
Améliorez la collaboration : les concepteurs peuvent superposer la grille à 8 points directement sur une build déployée et partager une capture d'écran, offrant ainsi aux développeurs un retour précis en pixels sans commentaires Figma.
Restez concentré : Plus besoin d'appuyer sur Alt+Tab dans Photoshop ni d'ouvrir des fichiers Sketch juste pour mesurer un bouton. Tout se déroule sur la page en direct, exactement comme le voient les utilisateurs finaux.
Éduquer et documenter : les chefs de produit et les rédacteurs techniques peuvent démontrer le comportement de la mise en page avec des captures d'écran de règles, rendant les documents de spécifications plus clairs pour toutes les parties prenantes.
Groupes d'utilisateurs cibles
Groupe d'utilisateurs
Développeurs front-end
Il faut vérifier l'espacement CSS, les espaces entre les boîtes flexibles et l'alignement des composants entre les points d'arrêt. Faites glisser les règles, accrochez-les aux bords, verrouillez les guides, exportez les captures d'écran pour les révisions des relations publiques.
Concepteurs UI/UX
Doit confirmer que les versions de développement respectent les systèmes de conception à 8 ou 10 points. Superposer les grilles de base, mesurer les remplissages, partager les PNG annotés
Testeurs d'assurance qualité
Signalez les bugs au pixel près avec des preuves claires
Des mesures rapides et une capture d'écran en une seule touche sont directement intégrées aux outils de suivi des bogues
Rédacteurs de contenu et PM
Vérifiez l'habillage des titres, l'espacement des emplacements publicitaires et la mise en page des cartes sur les pages pilotées par CMS. La superposition non technique évite la complexité des DevTools
Enseignants et étudiants
Enseignez les principes de conception, la théorie des grilles et les mises en page réactives en direct dans le navigateur. Démonstrations visuelles en temps réel sans outils externes