Analizuokite bet kokius svetainės kodus su „CSS Dig Chrome“ plėtiniu

Yra daug, ką galite padaryti „Chrome DevTools“ nuo redagavimo gyvų svetainių iki išsamių HTTP užklausų. Bet gebėjimas analizuoti CSS modelius nėra įdėta į konsolę.

Su CSS Dig, galite analizuoti visus CSS selektoriai, specifiškumas, ir unikalios savybės bet kurio tinklalapio iš „Chrome“. Šis plėtinys yra visiškai nemokama ir siūlo daug galios Frontend kūrėjams.

Apžiūrėję stilių lentelę, gausite daug duomenų iš CSS Dig panelės. Tai gali parodyti jums atskirų selektorių, įskaitant dublikatai ir nereikalingų specifiškumo lygių.

Norėdami pradėti, tiesiog įdiegti papildinį ir atidarykite konsolės langą. Rasite du skirtukai „CSS Dig“ lange: Savybės ir Pasirinkėjai.

Galite naršyti rezultatus organizuojami pagal savybes (spalva, siena, pamušalas) arba pasirinktys (klasės, ID). Aš manau, kad ypatybės langas yra vertingiausias, nes jis leidžia jums ištirti, kuriuos šriftus ir spalvas naudojate.

Šis įrankis veikia visose interneto svetainėse, todėl taip pat patogu atvirkštinės inžinerijos kas nors dizainas. CSS galite nukopijuoti / įklijuoti tiesiogiai iš šio lango ir pakartotinai naudoti savo projektuose.

Tikriausiai labiausiai paplitęs atvejis yra CSS Dig išvalykite pasikartojančias spalvas iš spalvų paletės. Kiek unikalių žaliųjų atspalvių jums tikrai reikia? Arba, kiek skirtingų sans-serif šriftų yra reikalingi vienam puslapiui?

CSS Dig yra neįtikėtinai paprasta, todėl nereikia tikėtis dešimčių funkcijų, pvz., Su „DevTools“. Vietoj to šis papildinys yra gana nukreiptas į „frontend“ kūrėjus pakartotinių selektorių arba dvigubų savybių audito vietos.

The pirminis kodas „GitHub“ programoje galima nemokamai naudotis „plugin“, kuriame taip pat rasite visus Naujausi Atnaujinimai.