如何利用浏览器开发者工具查找CSS变量的定义位置？

碰到CSS变量和类定义不在同一个文件的情况，用浏览器开发者工具就能快速定位，分享几个实用技巧：

• 先确认变量实际值（可选但有用）
  打开控制台（按F12或右键选“检查”），选中目标<span class="icon-name"></span>后，输入命令：

  getComputedStyle(document.querySelector('.icon-name')).getPropertyValue('--icon-name-color')
  

  先拿到变量的实际取值，后续找定义时更有针对性。

• Styles面板直接跳转溯源
  在Elements面板选中元素后切换到Styles标签，找到var(--icon-name-color)这一行，直接点击变量名——大部分现代浏览器会把变量名做成可点击的链接，一点就跳转到它的定义位置，不管在哪个CSS文件里。要是点击没反应，就往上翻Styles面板里的规则列表，找带有--icon-name-color: [具体值];的选择器（常见的是:root、父元素类或者全局标签选择器）。

• 全局搜索变量名
  打开开发者工具的Sources标签，按Ctrl+Shift+F（Windows）或Cmd+Shift+F（Mac）调出全局搜索框，输入--icon-name-color，搜索结果里会列出所有包含这个变量的文件，找到带定义语句的那一项，点击就能直接定位到代码行。

内容的提问来源于stack exchange，提问作者J R