Analyser noen websider koder med CSS Dig Chrome Extension

Det er mye du kan gjøre med Chrome DevTools fra å redigere levende nettsteder for å studere detaljerte HTTP-forespørsler. Men evne til å analysere CSS mønstre er ikke bakt inn i konsollen.

Med CSS Dig, du kan analysere alt CSS selektorer, spesifisitet, og unike egenskaper av hvilken som helst nettside rett fra Chrome. Denne utvidelsen er helt gratis og gir mye strøm til frontend-utviklere.

Når du inspiserer et stilark, får du mye data fra CSS Dig-panelet. Det kan vise deg individuelle selektorer, gjelder også duplikater og unødvendige spesifisitetsnivåer.

For å komme i gang, bare installer plugin og åpne konsollvinduet. Du vil finne to faner i CSS grave vinduet: Eiendommer og velgere.

Du kan bla gjennom resultater organisert av eiendommer (farge, kantlinje, polstring), eller av selektorer (klasser, IDer). Jeg finner Egenskaper-vinduet for å være den mest verdifulle, da det lar deg studere hvilke skrifter og farger du bruker.

Dette verktøyet fungerer over hele linjen for et hvilket som helst nettsted, så det er også praktisk for reverse-ingeniør noens design. Du kan kopiere / lime inn CSS direkte fra dette vinduet og bruke det på egne prosjekter.

Sannsynligvis den vanligste brukssaken til CSS Dig er til Fjern dupliserte farger fra fargepaletten din. Hvor mange unike nyanser av grønt trenger du virkelig? Eller, hvor mange forskjellige sans-serif-skrifter er nødvendig for en side?

CSS Dig er utrolig enkelt, så forvent ikke dusinvis av funksjoner som med DevTools. I stedet er denne plugin heller rettet mot frontend-utviklere revisjonssteder for gjentatte selektorer eller dupliserte egenskaper.

De kildekode av plugin er tilgjengelig gratis på GitHub hvor du også finner alle siste oppdateringer.