Analizirajte kode za katerokoli spletno stran s CSS Dig Chrome Extension

S tabo lahko veliko storiš Chrome DevTools od urejanja spletnih mest v živo do preučevanja podrobnih zahtev HTTP. Toda sposobnost analiziranja vzorcev CSS v konzolo ni pečena.

S Kopiranje CSS, lahko analizirate vse Izbirniki CSS, specifičnosti, in edinstvene lastnosti katere koli spletne strani neposredno iz Chroma. Ta razširitev je popolnoma brezplačna in ponuja veliko moči za razvijalce.

Ko pregledujete slogovno tabelo, boste dobili veliko podatkov iz plošče CSS Dig. Lahko vam pokaže posameznih selektorjev, vključno z dvojnikov in nepotrebne ravni specifičnosti.

Če želite začeti, preprosto namestite vtičnik in odprite okno konzole. Boste našli dva zavihka v oknu za kopiranje CSS: Lastnosti in Izbirniki.

Lahko brskate po rezultatih organizirane po lastnostih (barva, obroba, oblazinjenje) ali izbirniki (razredi, ID-ji). Okno z lastnostmi se mi zdi najbolj dragoceno, saj vam omogoča, da preučite, katere pisave in barve uporabljate.

To orodje deluje na vseh področjih, zato je tudi priročno obratni inženiring nikomur. Lahko kopirate / prilepite CSS neposredno iz tega okna in ga znova uporabite na svojih projektih.

Verjetno najpogostejši primer uporabe za CSS Dig je jasne podvojene barve iz vaše barvne palete. Koliko edinstvenih odtenkov zelene res potrebujete? Ali, koliko različnih pisav sans-serif je potrebno za eno stran?

CSS Dig je neverjetno preprost, zato ne pričakujte več deset funkcij, kot je DevTools. Namesto tega je ta vtičnik precej usmerjene v razvijalce vmesnikov revizijska mesta za ponovitvene selektorje ali podvojene lastnosti.

The izvorno kodo vtičnika je na voljo brezplačno na GitHubu, kjer boste našli tudi vse najnovejše posodobitve.