Gedetailleerde CSS-inspecteur op elke site met CSSPeeper voor Chrome

Het normale Chrome DevTools-paneel is gek krachtig. Hiermee kan iedereen diep in een pagina duiken om de lay-out van een site, CSS en zelfs HTTP-headers te bestuderen, indien nodig.

U kunt veel doen met de DevTools CSS-inspecteur. Maar het heeft geen duidelijk GUI-scherm en dat is iets waar elke ontwikkelaar dol op zou zijn.

Bekijk CSSPeeper, een gratis Chrome-extensie die deze GUI-inspector aan je browser toevoegt. Hiermee kunt u de CSS-eigenschappen van elk element op elke pagina bestuderen, hoewel het op dit moment alleen voor Chrome is gemaakt.

Eenmaal geïnstalleerd, gewoon bezoek een webpagina en klik op de hoofdknop van de extensie in de Chrome-add-onsbalk. Boven aan de webpagina verschijnt een nieuw inspectievenster met details over elk hoofdelement.

Terwijl u door de site bladert, kunt u klikken op elk element dat u ziet met een stippellijn. Dit kan knoppen, paginasecties, headers, navigatie-items zijn, noem maar op.

Van daaruit krijg je een hele inspecteur met details over de typografie, kleurkeuzes en lettertypestijlen. Het is een geweldige manier om stijlen rechtstreeks van een webpagina halen zonder zelf in de CSS-code te duiken.

CSSPeeper laat je zelfs kies verwante kleuren met een ingebouwde kleurenkiezer en kleurenschema generator. U kunt afbeeldingen van pagina's exporteren, uw eigen kleurenschema's maken en pas deze toe in je eigen mockups met Photoshop of Sketch.

Ik voornamelijk beveel deze extensie aan voor ontwerpers in plaats van ontwikkelaars, omdat het een veel meer ontwerpvriendelijke plug-in is die ruwe CSS ophaalt en de code omzet in gemakkelijk te lezen stukjes data.

Maar deze plug-in kan ook ontwikkelaars helpen! Het is echt een krachtige site inspectie tool voor alle soorten CSS.

Bekijk de CSSPeeper-startpagina voor meer informatie over wat het kan doen. De hoofdpagina bevat ook een koppeling naar de Chrome-winkel, zodat u de extensie gratis kunt installeren en deze kunt uitproberen voor een testrun.