Analyzujte všetky kódy webových stránok pomocou rozšírenia CSS Dig Chrome

Môžeme s tým urobiť veľa Chrome DevTools od editovania živých webových stránok až po štúdium podrobných žiadostí HTTP. Ale schopnosť analyzovať vzory CSS nie je vypálená do konzoly.

s CSS Dig, môžete analyzovať všetky Voľby CSS, špecifickosť, a jedinečné vlastnosti akejkoľvek webovej stránky priamo z prehliadača Chrome. Toto rozšírenie je úplne zadarmo a ponúka veľkú silu pre vývojárov frontend.

Pri kontrole šablóny štýlov získate veľa údajov z panelu CSS Dig. Môže vám to ukázať individuálne výbery, počítajúc do toho duplikáty a zbytočné úrovne špecifickosti.

Ak chcete začať, jednoducho nainštalujte doplnok a otvorte okno konzoly. Nájdete to dve karty v okne CSS Dig: vlastnosti a selektory.

Môžete prehliadať výsledky organizované podľa vlastníctva (farba, okraj, polstrovanie) alebo výberovými prvkami (triedy, ID). Okno Vlastnosti považujem za najcennejšie, pretože vám umožňuje študovať, ktoré fonty a farby používate.

Tento nástroj funguje naprieč všetkými webovými stránkami, takže je tiež praktický reverzné inžinierstvo návrh každého. Môžete skopírovať / prilepiť CSS priamo z tohto okna a použiť ho na svoje vlastné projekty.

Pravdepodobne najčastejším prípadom použitia pre službu CSS Dig to is vyčistiť duplicitné farby z farebnej palety. Koľko jedinečných odtieňov zelenej skutočne potrebujete? Alebo koľko rôznych sans-serif písiem je potrebné pre jednu stránku?

CSS Dig je neuveriteľne jednoduchý, takže nečakajte desiatky funkcií, ako je napríklad DevTools. Namiesto toho je tento plugin skôr zamerané na vývojárov frontend audítorské stránky pre opakované selektory alebo duplicitné vlastnosti.

zdrojový kód zásuvného modulu je k dispozícii bezplatne na GitHub, kde nájdete aj všetky najnovšie aktualizácie.