title: How do you inspect CSS variables in the browser?
body: <p>I am defining my variables <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" rel="noreferrer">as per the spec</a> like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>:root {
   --my-colour: #000;
  }
  </code></pre>
  
  <p>And accessing them like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.my-element {
    background: var( --my-colour );
  }
  </code></pre>
  
  <p>Which works fine. </p>
  
  <p>However I was wondering if there was a way of debugging or inspecting the <code>:root</code> CSS rule to see what variables have been defined, and what their values were? </p>
  
  <p>From my understanding the <code>:root</code> selector and <code>html</code> selectors both target the same element however when I inspect the <code>html</code> element using Chrome's debugging tools I cannot see anything defined:</p>
  
  <p><a href="https://i.stack.imgur.com/EbNvh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EbNvh.png" alt="inspecting the html element"></a></p>
  
  <p>Is there a way finding out what variables have been defined and their values?</p>