Can I use Chrome dev tools to find out what file a CSS property or value is defined in?

Question

I am looking at an element on a web page, trying to figure out how it works.

Its text-align property is var(--btn-default-text-alignment, center), and the computed style says left, so I'm guessing the --btn-default-text-alignment variable is set to left.

But where is this CSS variable coming from? I looked in the file where the style is defined and couldn't find it. I found out that CSS variables in one file can be used by other files so it may be in one of the many CSS files that this page is including, but it would be a lot of tedious work to look in all of them and find it.

Is there any way to use the Chrome dev tools to find out what file a CSS variable is defined in?

Answer 1

In the image below I have selected and inspected the title of the page "Can I use Chrome dev... defined in?". In the bottom left quadrant/box of the inspector tool we can see all the CSS variables and which file they are in. For example, CSS element #question-header is in file primary.css.

If you click on the file name primary.css you can also see the folder structure and the actual contents of the file.

From here, you can Ctrl+F to find all the instances where something exists. The first instance will be where it is defined.

Firefox also has this feature.