Analüüsige mis tahes veebisaidi koode CSS Dig Chrome'i laiendusega

Seal on palju, mida saate teha Chrome DevTools live-veebisaitide redigeerimisest kuni üksikasjalike HTTP-päringute uurimiseni. Kuid võime analüüsida CSS-mustreid ei küpseta konsooli.

Koos CSS Dig, saate kõiki analüüsida CSS-selektorid, spetsiifilisus, ja unikaalsed omadused mis tahes veebilehe otse Chrome'ist. See laiendus on täiesti tasuta ja pakub frontendi arendajatele palju jõudu.

Kui kontrollite stiili, saad CSS digipaneelilt palju andmeid. See võib teile näidata üksikud selektorid, kaasa arvatud dubleerib ja tarbetuid spetsiifilisuse tasemeid.

Lihtsalt alustamiseks installige plugin ja avage konsooli aken. Leiad kaks vahekaarti CSS Dig aknas: Omadused ja Valijad.

Saate sirvida tulemusi mida korraldavad omadused (värv, piir, polsterdus) või selektorite poolt (klassid, ID-d). Leian, et omaduste aken on kõige väärtuslikum, sest see võimaldab teil uurida, milliseid fonte ja värve te kasutate.

See tööriist töötab kõikidel veebisaitidel, nii et see on ka mugav pöördtehnoloogia kellegi disain. CSS-i saab kopeerida / kleepida otse sellest aknast ja taaskasutada seda oma projektides.

Tõenäoliselt on CSS Dig kõige levinum kasutusviis tühjendage topeltvärvid värvipaletist. Mitu unikaalset rohelist tooni te tegelikult vajate? Või kui palju erinevaid sans-serif-fonte on vaja ühe lehe jaoks?

CSS Dig on uskumatult lihtne, nii et ärge oodake kümneid funktsioone nagu DevToolsiga. Selle asemel on see plugin pigem suunatud arendajatele kordusvalijate või dubleerivate omaduste auditeerimiskohad.

The lähtekood plugin on tasuta saadaval GitHubis, kus leiate ka kõik viimased uuendused.