Yksityiskohtainen CSS-tarkastaja jokaiseen sivustoon, jossa on CSSPeeper for Chrome
Tavallinen Chrome DevTools -paneeli on hullu voimakas. Sen avulla kuka tahansa voi sukeltaa syvälle mihin tahansa sivuun, jotta voit tutkia sivuston ulkoasua, CSS: ää ja jopa HTTP-otsakkeita tarvittaessa.
Voit tehdä paljon DevTools CSS -tarkastajan kanssa. Mutta sillä ei ole selkeää GUI-paneelia ja se on yksi asia, jota jokainen kehittäjä rakastaa.
Tarkista CSSPeeper, ilmainen Chrome-laajennus, joka lisää tämän GUI-tarkastajan selaimeesi. Sen avulla voit tutkia minkä tahansa elementin CSS-ominaisuuksia millä tahansa sivulla, vaikka se on rakennettu vain Chromeen juuri nyt.
Kun olet asentanut sinut juuri käy verkkosivulla ja napsauta laajennuksen pääpainiketta Chrome-lisäosien palkissa. Uusi tarkastusikkuna ilmestyy verkkosivun päälle, jossa on yksityiskohtaiset tiedot jokaisesta pääelementistä.
Kun selaat sivustoa, voit napsauttaa mitä tahansa elementtiä, jossa näkyy katkoviiva. Tähän voi sisältyä painikkeita, sivuosioita, otsikoita, navigointiaineita, nimesi.
Sieltä saat koko tarkastajan, jossa on yksityiskohtia typografiasta, värivalinnoista ja kirjasintyyleistä. Se on loistava tapa vedä tyylit suoraan verkkosivulta ilman kaivaa itse CSS-koodiin.
CSSPeeper antaa jopa sinulle mahdollisuuden valitse niihin liittyvät värit sisäänrakennetulla värivalitsimella ja värimallien generaattori. Voit viedä kuvia sivuilta, rakentaa omia värejä ja soveltaa näitä omiin malleihisi Photoshopin tai Sketch-sovelluksen kanssa.
Olen ensisijaisesti suosittele tätä laajennusta suunnittelijoille kehittäjien sijasta, koska se on paljon suunnittelijaystävällisempi plugin, joka vetää raakaa CSS: ää ja muuntaa koodin helposti luettaviksi tietokappaleiksi.
Mutta tämä laajennus voi myös auttaa kehittäjiä! Se on todella a tehokas sivuston tarkastustyökalu kaikille CSS-tyyppisille.
Katso CSSPeeperin kotisivuilta lisätietoja siitä, mitä se voi tehdä. Pääsivulla on myös linkki Chrome-myymälään, joten voit asentaa laajennuksen maksutta ja ottaa sen testiajoa varten.
