Avec CSS Dig, vous pouvez analyser tous les sélecteurs CSS, la spécificité et les propriétés uniques de n'importe quelle page Web directement depuis Chrome. Cette extension est totalement gratuit et offre beaucoup de puissance aux développeurs.
Lorsque vous inspectez une feuille de style, vous obtiendrez beaucoup de données à partir du panneau CSS Dig. Il peut vous montrer des sélecteurs individuels, y compris des doublons et des niveaux de spécificité inutiles.
Pour commencer, installez simplement le plugin et ouvrez la fenêtre de la console. Vous trouverez deux onglets dans la fenêtre CSS Dig: Propriétés et sélecteurs.
Vous pouvez parcourir les résultats organisés par les propriétés (couleur, bordure, rembourrage) ou par les sélecteurs (classes, ID). Je trouve la fenêtre Propriétés la plus précieuse, car elle vous permet d'étudier les polices et les couleurs que vous utilisez.
Cet outil fonctionne à travers le tableau pour n'importe quel site Web, donc il est également pratique pour l'ingénierie inverse. Vous pouvez copier / coller le CSS directement à partir de cette fenêtre et le réutiliser sur vos propres projets.
Probablement le cas d'utilisation le plus courant pour CSS Dig est de supprimer les couleurs en double de votre palette de couleurs. Combien de nuances uniques de vert avez-vous vraiment besoin? Ou, combien de polices Sans-Serif différentes sont nécessaires pour une seule page?
Voir Aussi: Les Meilleures Applications/Outils De Test De Pénétration Pour Android -2017
CSS Dig est incroyablement simple, alors ne vous attendez pas à des douzaines de fonctionnalités comme chez DevTools. Au lieu de cela, ce plugin est plutôt orienté vers les développeurs de frontands qui vérifient les sites pour les sélecteurs répétitifs ou les propriétés en double.
Le code source du plugin est disponible gratuitement sur GitHub où vous trouverez également toutes les dernières mises à jour.
Voir Aussi: Découvrez Les Performances De Votre Site Sur Les Appareils Mobiles Et Les Ordinateurs