Analizējiet jebkuru vietnes kodu ar CSS Dig Chrome paplašinājumu

Ir daudz, ko varat darīt Chrome DevTools no rediģēšanas tiešraides tīmekļa vietnēm līdz detalizētu HTTP pieprasījumu izpētei. Bet spēja analizēt CSS modeļus nav cepta konsolē.

Ar CSS Dig, jūs varat analizēt visu CSS selektori, specifika, un unikālas īpašības no jebkuras tīmekļa lapas tieši no Chrome. Šis paplašinājums ir pilnīgi bez maksas un piedāvā lielu jaudu frontend izstrādātājiem.

Pārbaudot stilu, jūs saņemsiet daudz datu no CSS Dig paneļa. Tas var parādīt jums atsevišķiem selektoriem, tostarp dublikātus un nevajadzīgu specifiskuma līmeni.

Lai sāktu, vienkārši instalējiet spraudni un atveriet konsoles logu. Jūs atradīsiet divas cilnes logā CSS Dig: Rekvizīti un Atlasītāji.

Varat pārlūkot rezultātus organizē pēc īpašībām (krāsa, robeža, polsterējums) vai ar selektoriem (klases, ID). Es uzskatu, ka Properties logs ir visvērtīgākais, jo tas ļauj jums izpētīt, kurus fontus un krāsas lietojat.

Šis rīks darbojas visās vietnēs, tāpēc tas ir arī ērts reversā inženierija ikviena dizains. Jūs varat kopēt / ielīmēt CSS tieši no šī loga un atkārtoti izmantot to savos projektos.

Iespējams, ka CSS Dig ir visizplatītākais lietojums dzēst dublēt krāsas no jūsu krāsu paletes. Cik unikālu zaļo toņu jums tiešām ir nepieciešams? Vai arī cik dažādiem sans-serif fontiem ir nepieciešama viena lapa?

CSS Dig ir neticami vienkāršs, tāpēc negaidiet desmitiem funkciju, piemēram, ar DevTools. Tā vietā šis spraudnis ir drīzāk vērsti uz frontend izstrādātājiem revīzijas vietas atkārtotiem selektoriem vai dublējošām īpašībām.

The avota kods spraudnis ir pieejams bez maksas GitHub, kur jūs atradīsiet arī visu jaunākie atjauninājumi.