2018年如何安装使用Firebug和CSS Usage?

导语:叶子在2018年的时候需要使用Firefox、CSS Usage来调试代码,但是由于火狐浏览器版本过新(59版本),而Firefox只能支持30版本,所以安装和使用费了老鼻子的劲,现在将安装步骤写下来。

安装火狐浏览器

需要安装老版本的火狐浏览器,Firefox支持的最高版本为火狐浏览器30版本,所以需要在下面的地址下载:

http://ftp.mozilla.org/pub/firefox/releases/

这个地址里面涵盖了所有的火狐浏览器版本,我们只需要下载30版本的就可以了。

下载之后安装就可以了。注意,一定要下载30版本,叶子开始下来N多个版本,结果不是安装Firefox有问题,就是CSS Usage不运行,吐血了。

安装Firebug

安装前端开发人员最普及的开发工具 Firebug,下载地址:

https://addons.mozilla.org/en-US/firefox/addon/firebug/

请直接在火狐浏览器中打开此地址,然后点击Add to Firefox。

安装CSS Usage

安装CSS Usage,下载地址:

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

请直接在火狐浏览器中打开此地址,然后点击Add to Firefox。

安装完成后要求重启浏览器。

使用Firebug和CSS Usage

在火狐浏览器地址栏的右侧会出现一个虫子一样的图标,输入一个网址,然后点击虫子图标一下。

在浏览器的下面就会出现一个工具栏,我们可以点击切换到CSS Usage界面。

CSS Usage界面,有三个按钮:Scan、Clear、AutoScan。

Scan: 扫描当前页面的CSS使用情况。

Clear:清除扫描结果。

AutoScan:自动扫描每个打开的页面。

我们可以使用AutoScan的叠加结果,然后使用CSS文件后面的小按钮export cleaned css,导出扫描的结果,结果就是干净的CSS文件。

注意,说了这么久,大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具,可以清理多余的CSS样式,但是,你一定要扫描足够多的网页,尽可能地找到最多的样式。

结束

你学会了吗?

发表评论

电子邮件地址不会被公开。 必填项已用*标注