CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Mesurez les tailles, les distances, les marges et les rembourrages de n'importe quel élément sur n'importe quelle page web.
Image from store
Description from store
Screen Ruler est le compagnon parfait pour les développeurs web et les designers souhaitant valider la mise en œuvre de leurs sites web. Une fois activé, Screen Ruler vous permet de voir les tailles, marges, paddings, noms de balises, IDs et classes simplement en survolant n'importe quel élément. Vous pouvez également sélectionner un élément pour mesurer les distances par rapport à d'autres éléments.
Utilisation
- Activez/désactivez Screen Ruler en cliquant sur l'icône de l'extension, en sélectionnant "Screen Ruler" dans le menu contextuel (clic droit) ou en utilisant le raccourci `Alt/Option + Shift + R`.
- Survolez les éléments sur les pages web pour afficher leurs tailles, marges, paddings, noms de balises, IDs et classes.
- Sélectionnez un élément en cliquant directement dessus, cela rendra la surbrillance rouge. Pour désélectionner, cliquez à nouveau, appuyez sur Échap ou sélectionnez un autre élément.
- Pour sélectionner le parent d'un élément, utilisez `Alt/Option + Haut`, pour déplacer votre sélection vers l'élément parent. Utilisez `Alt/Option + Bas` pour inverser votre sélection.
- Ouvrez le panneau latéral pour voir le CSS calculé de l'élément actuellement sélectionné. Cliquez sur le bouton "Copy CSS" pour copier le CSS calculé de l'élément actuellement sélectionné dans votre presse-papiers.
Fonctionnalités
- Mesurez la taille en pixels de n'importe quel élément.
- Mesurez la distance en pixels entre deux éléments.
- Noms de balises HTML, noms de classes et IDs.
- Raccourcis pour la sélection parent/enfant.
- Les sélections réactives redimensionnent avec la fenêtre de votre navigateur.
- Accès depuis le menu contextuel.
- Inspection du CSS calculé.
- Copier le CSS dans le presse-papiers.
- Fonctionne sur n'importe quelle page web.
- Personnalisez les raccourcis clavier en visitant `chrome://extensions/shortcuts`.
Screen Ruler PRO
Screen Ruler propose également un niveau PRO qui débloque des fonctionnalités supplémentaires.
1. Inspection des éléments : Voir les propriétés d'un élément lorsque vous passez la souris dessus. Inclut des informations sur la position de l'élément, la taille, la police rendue, les couleurs et plus encore.
2. Grille de mise en page : Superposez une grille de mise en page sur le site pour valider l'alignement de vos designs.
3. Capturez une capture d'écran de la zone actuellement surlignée en cliquant sur le contrôle de capture d'écran ou en utilisant le raccourci clavier `Ctrl/Command + Shift + S`. Parfait pour la documentation ou pour joindre à des tickets Github.
4. Voir des propriétés avancées dans le panneau latéral du navigateur, y compris le modèle de boîte de l'élément, les couleurs de sélection, les ressources et plus encore.
Screen Ruler PRO nécessite un paiement unique pour un accès à vie. Pour passer à PRO, cliquez sur "Upgrade to PRO" dans le menu contextuel ou cliquez avec le bouton droit sur l'icône de l'extension pour voir les options de mise à niveau.
Screen Ruler est conçu pour
- Développeurs : Repérer les problèmes de mise en page ou identifier les problèmes d'alignement. Que vous ajustiez les marges et les paddings, ou que vous vous assuriez que tout est correctement aligné, Screen Ruler devient un ajout indispensable à votre boîte à outils de développement.
- Designers : Assurez-vous que vos designs sont implémentés avec une précision au pixel près. Screen Ruler agit comme un pont entre le design et le développement, vous permettant de vérifier si chaque élément s'aligne exactement comme vous l'aviez prévu.
Installation
- Screen Ruler est spécialement conçu pour une stabilité optimale dans Google Chrome 116+.
- Screen Ruler est installable sur n'importe quel navigateur Chromium. Cependant, pour une expérience optimale, assurez-vous que votre navigateur prend en charge toutes les API nécessaires (comme le panneau latéral et l'écran hors champ). Si vous rencontrez des problèmes lors de l'installation, mettez à jour votre navigateur à la dernière version et réessayez.
Latest reviews
- (2025-06-24) Victor Biletskiy: Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- (2025-06-13) Richard Brus: A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- (2025-05-12) Misha Vs: This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- (2025-04-02) T VICKY: Love it
- (2025-03-03) Kelvin Ugbana: Perfect.. Works for me
- (2025-02-27) Fynn: Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- (2025-02-11) R.c gamer: Great tool! I am a Web developer. It's really usefull for me.
- (2025-01-23) Muhammad Usman: love it 👍🏻
- (2024-11-29) Chikezie Iroegbu: Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.
- (2024-11-28) Anna F.: Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- (2024-09-24) Danny Feliz: I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.
- (2024-09-11) Ishan Shah: Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.
- (2024-09-10) Hashaam Ahmed: Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- (2024-09-06) Patrik Gustavsson: Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- (2024-08-23) Levy Santa Ana: Not working
- (2024-08-21) Manuel Avella-Salazar: Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- (2024-08-07) Shane: Exactly what I was looking for. Excellent!
- (2024-07-25) Best Lay: Very Good
- (2024-06-17) Александр Ратманский: Nice!
- (2024-05-20) Walter Córdoba: ¡Fantastic!
- (2024-05-08) Dave Mejias: This extension is incredible... Do you have any contact info? I need help to buy pro.
- (2024-04-13) JaeHun Sim: Awesome