Inspector detaliat CSS pe fiecare site cu CSSPeeper pentru Chrome

Panoul obișnuit Chrome DevTools este nebun puternic. Permite oricui să se scufunde în adânc în orice pagină pentru a studia aspectul site-ului, CSS și chiar și anteturile HTTP, dacă este necesar.

Puteți face foarte mult cu inspectorul CSS DevTools. Dar nu are un panou GUI clar și acesta este un lucru pe care fiecare dezvoltator ar dori-o.

Check out CSSPeeper, o extensie gratuită Chrome care adaugă acest browser GUI la browserul dvs. Vă permite să studiați proprietățile CSS ale oricărui element pe orice pagină, deși este creată doar pentru Chrome chiar acum.

Odată instalat tu doar vizitați o pagină Web și faceți clic pe butonul principal al extensiei din bara de extensii Chrome. O nouă fereastră de inspector apare în partea de sus a paginii web cu detalii despre fiecare element principal.

În timp ce navigați prin site, puteți face clic pe orice element pe care îl vedeți cu un contur punctat. Acestea pot include butoane, secțiuni de pagină, antete, elemente de navigare, pe care le numiți.

De acolo veți obține un inspector întreg cu detalii despre tipografia, opțiunile de culoare și stilurile de fonturi. Este un mod minunat de a face trageți stilurile direct dintr-o pagină web fără să vă grăbiți singur cu codul CSS.

CSSPeeper chiar vă permite alegeți culorile asociate cu un pick-color încorporat și generator de scheme de culori. Puteți să exportați imagini din pagini, să creați propriile scheme de culori și să aplicați-le în machete proprii cu Photoshop sau Sketch.

În primul rând recomandă această extensie pentru designeri în loc de dezvoltatori, deoarece este un plugin mult mai prietenos pentru designer care trage CSS brut și transformă codul în bucăți de date ușor de citit.

Dar acest plugin poate ajuta de asemenea dezvoltatorii! Este într-adevăr a instrument puternic de inspecție la fața locului pentru toate tipurile de CSS.

Uitați-vă la pagina de pornire a CSSPeeper pentru a afla mai multe despre ce poate face. Pagina principală include, de asemenea, un link către magazinul Chrome, astfel încât să puteți instala gratuit extensia și să o scoateți pentru o testare.