Recently I have played around with CSS variables. CSS variables are what every frontend web developer has longed for; the ability to contain specific values throughout a website.

Lets say we want to define a primary colour we are going to use throughout a site; say #334433 for example.

:root {
--my-colour: #334433;
}

This assigns the value #334433 to a variable called --my-colour which then can be accessed like so:

.my-class {
background: var( --my-colour );
}

Great. But what if we want to see all the variables now assigned in the document? You might think (like I did) that you could just inspect the root element (the html element) and see all the variables assigned to it. Unfortunately that’s not the case… Yet.

Chromes Debugging Tools Using Chrome’s debugging tools you cannot see all the CSS variables assigned to the root element

Inspect CSS Variables With Chrome’s Canary Browser

However if you use Chrome’s Canary browser, you can do this now:

  1. Open up the DOM inspector
  2. Select the html element
  3. Click on the Computed tab next to Styles
  4. Click the Show all filter

Inspect css variables in Chrome Canary Click on the Computed styles tab Debug CSS variables with the browser The computed styles also show the css variables now defined.

At the time of writing Google Chrome is at v48, and Chrome Canary is v50. So I wouldn’t expect to wait too long for this feature to be released into the regular version of Chrome we all know and love.