Item logo image for Browser Variable Helper

Browser Variable Helper

ExtensionDeveloper Tools7 users
Item media 1 (screenshot) for Browser Variable Helper

Overview

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.

Details

  • Version
    1.0.1
  • Updated
    May 9, 2025
  • Size
    369KiB
  • Languages
    English
  • Developer
    Email
    florian.riviere@hotmail.fr
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes
Google apps