50

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:

inspecting the html element

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

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Paul. B
  • 1,328
  • 1
  • 13
  • 22
  • Maybe you can take a look at : http://stackoverflow.com/a/10175042/3365426 – David H. Feb 24 '16 at 14:32
  • Thanks, I have just tried that but it just outputs the computed style of the html element not any variables. – Paul. B Feb 24 '16 at 14:49
  • I think you need to inspect `.my-element` to see the value of `--my-colour` variable. In the root element you can't view the value (you asked for the definition but I think the developers consoles are not prepared for this yet) – Marcos Pérez Gude Feb 24 '16 at 14:51

2 Answers2

65

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

Computed tab ... Example

Paul. B
  • 1,328
  • 1
  • 13
  • 22
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • "`#\30 00`" Wait, what? Why does the inspector see a need to encode the first 0? – BoltClock Feb 24 '16 at 14:59
  • @BoltClock might be one of the reasons it's still hidden behind a flag. ;) – James Donnelly Feb 24 '16 at 15:01
  • @BoltClock interestingly that affects any hexadecimal colour code which begins with a number (0-9). `#900` and `#777777` display as `#\39 00` and `#\37 77777` respectively, whereas `#ABC` displays as `#ABC`. – James Donnelly Feb 24 '16 at 15:04
  • All of a sudden I recall seeing this behavior elsewhere, but I can't remember what exactly it is for the life of me. Maybe it has to do with how custom property values are stored, what CSS type they are, etc. – BoltClock Feb 24 '16 at 15:06
  • @BoltClock If we drop the `#` and set it to an erroneous `012345` it drops the `0` altogether (http://i.imgur.com/kA9Zani.png). :D – James Donnelly Feb 24 '16 at 15:12
  • 1
    Ah, but you see, `012345` is being treated as an which is causing the 0 to be dropped as a non-significant digit. It's not erroneous *per se* - it just prevents that custom property from being used as a value. – BoltClock Feb 24 '16 at 15:19
  • 3
    @JamesDonnelly cheers. This didn't work for me in my version of Chrome (v48). However when I have now downloaded Chrome Cannery and on that this can be accessed in the _Styles_ tab without the need to enable the _show all_ filter. Thanks – Paul. B Feb 24 '16 at 15:40
  • @Paul.B and with that comment you've made me realise that I've somehow been using Chrome Canary instead of Chrome all day! Whoops. – James Donnelly Feb 24 '16 at 15:42
  • Starting with Canary 67, this method no longer needed, as there are handy tooltips are available, see my answer and comment below. – Frank Lämmer May 10 '18 at 09:23
  • 1
    Unfortunately it still shows formulas for calculated values and not the real values. – Qwerty Mar 16 '21 at 16:09
10

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

enter image description here

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

enter image description here

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)

Frank Lämmer
  • 2,165
  • 19
  • 26
  • Weird. Wonder what's holding Chrome up here. – Bill Criswell May 09 '18 at 13:45
  • 1
    There you go, with Chrome 67 (current nightly Canary version) you can inspect the CSS Vars in the same way, as with the other ones. I have updated my answer accordingly. Source: https://developers.google.com/web/updates/2018/04/devtools#vars – Frank Lämmer May 10 '18 at 09:20