Effortlessly Inspect CSS on Any Site with Our Chrome Extension

The regular Chrome DevTools panel is crazy powerful. It lets anyone dive deep into any page to study a site’s layout, CSS, and even HTTP headers if needed.

You can do a lot with the DevTools CSS inspector. But it doesn’t have a clear GUI panel and that’s one thing every developer would love.

Check out CSSPeeper, a free Chrome extension that adds this GUI inspector to your browser. It lets you study the CSS properties of any element on any page, although it’s only built for Chrome right now.

Once installed you just visit a webpage and click the extension’s main button in the Chrome add-ons bar. A new inspector window appears on top of the webpage with details about each main element.

As you browse through the site you can click on any element you see with a dotted outline. This can include buttons, page sections, headers, navigation items, you name it.

From there you’ll get a whole inspector with details on the typography, color choices, and font styles. It’s a great way to pull styles directly from a webpage without digging into the CSS code yourself.

CSSPeeper even lets you pick related colors with a built-in color picker and color scheme generator. You can export images from pages, build your own color schemes, and apply these into your own mockups with Photoshop or Sketch.

I primarily recommend this extension for designers instead of developers as it’s a much more designer-friendly plugin that pulls raw CSS and transforms the code into easy-to-read chunks of data.

But this plugin can also help developers too! It’s really a powerful site inspection tool for all types of CSS.

Take a look at the CSSPeeper homepage to learn more about what it can do. The main page also includes a link to the Chrome store so you can install the extension free of charge and take it out for a test run.