Analysoi kaikki verkkosivuston koodit CSS Dig Chrome -laajennuksella

Voit tehdä paljon Chrome DevTools live-sivustojen muokkaamisesta yksityiskohtaisiin HTTP-pyyntöihin. Mutta kyky analysoida CSS-malleja ei ole paistettu konsoliin.

Kanssa CSS Dig, voit analysoida kaikki CSS-valitsimet, erityispiirteet, ja ainutlaatuisia ominaisuuksia minkä tahansa Web-sivun suoraan Chromesta. Tämä laajennus on täysin ilmainen ja tarjoaa paljon tehoa frontend-kehittäjille.

Kun tarkastelet tyylitaulukkoa, saat paljon tietoa CSS Dig-paneelista. Se voi näyttää sinulle yksittäiset valitsimet, mukaan lukien kaksoiskappaleet ja tarpeettomia spesifisyyden tasoja.

Voit aloittaa yksinkertaisesti asenna laajennus ja avaa konsolin ikkuna. Tulet löytämään kaksi välilehteä CSS Dig -ikkunassa: ominaisuudet ja valitsimet.

Voit selata tuloksia järjestetään ominaisuuksien mukaan (väri, raja, pehmuste) tai valitsijat (luokat, tunnukset). Minusta Ominaisuudet-ikkuna on arvokkain, sillä sen avulla voit tutkia, mitä kirjasimia ja värejä käytät.

Tämä työkalu toimii kaikkialla verkossa, joten se on kätevä reverse-engineering kenenkään muotoilu. Voit kopioida / liittää CSS suoraan tästä ikkunasta ja käyttää sitä uudelleen omiin projekteihin.

Todennäköisesti CSS Digin yleisin käyttötapa on tyhjennä päällekkäiset värit värivalikoimastasi. Kuinka monta ainutlaatuista vihreää sävyä tarvitset? Tai kuinka monta eri sans-serif-fonttia tarvitaan yhdelle sivulle?

CSS Dig on uskomattoman yksinkertainen, joten älä odota kymmeniä ominaisuuksia, kuten DevToolsin kanssa. Sen sijaan tämä laajennus on pikemminkin suunnattu frontend-kehittäjille auditointipaikat toistuville valinnoille tai kaksoiskappaleille.

lähdekoodi pluginista on saatavilla ilmaiseksi GitHubissa, josta löydät myös kaikki Viimeisimmät päivitykset.