Browser Variable Helper
Extension Actions
- Live on Store
A Chrome DevTools extension to inspect DOM elements and highlight potential issues in CSS variables and hardcoded values.
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.