Analizirajte bilo koje web stranice kodove s CSS Dig Chrome proširenje

Mnogo toga možete učiniti Chrome DevTools od uređivanja web-lokacija uživo do proučavanja detaljnih HTTP zahtjeva. Ali sposobnost analize CSS obrazaca nije pečena u konzoli.

S CSS Dig, možete analizirati sve CSS selektori, specifičnost, i jedinstvena svojstva bilo koje web-stranice izravno iz preglednika Chrome. Ovo proširenje je potpuno besplatno i nudi puno snage za razvoj programera.

Dok pregledavate stilsku ploču, dobit ćete mnogo podataka iz CSS Dig ploče. To vam može pokazati pojedinačnih selektora, uključujući duplikati i nepotrebne razine specifičnosti.

Da biste započeli, jednostavno instalirajte dodatak i otvorite prozor konzole. Naći ćete dvije kartice u prozoru CSS Dig: Nekretnine i selektora.

Možete pregledavati rezultate organizirano prema svojstvima (boja, obrub, obloga) ili od strane selektora (klase, osobne iskaznice). Prozor Properties (Svojstva) smatram najvrednijim, jer vam omogućuje da proučavate koje fontove i boje koristite.

Ovaj alat radi na cijeloj ploči za bilo koju web-lokaciju, tako da je i zgodan za obrnuti inženjering nečiji dizajn. Možete kopirati / zalijepiti CSS izravno iz ovog prozora i ponovno ga koristiti na vlastitim projektima.

Vjerojatno najčešći slučaj uporabe za CSS Dig je očistite duple boje iz palete boja. Koliko vam je jedinstvenih zelenih nijansi doista potrebno? Ili, koliko je različitih sans-serif fontova potrebno za jednu stranicu?

CSS Dig je nevjerojatno jednostavan, stoga ne očekujte desetke značajki kao što je DevTools. Umjesto toga, ovaj je dodatak usmjerena prema razvojnim programerima sučelja mjesta za reviziju za selektor ponavljanja ili dvostruka svojstva.

izvorni kod dodatka je besplatno dostupan na GitHubu gdje ćete pronaći i sve najnovija ažuriranja.