Analysez les codes de n'importe quel site Web avec l'extension CSS Dig Chrome

Il y a beaucoup de choses que vous pouvez faire avec Chrome DevTools de l'édition de sites Web en direct à l'étude de requêtes HTTP détaillées. Mais le capacité à analyser les modèles CSS n'est pas cuit dans la console.

Avec CSS Dig, vous pouvez analyser tout Sélecteurs CSS, spécificité, et propriétés uniques de n'importe quelle page Web directement à partir de Chrome. Cette extension est totalement gratuite et offre beaucoup de puissance aux développeurs frontaux.

Lorsque vous inspectez une feuille de style, vous obtenez de nombreuses données du panneau CSS Dig. Il peut vous montrer sélecteurs individuels, comprenant les doublons et niveaux de spécificité inutiles.

Pour commencer, tout simplement installer le plugin et ouvrez la fenêtre de la console. Tu trouveras deux onglets dans la fenêtre CSS Dig: Propriétés et Sélecteurs.

Vous pouvez parcourir les résultats organisé par propriétés (couleur, bordure, rembourrage), ou par sélecteurs (classes, identifiants). Je trouve la fenêtre Propriétés très utile car elle vous permet d’étudier les polices et les couleurs que vous utilisez..

Cet outil fonctionne pour tous les sites Web. Il est donc également utile pour ingénierie inverse la conception de quiconque. Vous pouvez copier / coller le CSS directement à partir de cette fenêtre et le réutiliser pour vos propres projets..

Le cas d’utilisation le plus courant de CSS Dig est probablement de effacer les couleurs en double de votre palette de couleurs. De combien de nuances de vert uniques avez-vous vraiment besoin? Ou combien de polices sans empattement différentes sont nécessaires pour une page?

CSS Dig est incroyablement simple, ne vous attendez donc pas à des dizaines de fonctionnalités comme avec DevTools. Au lieu de cela, ce plugin est plutôt orienté vers les développeurs frontaux audit des sites pour les sélecteurs de répétition ou les propriétés en double.

le code source du plugin est disponible gratuitement sur GitHub où vous trouverez également tous les dernières mises à jour.