AIMRAN Inspector
Inspectez tailles, couleurs, contraste, typo et variables CSS de tout élément, mesurez les distances et éditez son CSS en direct.
AIMRAN Inspector transforme n’importe quelle page web en laboratoire front-end. Cliquez sur l’icône de l’extension (ou appuyez sur Alt+Maj+I), survolez la page et cliquez sur un élément pour voir comment il est construit et tester des modifications CSS sur le site réel.
Ce qu’il affiche
- Modèle de boîte visuel (margin, border, padding et contenu) avec des mesures exactes et une étiquette tag#id.classe.
- Un sélecteur CSS unique prêt à copier et un fil d’Ariane pour parcourir les ancêtres.
- Couleurs du texte, du fond, des bordures et des SVG en HEX, RGB ou HSL, avec le fond effectif calculé même à travers des calques semi-transparents.
- Contraste WCAG avec résultats AA et AAA pour le texte normal et le grand texte.
- Typographie complète : famille déclarée, police réellement rendue, taille en px et en rem, graisse et interligne.
- Styles calculés sans bruit, regroupés par catégorie, ainsi que les variables CSS utilisées par l’élément avec leur valeur résolue.
- Code HTML de l’élément, formaté et prêt à copier.
Outils
- Mesure des distances : maintenez Alt et pointez un autre élément pour voir les écarts en pixels, avec des repères comme dans les applications de design.
- Grille de 8 px, colonnes configurables et ligne de base pour vérifier les alignements.
- Pipette à l’écran avec historique des couleurs récentes.
- Aller à un sélecteur CSS ou chercher des éléments par leur texte.
- Copier ou télécharger une capture PNG de l’élément.
Éditeur CSS en direct
- Validation ligne par ligne, autocomplétion, réglages rapides et historique par élément.
- Extraits enregistrés pour réutiliser des styles sur d’autres éléments.
- Export en CSS, variables CSS, SCSS, objet de style JS/React ou classes Tailwind approximatives.
À votre façon
- Thème clair, sombre ou automatique, sept couleurs d’accentuation, densité compacte ou confort, taille du texte, largeur redimensionnable et opacité du panneau.
- Côté et position mémorisés, onglet initial, onglets visibles et leur ordre, et couleurs du calque de boîte.
- Exportez et importez vos réglages en JSON.
- Interface en français, anglais, espagnol et allemand.
Comment l’utiliser
- Ouvrez n’importe quel site et cliquez sur l’icône d’AIMRAN Inspector ou appuyez sur Alt+Maj+I.
- Survolez la page et cliquez sur l’élément à étudier. Pendant la sélection, la page ne reçoit aucun clic : aucun lien ni bouton ne se déclenche par erreur.
- Parcourez les onglets Aperçu, Couleurs, Typo, Styles, Éditer et Code. Les flèches parcourent l’arbre, Espace épingle la sélection, Alt mesure, G affiche les repères.
- Appuyez sur Échap, l’icône ou la × pour quitter. La page retrouve son état d’origine.
Pourquoi l’installer
- Un seul panneau, plus direct que les DevTools pour les vérifications courantes de design et de mise en page.
- Un panneau isolé que le CSS du site ne peut pas casser et qui ne ralentit pas la page : testé sur des pages de 20 000 nœuds.
Confidentialité L’extension n’agit que dans l’onglet actif et uniquement quand vous l’activez. Elle lit l’élément choisi, le traite dans votre navigateur et n’envoie rien à aucun serveur. Elle enregistre vos préférences, vos extraits CSS et les couleurs de la pipette dans le stockage de Chrome. Sans compte, sans statistiques, sans publicité et sans pistage.