
Show HN: CSS Scan – Instantly check or copy computed CSS from any element - guivr
http://guivr.github.io/cssscan
======
guivr
Hello Hacker News! Creator here, happy to answer any questions! :)

I decided to build CSS Scan to get computed styles with no hassle and in real-
time. It's faster than using browsers' Developer Tools and give all of the
styles in the shorthand way, this means no messy CSS or styles being
overwritten. You can also copy to clipboard by just clicking on it.

P.S.: Of course this is only for use cases you want to have an overall vision
of the styles; it's far from being a full alternative to Inspect Element.

It took me 50 hours and 17 minutes to develop. Inspired by @levelsio I
recorded all the development and made a speed video. If you want to check it:
[https://www.youtube.com/watch?v=OtsNNXpXcYs](https://www.youtube.com/watch?v=OtsNNXpXcYs)

~~~
geuis
You should check out that link on a mobile device. I’m not sure exactly what
I’m looking at. There’s no links and just a “buy” button.

~~~
guivr
Thanks, geuis. I'll look into that

------
ninjaranter
Isn't this literally getComputedStyle[1]? Chrome devtools already has a
'computed' section which shows the same thing. What additional functionality
does this provide that I'm missing?

[1] [https://developer.mozilla.org/en-
US/docs/Web/API/Window/getC...](https://developer.mozilla.org/en-
US/docs/Web/API/Window/getComputedStyle)

~~~
guivr
Not identical, just similar. getComputedStyle gets the default styling of the
browser too, and also some properties that are used just for rendering.

Besides that, you'd have to use the console for each element you want. With
CSS Scan you just have to hover it.

------
conceptpad
Great tool! I'd like to see you keep going with this. Quick feedback: it would
be useful to copy the entire ruleset, including the selector and brackets (as
an option). Further if you can reach into source via document.stylesheets,
grab the selectors from source (as another option).

~~~
guivr
Hey! I have good news! Just updated the app. Now you can copy the selector
name! If you use Chrome, the extension will update itself. On Firefox, I'll
implement auto-update functionality tomorrow. More updates to come!

------
a_r_8
Looks super useful but I don't want to buy before I try. The landing page says
"for the price you want", but the product page has a 1.99+ and I can't enter
less than that.

~~~
guivr
Hey, thanks! You can actually try if you're on a desktop. There's a Demo
button to test it :)

~~~
posamari
I don't see a demo button, where is it?

Edit: I see it now, the browser window has to be wide enough and not zoomed
in, otherwise the page goes into mobile view and the button disappears.

------
Globz
This is really GREAT! The timing is perfect, I have to rewrite a whole bunch
of CSS for a project and now I can easily pick and choose what I want to port
over to the new layout.

Thank you!

~~~
guivr
That's nice to hear, Globz! I hope you enjoy it =)

------
arxpoetica
Anyone from Chrome/FF/Safari teams willing to implement this functionality
into the default dev tools? It's __super handy __.

------
seanwilson
Can you share anything about how many sales you've made? I'm curious how
willing developers are to pay for tools like this. I'm working on selling a
Chrome extension as well so I'd be super interested in learning more.

~~~
guivr
Hey seanwilson, I actually made a lot more sales than I expected. $500 Revenue
so far. 167 sales :) I'm also planning to write an article, I'll update stats
on twitter (@gvrizzo)

~~~
seanwilson
By the way, how does the Gumroad integration and license checking work? You
get the extension files to download on purchase?

I'm integrating Paddle for payments into my extension. It requires you to
implement user accounts or license keys yourself though.

~~~
ezekg
What are you currently doing to handle licensing outside of Paddle? I'm
guessing you're building an Electron app?

------
ceagrass
I've used a similar tool[1] before to convert all styles of an element to
inline styles in order to copy it into a more isolated setting for testing,
and it worked pretty well for me. There were a lot of manual steps for me to
do this though, so CSS Scan seems like a pretty nice "one click" alternative.

[1]: [https://www.npmjs.com/package/computed-style-to-inline-
style](https://www.npmjs.com/package/computed-style-to-inline-style)

------
codegeek
This is a great tool. I hate inspecting element to check computed css
properties to troubleshoot issues for our clients. Definitely worth a shot.

~~~
guivr
Thank you for the support!

------
staffordrj
This looks great! Though it seems funny to charge for a tool that makes it
easier to copy other people's code.

~~~
guivr
Thanks! :) Yeah, but you can use it for yourself too, just to check your
styles or to study the web.

------
makeee
This looks super useful! Is it also able to grab media queries and other
styles that may not be applied at the current time (like style based on a
parent class that gets added later to trigger an animation)?

~~~
guivr
Thanks! It grabs the current media query only :)

------
King-Aaron
This is great. I've been looking for a good way to be able to identify between
active styles and legacy css that seems to build up over time, and this is a
pretty neat way to do it.

~~~
guivr
Glad you liked it! Thanks :)

------
Kagerjay
Is it possible you can show a partial grid?

e.g. there's so many boxes inside of boxes.

It would be nice if say within the `body` tag, you show items that are at most
1,2,3,4 levels deep at most.

------
andrenotgiant
I bought it! I looked into trying to do this myself and got stuck.

Also interested to hear how the sales go, I think charging a little money for
it is a great idea.

~~~
guivr
Thanks andre! :) The sales went pretty well! I'll share some stats on my
twitter @gvrizzo tomorrow. Also already shared some numbers on a reply here.

------
tomjohnneill
This is really cool.

Is there any way you can add the option to turn the CSS into React inline
styles?

------
johnmurch
I bought it - it’s cheaper than a coffee and Saves me time!

------
nolite
If we buy, do we get future updates?

~~~
mhb
He's asking for 3 bucks. Does that really matter?

~~~
nolite
Yes

------
nullbyte
This is basically an advertisement.

~~~
lunaru
HN has a pretty strong history of people posting their/other's projects,
commercial or otherwise and getting feedback. So in a way, every Show HN is an
advertisement. I don't believe this should be discouraged. I personally find
the Show HN posts far more interesting and closer to HN roots than the typical
tech/political news that dominates the front page these days.

