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:

...

Answer 2

Safari (43) - in the developer tools, there is a little icon you can click to reveal the value.

Firefox (58) - in the developer tools, the CSS vars have a dotted line, when you hover, the value get's displayed as a tooltip.

Chrome (67) - in the developer tools, the CSS var values are also displayed as a tooltip when hovering. When the value is a color, it will display the color in a box. (hard to take a screenshot, but it looks similar to Firefox)