Screen Ruler - Measure The Web

Screen Ruler est le compagnon idéal pour les développeurs web et les designers souhaitant valider l'implémentation de leurs sites web. Une fois activé, il vous permet de voir les tailles, les marges, les paddings, les noms de balises, les ID et les classes simplement en survolant n'importe quel contenu web. Vous pouvez également sélectionner un élément pour mesurer les distances par rapport à d'autres.

Utilisation

- Activez l'extension en cliquant sur l'icône, en la sélectionnant dans le menu contextuel du 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, ID et classes.
- Sélectionnez un élément en cliquant directement dessus ; cela mettra la surbrillance en rouge. Pour désélectionner, cliquez à nouveau, appuyez sur Échap ou sélectionnez un élément différent.
- Pour sélectionner le parent, utilisez `Alt/Option + Haut`. Utilisez `Alt/Option + Bas` pour inverser votre sélection.
- Affichez 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é 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 quelconques.
- Noms de balises HTML, noms de classes et ID.
- Raccourcis de sélection parent/enfant.
- Les sélections réactives s'adaptent à la taille de la fenêtre de votre navigateur.
- Accès depuis le menu contextuel.
- Inspection du CSS calculé.
- Copier le CSS dans le presse-papiers.
- Règles de page pour des mesures précises (guides horizontaux et verticaux avec réticule).
- Outil pipette pour échantillonner et copier les couleurs de n'importe où sur la page.
- 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`.
- Fonctionne sur n'importe quelle page web.
- Personnalisez les raccourcis clavier en visitant `chrome://extensions/shortcuts`.

Screen Ruler PRO
Un niveau PRO est également disponible, qui débloque des fonctionnalités supplémentaires.

- Inspecteur flottant : Voyez les propriétés détaillées de l'élément au survol, y compris la position, la taille, la police rendue, les couleurs et plus encore.
- Problèmes d'accessibilité : Détectez et mettez en surbrillance automatiquement les échecs de contraste WCAG dans votre sélection avec des recommandations concrètes.
- Mode réactif : Testez vos designs sur différents affichages d'appareils avec un émulateur d'appareil interactif et des dimensions personnalisées.
- Visualisation des ombres portées : Décomposition interactive des ombres portées multicouches avec une vue éclatée.
- Analyse d'animation : Visualisez les courbes de timing d'animation CSS et copiez les propriétés d'animation.
- Extraction d'actifs : Extrayez et téléchargez des images, des SVG et des actifs vectoriels.
- Extraction de couleurs : Extrayez et copiez des palettes de couleurs à partir du contenu sélectionné avec des valeurs hex, RGB et HSL.
- Superposition de grille de mise en page : Superposez une grille de mise en page personnalisable pour un alignement parfait du design.
- Recherche de sélecteur CSS : Trouvez et mettez en surbrillance des éléments à l'aide de sélecteurs CSS.
- Typographie : Analysez et extrayez tous les styles de typographie utilisés dans votre sélection.
- Mode Rayons X : Révélez la structure sous-jacente de la page en soulignant tout le contenu.

PRO nécessite un paiement unique pour un accès à vie.

Fait pour

- Développeurs : Repérez les problèmes de mise en page ou identifiez les problèmes d'alignement. Que vous ajustiez les marges et les paddings, ou que vous vous assuriez simplement que tout est correctement aligné, cet outil 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. Il sert de pont entre le design et le développement, vous permettant de vérifier si chaque composant s'aligne exactement comme vous l'aviez prévu.

Installation

- Conçu spécifiquement pour la stabilité dans Google Chrome 116+.
- Installable sur n'importe quel navigateur Chromium ; cependant, pour la meilleure expérience, assurez-vous que votre navigateur prend en charge toutes les API requises (comme Side Panel et Offscreen). En cas de problème d'installation, mettez à jour votre navigateur vers la dernière version et réessayez.