Elemezze a webhely kódjait CSS Dig Chrome kiterjesztéssel

Sokat tudsz csinálni Chrome DevTools az élő webhelyek szerkesztésétől a részletes HTTP-kérések tanulmányozásáig. De a a CSS minták elemzésének képessége a konzolba nem sült.

Val vel CSS Dig, elemezheti az összeset CSS szelektorok, sajátosság, és egyedi tulajdonságok bármelyik weboldalt a Chrome-tól közvetlenül. Ez a kiterjesztés teljesen ingyenes, és sok energiát kínál a frontend fejlesztőknek.

A stíluslap ellenőrzése során sok adatot kap a CSS Dig panelről. Megmutathatja egyedi szelektorok, beleértve ismétlődések és szükségtelen specifitás szintje.

Az induláshoz egyszerűen telepítse a bővítményt és nyissa meg a konzolablakot. Megtalálod két fül a CSS Dig ablakban: Tulajdonságok és Szelektorok.

Böngészhet az eredmények között szervezeti tulajdonságok szerint (szín, határ, padding), vagy szelektorok által (osztályok, azonosítók). A Tulajdonságok ablakot a legértékesebbnek találom, mivel lehetővé teszi, hogy tanulmányozza, mely betűtípusokat és színeket használja.

Ez az eszköz minden weboldalon működik, így az is hasznos visszafejtés bárki tervezése. A CSS-t közvetlenül az ablakból másolhatja / beillesztheti és újra felhasználhatja saját projektjein.

Valószínűleg a CSS Dig leggyakoribb alkalmazása törölje az ismétlődő színeket a színpalettáról. Hány egyedi zöld árnyalatra van szüksége? Vagy, hogy hány különböző sans-serif betűtípus szükséges egy oldalra?

A CSS Dig hihetetlenül egyszerű, ezért ne várjon több tucat funkciót, mint például a DevTools. Ehelyett ez a bővítmény inkább a frontend fejlesztők felé irányul ismétlődő szelektorok vagy ismétlődő tulajdonságok ellenőrzési helyei.

A forráskód a plugin ingyenesen elérhető a GitHub-on, ahol megtalálhatja az összeset legújabb frissítések.