Showdev: I made a browser extension to help you check or copy computed CSS quicker than Dev Tools

#showdev #webdev #discuss

Dear DEV.to community,

Creator here, happy to answer any questions :)

The problem

As a web developer, I always caught myself having to open Dev Tools when curious about some box-shadow, border-radius or any other rule of an element I liked on the web.

And when you use the Dev Tools to inspect, if the element matches many CSS selectors, you might need to scroll a lot to figure out how it is styled and which rules aren’t being overwritten.

And if by any reason you want to copy the styles, it’s a pain. Alternatively, you can use the Computed Styles tab - but then you’ll get all the rules in longhand form, which is bloated and it converts all units to pixel, ignoring %, em, calc(), etc and completely breaking responsiveness.

The solution

So I built CSS Scan. With it, wherever you hover your mouse over, you instantly get the clean, computed (but responsive) CSS of that element, and you can copy all its rules with a single click.

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.

It's a browser extension compatible with Chrome, Firefox, Safari, and Edge.

By the way, if you have any ideas or suggestions to improve this flow, I'm open to hearing from you!

Since the first version, which was launched 9 months ago, I’ve implemented new features, bug fixes, and general improvements:

Code syntax highlighting
Show rendered font
Show element dimensions
Option to pin the box
Shortcuts (Lots of people asked)
Option to move the UI buttons to the bottom
Option to pause the scanner
Option to truncate classes names
Show :hover styles separated
Copy :hover styles merged or separated
Traverse the element and scan the parent
Identifies when elements are being overlapped
Now it works on iframes!
More shorthand rules support
i18n: Chinese (simplified and traditional) and Portuguese
Redesign UI and landing page

Try the free demo on our website!

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.

P.S.: Please keep in mind that this extension is only for use cases when you want to have an overall vision of the styles; it's far from being a full alternative to Inspect Element.

P.S. 2: The first version took me precisely 50 hours and 17 minutes to develop. I recorded all the development and made a nice speed video! You can check it at https://www.youtube.com/watch?v=OtsNNXpXcYs