Every front-end developer knows the drill: right-click → Inspect → scroll through a mountain of inherited styles in the DevTools panel just to find the CSS of one button.
I got tired of it. So I built SnapCSS — a Chrome extension that lets you see the CSS of any element on any page with a single click.
How It Works
- Click the SnapCSS icon in your toolbar to activate inspect mode
- Hover over any element — it gets highlighted instantly
- Click the element — a clean floating panel shows you the full, cleaned CSS
- One-click copy to your clipboard
That's it. No DevTools, no noise, no digging through inherited rules.
Why I Built This
DevTools is powerful, but it's overkill when all you want is "what's the font-size, padding, and background of this button?" As a front-end developer, I do this dozens of times a day — checking how other sites style their components, debugging spacing issues, or just grabbing a quick reference.
SnapCSS strips away the complexity and gives you exactly what you need: the computed CSS of the element you clicked, formatted and ready to copy.
What Makes It Different from Similar Tools
Lightweight — only 61.4 KB, no bloat
Clean output — shows cleaned, relevant CSS instead of dumping every inherited property
Beautiful floating panel — stays on the page, doesn't take you to a separate view
Zero data collection — no analytics, no tracking, your browsing stays private
Install It
SnapCSS is free on the Chrome Web Store:
If you find it useful, a rating on the Chrome Web Store would mean a lot — it helps other developers discover it.
What's Next
I'm currently working on another extension called WebMCP DevTools for debugging the new WebMCP protocol (the standard that lets AI agents interact with websites). It's currently in review on the Chrome Web Store.
If you have feedback or feature requests for SnapCSS, drop a comment below — I'd love to hear what you think.