检测未定义 CSS 变量的使用的 Devtools 扩展
您使用自定义属性/变量编写 CSS 吗？您是否曾经拼写错误，后来才发现颜色没有正确显示？您是否曾经渴望有一个工具可以帮助您追踪未定义的 CSS 变量的使用情况？那么你很幸运，因为这就是这样一个工具！
此扩展在 Chrome 开发者工具中添加了一个选项卡，可以检查当前页面中是否有“var()”表达式中使用的任何未定义的 CSS 变量。不仅分析样式表，还分析内联样式属性，结果显示在一个友好的表格中，其中包含指向开发工具“元素”选项卡中的违规元素的链接。
要使用此扩展程序，安装后请在 Google Chrome 中打开您选择的网站，然后打开开发人员工具。您将在开发人员工具顶部看到一个名为“CSS 未定义变量检查器”的新选项卡。该选项卡将带您进入此扩展程序的用户界面。最初，您只会看到一个标题为“检查未定义变量”的按钮和一个空表。单击该按钮将开始在开发工具所连接的页面上进行分析，并将报告表中的所有结果。如果没有找到未定义的 CSS 变量，则该表将填充一条指示此类变量的消息。
表中的结果有三列。第一列表示未定义变量的名称。下一列指示在其中找到它的样式表，第三列指示在页面上的哪个元素上找到未定义的变量。第三列通过 CSS 选择器引用该元素。如果在样式表中找到未定义的变量，则选择器列将填充找到该变量的 CSS 样式声明的选择器。另一方面，如果在内联样式中找到未定义的变量，则会根据相关元素及其所有祖先的类、id 和标签名称生成选择器。请注意，生成的选择器不能保证唯一地标识相关元素。结果表的选择器列中的每个单元格都是一个超链接。单击每个链接将打开开发工具的“元素”选项卡并突出显示其中有问题的元素，帮助您追踪未定义的变量。
注意：此扩展依赖于 API 来访问受跨源资源共享约束的样式表信息。页面中加载但与页面本身位于不同来源的任何样式表，以及未提供允许从此页面访问的 Access-Control-Allow-Origin 标头的任何样式表，都不会被此扩展分析并会导致它显示错误。这些错误不会阻止扩展分析可通过 API 访问的其他样式。
此扩展背后的分析逻辑也可以作为 npm 包提供，名称为 @sonatype/undefined-css-variable-checker。请参阅 https://www.npmjs.com/package/@sonatype/undefined-css-variable-checker 。
CSS Undefined Variable Checker插件谷歌浏览器安装教程
第一步：下载CSS Undefined Variable Checker安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
