I feel like this part of dev tools needs a re-design. CSS variables and utility classes have made it too hard to see whats being applied to an element.
I want to see:
1. The property
2. The selector that added it
3. The computed variable value alongside the variable (blue, 10px, 4deg, etc..)
4. file:line of authorship
- I feel like this part of dev tools needs a re-design. CSS variables and utility classes have made it too hard to see whats being applied to an element. I want to see: 1. The property 2. The selector that added it 3. The computed variable value alongside the variable (blue, 10px, 4deg, etc..) 4. file:line of authorship
I find myself in the "computed" tab way more often than the "styles" tab these days. It can do a lot of what you're suggesting, but it is a little bit clunky
It’s crazy how the variable value is only shown in a HTML4 style tooltip after hovering over it for 3 business days
hey, a few months ago I made an extension inspired by this tweet that solves this exact problem, I finally made it public hereIntroducing ✨Atomic CSS Devtools✨: a better way to debug atomic classes! - For everyone (TailwindCSS, Panda CSS, StyleX, UnoCSS, etc.) - Works anywhere (DOM, iframe, shadow DOM) - Group styles by @media / @layer - Familiar look, just like the OG style panel 👇 link below