Analizați codurile oricăror site-uri web cu Extensia CSS Dig Exam

Aveți multe de făcut Chrome DevTools de la editarea site-urilor live la studierea cererilor HTTP detaliate. Cu exceptia capacitatea de a analiza modelele CSS nu este coaptă în consola.

Cu CSS Dig, puteți analiza toate Selectori CSS, specificitate, și proprietăți unice a oricărei pagini web direct de la Chrome. Această extensie este total gratuită și oferă o mulțime de putere dezvoltatorilor frontend.

Pe măsură ce inspectați o foaie de stil, veți obține o mulțime de date din panoul CSS Dig. Te poate arăta selectori individuali, inclusiv duplicate și nivelele de specificitate inutile.

Pentru a începe, pur și simplu instalați pluginul și deschideți fereastra consolei. Vei găsi două file în fereastra CSS Dig: Proprietăți și selectori.

Puteți căuta rezultate organizat de proprietăți (culoare, margine, umplutură) sau prin selectori (clase, ID-uri). Consider că fereastra Proprietăți este cea mai valoroasă, deoarece vă permite să studiați fonturile și culorile pe care le utilizați.

Acest instrument funcționează de-a lungul oricărui site web, deci este de asemenea util Inginerie inversă proiectarea oricui. Puteți copia / insera CSS direct din această fereastră și reutilizați-o pe propriile dvs. proiecte.

Probabil cel mai frecvent caz de utilizare pentru CSS Dig culori duplicate clare din paleta de culori. Câte nuante unice de verde aveți nevoie? Sau, cât de multe fonturi sans-serif diferite sunt necesare pentru o pagină?

CSS Dig este incredibil de simplu, deci nu vă așteptați la zeci de caracteristici, cum ar fi cu DevTools. În schimb, acest plugin este mai degrabă orientate spre dezvoltatorii frontend site-uri de audit pentru selectori repetate sau proprietăți duplicate.

cod sursa din plugin este disponibil gratuit pe GitHub unde veți găsi și toate ultimele actualizări.