CSS Peeper – New tool for Web Designers

CSS Peeper is a browser extension that is a CSS viewer and is tailored for Designers. Using this designers can focus on design, and spend as little time as possible digging in code. What’s the line height, button, or font size on a website? All these questions get answered using CSS peeper. It enables you to inspect code in the easiest possible way. One can extract CSS and can build beautiful style guides.

Advantages:

• Easily accessible.
• Provides intuitive controls.
• Adaptation and cross-platform for any browser.
• Gives integration of its functionality into those products where there is no access to the kernel.
• Combine cloud storage and system into a single workspace.

Disadvantages:

• Constant updating is required.
• The various browser needs its adapted version of the program.
• They often require the ability to read and even change everything on web pages one visits, which in some cases can lead to accidents of data breaches, capture the passwords, track browsing, etc.

Installation:

Installing CSS peeper is like installing any other browser extension and involves only two steps:  

Step 1: Visit CSS peeper in either Chrome Web Store or Firefox Add-Ons and click on add to chrome.

Step 2: Click on Add extension.

Voila, you have your CSS peeper installed. After successful installation, you can see the top right side corner the extension will be added to your browser. 

Usage:

One can use this extension by simply going to the webpage whose CSS you want to know and simply click on it.

Example 1: GeeksforGeeks

General:

In the general tab, only some information is shown about headings, BODY, CSS file size, and load time.

Colors:

In the colors tab, we can see all the colors used on the web page with their color code and color. We can also copy the color code from there to our clipboard using the button highlighted below.

Assets:

In the assets tab, we can see all the assets used on the web page and can even export all of them or a few if needed by clicking on export all on top.

Individual elements:

We can even inspect individual elements like buttons and get all the CSS needed to make that button, text exactly like the one shown on the web page. For this, you simply need to click on the element you want to inspect and the CSS peeper will show its properties. A red-liked border comes on the element when you click the area you want to inspect, just like it has come over at “Courses at GeeksforGeeks”.

Below is another example, here we have inspected another element on this page. Arrow is used to show the highlighted area.

Example 2: Youtube

General:

In the general tab, only some information is shown about Fonts like headings, BODY, CSS file size, and load time.

Colors:

In the colors tab, we can see all the colors used on the web page with their color code and color. We can also copy the color code from there to our clipboard using the button highlighted below.

Assets:

In the assets tab, we can see all the assets used on the web page and can even export all of them or a few if needed by clicking on export all on top.

Individual elements:

We can even inspect individual elements like buttons and get all the CSS needed to make that button, text exactly like the one shown on the web page. For this, you simply need to click on the element you want to inspect and the CSS peeper will show its properties. A red-like border comes on the element when you click the area you want to inspect, just like it has come over at “Explore”.

Below is another example, here we have inspected another element on this page. Arrow is used to show the highlighted area.

In conclusion, CSS peeper is a very useful extension for web designers who want to get a sneak peek at some web page and want to know the CSS of it. But one should be very careful using this extension as they often require the ability to read and even change everything on web pages one visits, which in some cases can lead to accidents of data breaches, capture the passwords, track browsing, etc.