How to Inspect CSS Variables with Chrome Canary

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.

Let's 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 ToolsUsing 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
5. Click on the Computed styles tab

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