Analysera eventuella webbplatser kodar med CSS Dig Chrome Extension

Det finns mycket du kan göra med Chrome DevTools från att redigera levande webbplatser för att studera detaljerade HTTP-förfrågningar. Men förmåga att analysera CSS-mönster är inte bakad i konsolen.

Med CSS Dig, du kan analysera alla CSS-väljare, specificitet, och unika egenskaper av en webbsida direkt från Chrome. Denna förlängning är helt gratis och erbjuder mycket ström till frontend-utvecklare.

När du inspekterar ett stylesheet får du massor av data från CSS Dig-panelen. Det kan visa dig enskilda väljare, Inklusive dubbletter och onödiga specificitetsnivåer.

För att komma igång, helt enkelt installera plugin och öppna konsolfönstret. Hittar du två flikar i CSS-grävfönstret: Egenskaper och väljare.

Du kan bläddra i resultat organiserad av fastigheter (färg, kant, stoppning), eller av väljare (klasser, id). Jag hittar fönstret Egenskaper för att vara den mest värdefulla, eftersom det låter dig studera vilka teckensnitt och färger du använder.

Detta verktyg fungerar över hela linjen för alla webbplatser, så det är också praktiskt för reverse-engineering någon design. Du kan kopiera / klistra in CSS direkt från det här fönstret och återanvända det på dina egna projekt.

Förmodligen är det vanligaste användningsfallet för CSS Dig att töm dubbla färger från din färgpalett. Hur många unika nyanser av grön behöver du verkligen? Eller hur många olika sans-serif-teckensnitt är nödvändiga för en sida?

CSS Dig är otroligt enkelt, så förvänta dig inte dussintals funktioner som med DevTools. Istället är det här plugin ganska inriktade på frontendutvecklare revisionsställen för repetitionsselektorer eller dubbla egenskaper.

De källkod av plugin finns gratis på GitHub där du också hittar alla senaste uppdateringarna.