How do you inspect CSS variables in the browser?

Question

I am defining my variables as per the spec like so:

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

And accessing them like this:

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

Which works fine.

However I was wondering if there was a way of debugging or inspecting the :root CSS rule to see what variables have been defined, and what their values were?

From my understanding the :root selector and html selectors both target the same element however when I inspect the html element using Chrome's debugging tools I cannot see anything defined:

Is there a way finding out what variables have been defined and their values?

Answer 1

Using Chrome Canary, you can access this by viewing the element's Computed styles and enabling the Show all filter:

...