UI Inspector - Éditeur CSS Visuel

Inspectez et modifiez visuellement les éléments et leur CSS directement sur la page pour un design et un débogage d'interface plus…

Un éditeur CSS visuel pour le navigateur Améliorez votre flux de travail de développement et de design web avec UI Inspector, une puissante extension Chrome qui vous permet d'inspecter, modifier et styliser n'importe quelle page web visuellement et en temps réel. Évitez la complexité des DevTools et effectuez des ajustements instantanés directement sur la page. Avec UI Inspector, vous pouvez : - Inspecter les éléments — activez l'extension et cliquez sur n'importe quel élément pour afficher ses attributs. - Modifier les attributs — changez les styles dans l'éditeur visuel et voyez les modifications en temps réel. - Contrôler la typographie — ajustez la famille de police, la taille, la graisse, la hauteur de ligne et l'espacement des lettres. - Configurer la mise en page et l'espacement — définissez les marges, les paddings, les propriétés d'affichage et l'alignement. - Améliorer les arrière-plans et les ombres — appliquez des couleurs personnalisées, des dégradés, du flou d'arrière-plan et des effets d'ombre. - Personnaliser les bordures — ajustez la largeur, le style, la couleur et le rayon des bordures. - Affiner l'apparence — contrôlez l'opacité, les modes de fusion et les transformations comme la rotation. - Voir toutes les modifications — consultez la liste de chaque élément modifié en un seul endroit. - Copier le CSS — affichez et copiez le CSS compilé de vos modifications instantanément. --- Débloquez UI Inspector PRO et : - Appliquer les changements globalement — utilisez le curseur de sensibilité pour appliquer automatiquement les modifications de style aux éléments similaires sur toute la page. - Modèles de style — enregistrez n'importe quel élément comme modèle réutilisable et appliquez-le sur n'importe quel site web en un seul clic. - Exporter en Tailwind, SCSS ou JSX — copiez vos modifications dans le format de code dont votre projet a besoin. - Exporter des captures d'écran — capturez des images PNG haute résolution d'éléments stylisés individuellement. - Exporter vers GitHub — générez un ticket GitHub avec vos modifications de design compilées en CSS. --- À qui s'adresse UI Inspector ? Développeurs web : - Accélérer le développement front-end : identifiez et corrigez rapidement les problèmes de mise en page ou de style en modifiant les éléments à la volée. - Simplifier le débogage CSS : contournez les DevTools avec un éditeur visuel et intuitif. - Exporter du code prêt pour la production : copiez les modifications en CSS, Tailwind, SCSS ou JSX directement dans votre base de code. Designers web : - Validation du design en temps réel : ajustez et perfectionnez les designs dans le navigateur pour garantir une implémentation pixel-perfect. - Rapprocher design et développement : collaborez plus efficacement en modifiant directement les pages en production. - Enregistrer et réutiliser des modèles : constituez une bibliothèque de styles réutilisables et appliquez-les de manière cohérente sur tous vos projets. --- Comment utiliser UI Inspector 1. Activer l'extension : cliquez sur l'icône UI Inspector dans la barre d'outils du navigateur ou appuyez sur Alt/Option + Shift + I. 2. Inspecter et modifier les éléments : survolez n'importe quel élément pour le sélectionner et afficher instantanément ses styles ajustables. 3. Modifier les styles visuellement : utilisez l'interface intuitive pour changer la typographie, la mise en page, l'espacement, les arrière-plans, les bordures, les ombres et plus encore. 4. Enregistrer et appliquer des modèles : créez des modèles de style pour un design cohérent et appliquez-les à n'importe quel élément sur n'importe quel site. 5. Exporter et partager : copiez le CSS en plusieurs formats, capturez des écrans ou exportez les modifications sous forme de ticket GitHub. --- Installation Compatible avec tout navigateur Chromium prenant en charge la Side Panel API. Pour de meilleurs résultats, assurez-vous que votre navigateur prend en charge toutes les APIs requises. En cas de problème d'installation, mettez à jour votre navigateur vers la dernière version et réessayez.