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 5
No ratings
Learn more about results and reviews.

Details

Version
1.0.1
Updated
May 9, 2025
Flag concern
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

UI Inspector - Visual CSS Editor

3.7

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

CSS Debugger

5.0

Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click.

View CSS

4.7

A Chrome extension to view the CSS of any website.

Chrome Extension Source Viewer

5.0

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

TypeScript Console

3.0

Run and debug TypeScript code in the Browser DevTools.

HTML To Elementor

5.0

Chrome extension to help convert html web page to elementor widget

React Developer Tools

4.0

Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.

z-context

3.5

A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel

Code Formatter - JSON, CSS & JavaScript

3.8

Code Formatter – all-in-one extension offering sophisticated syntax highlighting for CSS, JSON, and JavaScript.

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

3.8

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

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

Web Inspector

5.0

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