CSS Variables Inspector

About

Inspect CSS variables on any element. See resolution chains, color swatches, and copy name:value pairs from the Elements sidebar.

CSS Variables Inspector adds a sidebar pane to Chrome DevTools that shows all CSS custom properties applied to the selected element, with their resolved values and where they are defined.

How it works:

1. Open Chrome DevTools (F12).
2. Select any element in the Elements panel.
3. See the "CSS Variables" sidebar showing all custom properties in scope.
4. Click any variable to see its full resolution chain.

Features:

- Full variable resolution chains — see var(--primary) resolves to var(--blue-500) resolves to #3b82f6.
- Color swatches — visual preview for color-type variables.
- Undefined variable detection — highlights orphaned CSS variables with a red badge.
- One-click copy — copy any name:value pair to clipboard with a toast notification.
- Search and filter — find variables by name or value instantly.
- Group by source — organize variables by stylesheet, inline styles, or style tags.
- Saved preferences — your filter and display settings persist between sessions.
- 100% local — no data leaves your browser. No accounts, no tracking, no servers.

Who is this for?

- Frontend developers working with design systems and CSS custom properties.
- Designers debugging theme tokens in component libraries.
- Anyone tracing CSS variable inheritance through complex component trees.

Privacy:

CSS Variables Inspector does not collect, transmit, or share any data. Your display preferences are stored locally using Chrome's built-in storage. No analytics, no telemetry, no third-party services.