Detailed CSS Inspector on Any Sites With This Chrome Extension

Detailed CSS Inspector on Any Sites With This Chrome Extension

www.hongkiat.com hongkiat.com3 months ago in #Web Design Love67

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. Analyze Any Website’s Codes with CSS Dig Chrome Extension Analyze Any Website’s Codes with CSS Dig Chrome Extension There’s a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests…. Read more 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.  » Read More

Like to keep reading?

This article first appeared on hongkiat.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply