Item logo image for Browser Variable Helper

Browser Variable Helper

ExtensionDeveloper Tools6 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.

0 out of 5No ratings

Google doesn't verify reviews. Learn more about results and reviews.

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

Related

Atomic CSS Devtools

4.9(18)

A devtool panel for debugging Atomic CSS rules as if they were not atomic

CSS Selector Helper

3.9(64)

Dev Tools sidebar that aids finding unique CSS selectors for Selenium WebDriver tests.

Pesticide for Chrome - Simple

5.0(5)

Toggle CSS outlines to debug layouts easily.

Chrome Extension Source Viewer

5.0(14)

Use Chrome Extension Source Viewer to check all extensions' source code and analyze extension stats directly from your browser.

Quick Inspect Element

4.2(10)

Quickly inspect HTML elements with a simple mouse hover.

TanStack Query DevTools

0.0(0)

Chrome DevTools extension for debugging TanStack Query applications. Inspect queries, mutations, and cache state in real-time.

React Developer Tools

4.0(1.6K)

Adds React debugging tools to the Chrome Developer Tools. Created from revision 5d87cd2244 on 7/4/2025.

Show All Padding & Margins

4.5(4)

Highlights margins and padding for all HTML elements in any webpage.

[Experiment] Edit and Resend: Ajax Request Debugger in Chrome DevTools

4.3(3)

Enhance Chrome DevTools with a new tab. Edit and resend fetch() / XHR requests. Efficiently debug or test your web applications.

JSONGrid Web Inspector

0.0(0)

A Chrome extension for inspecting JSON data with JSONGrid, a tabular JSON view.

Web Inspector

5.0(5)

Use Web Inspector tool as a CSS viewer and website inspector for any page. It is a browser plugin for google chrome inspect element.

UI Inspector - Visual CSS Editor

3.8(10)

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Atomic CSS Devtools

4.9(18)

A devtool panel for debugging Atomic CSS rules as if they were not atomic

CSS Selector Helper

3.9(64)

Dev Tools sidebar that aids finding unique CSS selectors for Selenium WebDriver tests.

Pesticide for Chrome - Simple

5.0(5)

Toggle CSS outlines to debug layouts easily.

Chrome Extension Source Viewer

5.0(14)

Use Chrome Extension Source Viewer to check all extensions' source code and analyze extension stats directly from your browser.

Quick Inspect Element

4.2(10)

Quickly inspect HTML elements with a simple mouse hover.

TanStack Query DevTools

0.0(0)

Chrome DevTools extension for debugging TanStack Query applications. Inspect queries, mutations, and cache state in real-time.

React Developer Tools

4.0(1.6K)

Adds React debugging tools to the Chrome Developer Tools. Created from revision 5d87cd2244 on 7/4/2025.

Show All Padding & Margins

4.5(4)

Highlights margins and padding for all HTML elements in any webpage.

Google apps