Részletes CSS-ellenőr minden webhelyen a CSSPeeperrel a Chrome-hoz

A rendszeres Chrome DevTools panel őrült. Lehetővé teszi, hogy bármelyik oldalra mélyen merüljön, hogy tanulmányozza a webhely elrendezését, a CSS-t és még HTTP fejléceket is.

Sokat tehetsz a DevTools CSS felügyelővel. De nincs egyértelmű GUI panelje, és ez egy dolog, amit minden fejlesztő szeretne.

Nézze meg a CSSPeeper-t, egy ingyenes Chrome-kiterjesztést, amely hozzáadja ezt a GUI-ellenőrzést a böngészőjéhez. Lehetővé teszi, hogy tanulmányozza bármelyik elem CSS tulajdonságait bármelyik oldalon, bár csak a Chrome számára készült.

Miután telepítetted csak látogasson el egy weboldalra, és kattintson a kiterjesztés fő gombjára a Chrome bővítmények sávjában. A weblap tetején egy új ellenőrző ablak jelenik meg, amely részleteket tartalmaz az egyes fő elemekről.

Amikor böngészsz a webhelyen, rákattinthatsz bármelyik elemre, melyet szaggatott vonallal lát. Ez magában foglalhatja a gombokat, az oldalrészeket, a fejléceket, a navigációs elemeket.

Innen egy teljes ellenőrzést kap, amely részleteket tartalmaz a tipográfia, a színválasztás és a betűtípus stílusáról. Ez egy nagyszerű módja húzza a stílusokat közvetlenül a weboldalról anélkül, hogy magadba raknád a CSS kódot.

A CSSPeeper még lehetővé teszi válassza ki a kapcsolódó színeket egy beépített színválasztóval és színséma generátor. Képeket exportálhat oldalról, saját színsémákat építhet, és alkalmazza ezeket a saját makettjeire Photoshop vagy Sketch segítségével.

Én elsősorban ajánlja ezt a kiterjesztést a tervezők számára a fejlesztők helyett, mivel ez sokkal formatervezettebb plugin, amely a nyers CSS-t húzza és a kódot könnyen olvasható adatcsomagokká alakítja át.

De ez a bővítmény is segíthet a fejlesztőknek is! Ez tényleg egy erőteljes helyszíni ellenőrző eszköz minden CSS típushoz.

Nézze meg a CSSPeeper honlapját, hogy többet tudjon meg arról, hogy mit tehet. A főoldal tartalmaz egy linket a Chrome-áruházhoz, így ingyenesen telepítheti a bővítményt, és kipróbálhatja a tesztet.