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.