Sommaire
Eh bien les amis, aujourd’hui on va parler d’un petit bijou d’extension Chrome qui devrait faire le bonheur des développeurs web et des web designers dans la place (et même des codeurs occasionnels, ça peut toujours servir). Accrochez-vous bien, on embarque pour une visite guidée de Screen Ruler !
Présentation de Screen Ruler, l’indispensable
Screen Ruler, c’est un peu le couteau suisse des extensions pour Google Chrome quand on bosse sur des sites web. Son rôle ? Vous permettre de mesurer avec une précision dingue les dimensions en pixels de n’importe quel élément HTML présent sur une page. Mais pas que !
Cette petite merveille vous dévoile aussi les marges, les paddings et les distances entre les différents composants. Le tout en un simple survol de la souris (l’efficacité même, vous ne trouvez pas ?). Et comme si ça ne suffisait pas, Screen Ruler vous affiche également les noms des tags HTML, des classes CSS et des ID. De quoi faciliter grandement le débogage de vos pages web !
Avec Screen Ruler, fini le temps où vous deviez jouer aux devinettes pour comprendre le positionnement des éléments sur votre site.
Menu contextuel et sélection d’éléments
Mais ce n’est pas tout ! Screen Ruler dispose d’un menu contextuel ultra-pratique qui vous permet de copier directement le code CSS d’un élément dans votre presse-papiers. Vous pouvez aussi sélectionner facilement les éléments parent ou enfant grâce à des raccourcis clavier personnalisables (pour les codeurs fainéants qui n’aiment pas trop bouger leur souris).
Et la cerise sur le gâteau ? Un mode de sélection responsive qui s’adapte automatiquement à la taille de votre fenêtre de navigation. Pratique, non ? (Surtout quand on développe des sites pour un large éventail d’appareils et de résolutions d’écran.)
Compatibilité et version PRO
Bref, on peut dire que Screen Ruler est un véritable couteau suisse pour les développeurs web et les web designers. Mais attention, certaines petites conditions sont à respecter pour en profiter pleinement.
Versions de Chrome recommandées
Pour une compatibilité optimale, il est recommandé d’utiliser Screen Ruler avec Chrome 116 ou une version ultérieure. Certes, l’extension peut fonctionner avec des versions plus anciennes, mais dans ce cas, la stabilité n’est pas garantie à 100% (ça peut parfois faire des caprices, comme tous les vieux logiciels).
Chrome 116 ou version ultérieure est recommandée pour profiter pleinement de Screen Ruler.
Pas de panique si vous n’utilisez pas Chrome, Screen Ruler est également compatible avec d’autres navigateurs basés sur Chromium, comme Brave ou Microsoft Edge (à condition, là aussi, d’avoir une version suffisamment récente).
Fonctionnalités de la version PRO
Pour les plus exigeants d’entre vous, les développeurs de Screen Ruler proposent également une version PRO avec quelques fonctionnalités supplémentaires bien pratiques. On y trouve notamment l’inspection d’éléments, une grille de layout, la capture d’écran de la zone sélectionnée et l’affichage de propriétés avancées dans un panneau latéral.
Bref, que vous soyez développeur web aguerri ou simple web designer en herbe, Screen Ruler devrait rapidement devenir l’un de vos meilleurs alliés pour créer et debugger des sites web. Alors, n’attendez plus et foncez l’installer ! (Elle est gratuite, ce serait dommage de s’en priver, non ?)
Et pour conclure…
Voilà, vous savez désormais tout (ou presque) sur cette petite extension qui a tout d’une grande. Que vous soyez un pro du web ou un simple curieux, n’hésitez pas à vous laisser tenter par Screen Ruler. Après tout, ça ne coûte rien d’essayer et ça pourrait bien vous simplifier la vie (ou au moins vous éviter quelques migraines lors de vos prochains projets web).
