Screen Ruler

Qu’est-ce que Screen Ruler ?

Screen Ruler est une extension Chrome pour inspecter et mesurer des pages web. Elle aide les designers et les développeurs à vérifier les dimensions des éléments, les espacements, les sélecteurs, le CSS calculé, les couleurs, les captures d’écran, les problèmes de contraste d’accessibilité et les métadonnées liées au SEO directement dans le navigateur.

L’extension peut être activée depuis son icône dans la barre d’outils, le menu contextuel au clic droit ou un raccourci clavier. Une fois active, elle superpose des outils d’inspection sur la page afin que les utilisateurs puissent survoler ou cliquer des éléments pour inspecter la mise en page et les métadonnées de la page sans quitter le site.

Fonctionnalités clés

• Mesurer la taille et l’espacement des éléments : afficher les dimensions en pixels, les marges, les paddings et les distances entre les éléments.
• Inspecter l’identité d’un élément : afficher les noms de balises, les IDs et les noms de classes au survol ou à la sélection.
• Voir le CSS calculé et le copier : inspecter les styles calculés de l’élément actuel dans le panneau latéral et copier le CSS dans le presse-papiers.
• Utiliser des règles et un sélecteur de couleurs : placer des repères horizontaux et verticaux pour une mesure précise et prélever des couleurs partout sur la page.
• Capturer du contenu sélectionné : prendre des captures d’écran recadrées d’éléments choisis avec un raccourci clavier.
• Examiner les signaux de qualité de la page : détecter les problèmes de contraste WCAG, les problèmes SEO courants, les balises meta et les données d’aperçu social pour Facebook, X et LinkedIn.

Comment utiliser Screen Ruler

Après avoir installé l’extension, activez-la depuis l’icône de la barre d’outils, le menu contextuel ou le raccourci Alt/Option + Shift + R. Survolez les éléments pour inspecter leur taille et leurs métadonnées, ou cliquez sur un élément pour le sélectionner et le comparer au contenu voisin.

Depuis le panneau latéral, vous pouvez consulter le CSS calculé et le copier, utiliser les raccourcis de sélection parent/enfant, inspecter les règles et les couleurs, et accéder aux outils de capture d’écran, de balises meta et d’analyse de page. L’extension prend aussi en charge des raccourcis personnalisés via les paramètres des extensions Chrome.

Cas d’usage

• Vérifier les espacements et l’alignement d’une landing page ou d’une maquette d’interface avant de transmettre le travail à l’ingénierie.
• Identifier la classe CSS exacte, l’ID et les styles calculés d’un élément lors d’un débogage frontend.
• Prélever une couleur depuis une référence de design ou une page en direct pour l’aligner sur un système visuel.
• Capturer une capture d’écran recadrée d’un composant unique pour la documentation ou les rapports de bugs.
• Examiner une page pour repérer des métadonnées SEO manquantes, plusieurs H1 ou des problèmes de contraste avant publication.

FAQ

Screen Ruler fonctionne-t-il sur n’importe quel site web ?
La fiche indique qu’il fonctionne sur n’importe quelle page web.

Comment l’extension est-elle activée ?
Elle peut être ouverte depuis l’icône de l’extension, le menu contextuel au clic droit ou le raccourci clavier Alt/Option + Shift + R.

Puis-je copier le CSS d’un élément ?
Oui. Le panneau latéral comprend une vue du CSS calculé et un bouton « Copy CSS ».

Inclut-elle des outils plus avancés que l’inspection ?
Oui. La fiche mentionne aussi les captures d’écran, le prélèvement de couleurs, les vérifications d’accessibilité, l’analyse SEO et l’inspection des aperçus sociaux. Certaines fonctionnalités supplémentaires font partie de l’offre PRO.

Alternatives

• Outils de développement du navigateur : utiles pour l’inspection directe et le débogage, surtout si vous travaillez dans les panneaux intégrés de Chrome plutôt qu’avec une extension en surimpression.
• Autres extensions d’inspection pour navigateur : des outils similaires peuvent se concentrer davantage sur les mesures, les règles, l’inspection CSS ou le prélèvement de couleurs.
• Outils de handoff design et de QA : plus adaptés lorsque les équipes ont besoin de workflows de revue visuelle plus larges plutôt que d’une inspection in-browser des éléments.
• Outils d’audit d’accessibilité et de SEO : ils peuvent fournir des rapports de problèmes plus approfondis si l’objectif principal est un workflow d’audit plutôt qu’une inspection live de la page.