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:
Glad you got off the sofa a few times during the code-a-thon, you could have spent all that time in front of a games console, so well done for completing the task.
Besides that, you'd have to use the console for each element you want. With CSS Scan you just have to hover 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.
I'm integrating Paddle for payments into my extension. It requires you to implement user accounts or license keys yourself though.
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.
Also interested to hear how the sales go, I think charging a little money for it is a great idea.
Is there any way you can add the option to turn the CSS into React inline styles?