Browser Variable Helper in Chrome with OffiDocs

DESCRIPTION

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.

• < Prev
• Next >