I made a browser extension to copy and inspect CSS faster than Dev Tools

[gvrizzo]

Hey guys,
Creator here, happy to answer any questions :)

The problem

While working with web development, I've always found myself crushing my head to understand why the CSS was not working, looking through thousands of CSS rules on the browsers’ Dev Tools, scrolling and scrolling...

And while surfing the web, sometimes I just wanted to get 1 thing from a framework (specifically Bootstrap’s alert) or am curious about what is the amazing box-shadow, font, border-radius, etc of an element I just saw.

The solution

A browser extension that when activated on a page, enables you to instantly visualize the CSS of any element you hover over and let you copy its entire rules with a single click.

Check out the free demo on the website: https://getcssscan.com

CSS Scan is particularly useful for:

• Discovering how your favorite websites are styled;
• Debugging your own code;
• Moving your codebase;
• Copying specific elements from frameworks/themes/templates to use them without importing huge CSS files.

 

This is a work that has taken me almost 1 year so far, so I’m excited to share with you and genuinely interested in hearing what you think about it.