Analysér eventuelle websteds koder med CSS Dig Chrome Extension

Der er meget, du kan gøre med Chrome DevTools fra at redigere levende websteder til at studere detaljerede HTTP-anmodninger. Men evnen til at analysere CSS mønstre er ikke bagt ind i konsollen.

Med CSS Dig, du kan analysere alle CSS selektorer, specificitet, og unikke egenskaber af enhver webside lige fra Chrome. Denne udvidelse er helt gratis og giver meget strøm til frontend-udviklere.

Når du inspicerer et stylesheet, får du masser af data fra CSS Dig-panelet. Det kan vise dig individuelle selektorer, inklusive dubletter og unødvendige specificitetsniveauer.

For at komme i gang, simpelthen installer plugin'et og åbn konsolvinduet. Du finder to faner i CSS Dig-vinduet: Ejendomme og vælgere.

Du kan gennemse resultater organiseret af ejendomme (farve, grænse, polstring), eller af selektorer (klasser, id'er). Jeg finder vinduet Egenskaber for at være den mest værdifulde, da det giver dig mulighed for at studere hvilke skrifttyper og farver du bruger.

Dette værktøj virker på tværs af bordet for enhver hjemmeside, så det er også praktisk til reverse-engineering andens design. Du kan kopiere / indsætte CSS direkte fra dette vindue og genbruge det på dine egne projekter.

Sandsynligvis den mest almindelige brugssag til CSS Dig er til klare dobbelt farver fra din farvepalet. Hvor mange unikke nuancer af grønt har du virkelig brug for? Eller hvor mange forskellige sans-serif-skrifttyper er nødvendige for en side?

CSS Dig er utrolig simpelt, så forvent ikke snesevis af funktioner som med DevTools. I stedet er dette plugin ret gearet til frontend-udviklere revisionssteder for gentagne selektorer eller duplikategenskaber.

Det kildekode af plugin'en er tilgængelig gratis på GitHub, hvor du også finder alle de seneste opdateringer.