The unchanging Chrome DevTools row is crazy powerful. It lets anyone dive low into any page to investigate a site’s layout, CSS, and even HTTP headers if needed.
You can do a lot with a DevTools CSS inspector. But it doesn’t have a transparent GUI row and that’s one thing any developer would love.
Check out CSSPeeper, a giveaway Chrome prolongation that adds this GUI examiner to your browser. It lets we investigate a CSS properties of any component on any page, nonetheless it’s usually built for Chrome right now.
Once commissioned we only visit a webpage and click a extension’s categorical button in a Chrome add-ons bar. A new examiner window appears on tip of a webpage with sum about any categorical element.
As we crop by a site we can click on any component we see with a dotted outline. This can embody buttons, page sections, headers, navigation items, we name it.
From there you’ll get a whole examiner with sum on a typography, tone choices, and rise styles. It’s a good approach to pull styles directly from a webpage but digging into a CSS formula yourself.
CSSPeeper even lets we pick associated colors with a built-in tone picker and color intrigue generator. You can trade images from pages, build your possess tone schemes, and apply these into your possess mockups with Photoshop or Sketch.
I essentially recommend this prolongation for designers instead of developers as it’s a most some-more designer-friendly plugin that pulls tender CSS and transforms a formula into easy-to-read chunks of data.
But this plugin can also assistance developers too! It’s unequivocally a powerful site investigation apparatus for all forms of CSS.
Take a demeanour during the CSSPeeper homepage to learn some-more about what it can do. The categorical page also includes a couple to a Chrome store so we can install a extension giveaway of assign and take it out for a exam run.