demo · v141

CSS Custom Property Cascade Debugger

Inspect a nested element tree with live getComputedStyle() enumeration. Add custom properties at any level, hit "Inspect", and see every --* property — own and inherited — with a diff highlighting what changed relative to the parent.

probing custom property enumeration support…
Before Chrome 141 getComputedStyle(el) only returned author-declared custom properties from stylesheets that contained explicit rules matching the element. Inherited custom properties from ancestor inline styles were silently omitted. Chrome 141 fixes this — all resolved --* values appear in the iteration, matching Firefox and Safari behaviour.
grandparent count: —
parent count: —
child count: —

Add a custom property to a level

Click Inspect on any element to enumerate its custom properties via getComputedStyle().

the code

// Chrome 141: custom properties now appear when iterating getComputedStyle()
const styles = getComputedStyle(el);

const ownProps = new Map();
for (const prop of styles) {          // iterates ALL properties including --*
  if (prop.startsWith("--")) {
    ownProps.set(prop, styles.getPropertyValue(prop).trim());
  }
}

// Diff with parent to find which properties are set/overridden at this level
const parentStyles = el.parentElement
  ? getComputedStyle(el.parentElement)
  : null;

for (const [prop, val] of ownProps) {
  const parentVal = parentStyles?.getPropertyValue(prop).trim();
  const isOwn = parentVal !== val;     // changed or new at this level
  console.log(prop, val, isOwn ? "own" : "inherited");
}

see also