Digging into CSS variables at runtime

I’ve had a need to be able to see how multiple CSS variables are computed at runtime. I’m dealing with interactions between SCSS and CSS variables so I needed to know what was happening. There are a few ways to do this in Chrome Dev Tools.

One way is in the Styles inspector, you can see the various definitions of the variable as values are assigned to it.

Another way is using the Computed inspector with the Show All checkbox checked. This will show all of the variables.

Both methods can use the Filter box to narrow down what you are looking at.