CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Mesurez les tailles, distances, marges et espacements de tout élément sur n'importe quelle page web.
Image from store
Description from store
Screen Ruler est le compagnon idéal pour les développeurs web et designers souhaitant valider l'implémentation de leurs sites web. Une fois activé, Screen Ruler vous permet de visualiser les tailles, marges, espacement, 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 avec d'autres éléments.
Utilisation
- Activez Screen Ruler en cliquant sur l'icône de l'extension, en sélectionnant "Screen Ruler" dans le menu contextuel, ou en utilisant le raccourci Alt/Option + Shift + R.
- Survolez les éléments sur les pages web pour afficher leurs tailles, marges, espacements, noms de balises, IDs et classes.
- Sélectionnez un élément en cliquant dessus directement, 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, déplaçant votre sélection vers l'élément parent, utilisez Alt/Option + Bas pour inverser votre sélection.
- Visualisez le CSS calculé de l'élément actuellement sélectionné dans le panneau latéral. Cliquez sur le bouton "Copier CSS" pour copier le CSS calculé de l'élément sélectionné dans votre presse-papiers.
Fonctionnalités
- Mesurer la taille en pixels de n'importe quel élément.
- Mesurer la distance en pixels entre deux éléments.
- Noms de balises HTML, noms de classes et IDs.
- Raccourcis de sélection parent/enfant.
- Les sélections réactives se redimensionnent avec votre fenêtre de navigateur.
- Accès depuis le menu contextuel.
- Inspection CSS calculée.
- Copier 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 offre également un niveau PRO qui débloque des fonctionnalités supplémentaires.
1. Inspecteur Flottant: Voyez les propriétés détaillées des éléments au survol, incluant position, taille, police rendue, couleurs et plus.
2. Visualisation du Modèle de Boîte: Diagramme du modèle de boîte montrant marges, bordures, espacement et dimensions du contenu.
3. Analyse d'Animation: Visualisez les courbes de timing d'animation CSS et copiez les propriétés CSS d'animation.
4. Extraction d'Assets: Extrayez et téléchargez images, SVGs et assets vectoriels directement depuis n'importe quelle page web.
5. Extraction de Couleurs: Extrayez et copiez les palettes de couleurs des éléments sélectionnés avec les valeurs hex, RGB et HSL.
6. Superposition de Grille de Layout: Superposez une grille de layout personnalisable pour un alignement parfait du design.
7. Captures d'Écran d'Éléments: Capturez des captures d'écran recadrées des éléments sélectionnés en utilisant Ctrl/Cmd + Shift + S.
8. Recherche par Sélecteur CSS: Trouvez et surlignez les éléments en utilisant des sélecteurs CSS.
9. Panneau Latéral Avancé: Analyse complète des éléments incluant styles calculés, modèle de boîte, couleurs, assets et animations.
Screen Ruler PRO nécessite un paiement unique pour un accès à vie.
Screen Ruler est Fait Pour
- Développeurs: Repérer les problèmes de layout ou identifier les problèmes d'alignement. Que vous ajustiez les marges et espacements, ou que vous vous assuriez simplement que tout s'aligne correctement, Screen Ruler devient un ajout indispensable à votre boîte à outils de développement.
- Designers: Assurez-vous que vos designs ont été implémentés avec une précision au pixel près. Screen Ruler agit comme un pont entre design et développement, vous permettant de vérifier que chaque élément s'aligne exactement comme vous l'aviez prévu.
Installation
- Screen Ruler est conçu spécifiquement pour la stabilité dans Google Chrome 116+.
- Screen Ruler est installable sur n'importe quel navigateur Chromium cependant, pour la meilleure expérience assurez-vous que votre navigateur supporte toutes les APIs requises (comme Side Panel et Offscreen). S'il y a des problèmes avec l'installation, mettez à jour votre navigateur vers la dernière version et réessayez.
Latest reviews
- (2025-08-05) André Cavallari: One of most useful front-end extensions, it worth each cent, had an issue with my activation but the author was pretty quick to answer and find a solution, so I recommend it to every developers.
- (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