DevTools Tips

Categories: Supported by:

Jump from a CSS variable usage to where it is defined

CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like colors for example.

You can define and use a custom property as shown below:

rule-1 {
--my-main-color: blue;
}
rule-2 {
color: var(--my-main-color);
}

Sometimes, it can be hard in DevTools to see both the place where the variable is used and the place where it is defined. There may be a lot of rules and properties that apply to an element, requiring a lot of scrolling and searching.

In Edge and Chrome, you can simply click on a var(--foo) function to jump to where the --foo variable is defined!

GIF animation of clicking on a custom property link in the Styles panel in Edge