Browser Variable Helper

Browser Variable Helper is a Chrome DevTools extension that helps frontend developers audit the CSS of any web page. It highlights: ⚠️ Hardcoded values (e.g. 16px, #fff, 50%) ℹ️ Fallback values in var(--x, fallback) ❌ Undefined CSS variables used via var(--x) Visual indicators are shown directly: In the DOM tree Inside the CSS panel Each issue is color-coded and explained to help you clean up your stylesheets, adopt a token-based design system, or simply debug variables that aren't working as expected. 🔎 How to use Install the extension Open Chrome DevTools (F12) Navigate to the "Browser Variable Helper" tab Click any element to view and inspect its styles 💡 No data is collected or transmitted. All analysis is done locally via DevTools APIs.