Page Ruler ajoute des règles de style Photoshop et des guide lines déplaçables à n'importe quelle page web. Des règles précises au pixel longent les bords supérieur et gauche du viewport, et vous pouvez faire glisser des guide lines sur la page pour mesurer des distances, vérifier l'alignement et contrôler l'espacement — directement sur la page en direct.
Les designers travaillant dans Figma ou Photoshop s'appuient sur des règles et des guides pour vérifier l'espacement et l'alignement. Mais lorsque ces maquettes sont implémentées en HTML/CSS, vérifier la précision au pixel implique généralement d'ouvrir les DevTools, de survoler les éléments un par un et de comparer les valeurs calculées avec la maquette. Page Ruler apporte directement au navigateur le flux de travail familier règle-et-guide. Une règle horizontale avec des graduations s'étend en haut du viewport, et une règle verticale longe le bord gauche — toutes deux affichant les positions en pixel. Cliquez et faites glisser depuis l'une ou l'autre règle pour tirer une guide line sur la page. Les guides sont codés par couleur (bleu pour l'horizontal, rouge pour le vertical) et affichent leur position en pixel. La distance entre deux guides parallèles est automatiquement calculée et affichée. Faites glisser les guides pour les repositionner ou double-cliquez pour les supprimer. L'overlay est entièrement non intrusif — il se superpose à la page sans affecter la mise en page ni les interactions.
Des règles précises avec des graduations tous les 50 pixels longent les bords supérieur et gauche du viewport. Les règles défilent avec la page et affichent des positions pixel exactes par rapport à l'origine de la page (0,0). Graduations tous les 10px avec étiquettes tous les 50px.
Cliquez et faites glisser depuis la règle horizontale pour créer un guide horizontal, ou depuis la règle verticale pour un guide vertical. Les guides s'alignent sur la position du curseur et affichent leur coordonnée pixel exacte (ex. : y: 200px). Faites glisser pour repositionner, double-cliquez pour supprimer.
Lorsque deux guides parallèles sont placés, la distance en pixel entre eux est automatiquement calculée et affichée avec un crochet de liaison et une étiquette. Placez deux guides horizontaux à 120px d'écart et voyez « 120px » affiché entre eux.
Les guides horizontaux sont bleus, les guides verticaux sont rouges — ce qui permet de les distinguer d'un coup d'œil lorsque plusieurs guides sont placés. Chaque guide affiche sa position dans un petit badge d'étiquette.
Les règles et les guides sont rendus comme un overlay transparent qui n'affecte pas le DOM, la mise en page ou le JavaScript de la page. Vous pouvez toujours cliquer à travers pour interagir avec les éléments de la page. L'overlay ne capture les clics que sur les règles et les poignées de guide.
Placez autant de guides que nécessaire — sans limite. Créez une grille de mesure complète avec des guides horizontaux et verticaux marquant chaque point d'alignement significatif sur la page.
La maquette indique que l'en-tête fait 80px de haut et que le contenu commence à 120px du haut. Placez des guides horizontaux à ces positions et vérifiez instantanément si la page implémentée correspond aux spécifications de conception.
Placez des guides en haut et en bas des éléments répétés (cartes, éléments de liste, sections) pour vérifier qu'ils ont tous un espacement identique. Les écarts incohérents entre les éléments deviennent immédiatement évidents.
Placez un guide vertical au bord gauche d'un titre, puis vérifiez si le texte du paragraphe, les boutons et les images en dessous s'alignent sur la même ligne. Les désalignements de quelques pixels seulement sont visibles contre le guide.
Placez deux guides verticaux aux bords gauche et droit d'un élément pour mesurer sa largeur. Placez deux guides horizontaux pour la hauteur. La distance calculée automatiquement vous donne les dimensions exactes en pixel.
Placez un guide vertical aux largeurs de breakpoint courantes (768px, 1024px, 1280px) et redimensionnez le navigateur pour vérifier si les éléments se réorganisent correctement à chaque breakpoint. Les guides restent fixes comme points de référence visuels.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Page Ruler. Des règles précises au pixel apparaissent le long des bords supérieur et gauche du viewport.
Cliquez et faites glisser depuis la règle du haut pour placer une guide line horizontale, ou depuis la règle de gauche pour un guide vertical. Le guide suit votre curseur et s'aligne sur la position pixel où vous relâchez.
Chaque guide affiche sa position en pixel (ex. : y: 200px). Lorsque deux guides parallèles sont placés, la distance entre eux est automatiquement affichée avec un crochet étiqueté.
Faites glisser n'importe quel guide pour le déplacer vers une nouvelle position — les étiquettes de distance se mettent à jour en temps réel. Double-cliquez sur un guide pour le supprimer de la page.
Cliquez à nouveau sur l'icône Page Ruler pour masquer toutes les règles et les guides. Les positions de vos guides sont conservées si vous réactivez l'outil au cours de la même session.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
