Jump to content

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


gvrizzo

Recommended Posts

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...