Firefox插件推荐:CSS Usage

来自于:http://www.qianduan.net/firefox-plug-ins-recommended-css-usage.html

 

css usage是一个基于firebug的firefox扩展,可以用来查看页面中的CSS的使用情况,可以清楚的查看css文件中所有的规则在你的网站中的 真实的使用情况。可以查看一个网站中多个页面中的css使用情况——这个很好,可以看到CSS的在网站中的全局使用情况。

预览:

cssusage

下载地址:https://addons.mozilla.org/en-US/firefox/addon/10704 主页地址:http://spaghetticoder.org/cssusage/

用法:

  • 打开你想要扫描的网站的页面,打开Firebug,切换到CSS Usage标签,然后点击”scan”按钮。
  • 如果是用了大量ajax或者dhtml的网站中,打开尽可能多的隐藏的div/窗口/tab,以使CSS Usage爬取尽可能多的内容。
  • 然后访问你的网站的其它页面。
  • 每访问一个新的页面,请按一次”scan”按钮。当然,也可以选择autoScan按钮,这样就不用每次按Scan按钮了。

扫描的结果中,绿色的规则表示当前页面中有用到,黑色表示其它页面中用到,红色表示没有被扫描到(至少在当前页面),灰色是伪类(:hover之类)

一些特性:

  • 可显示规则的行数
  • 自动扫描(autoScan)
  • 链接到CSS文件(可以在新tab中打开该CSS文件)
第一步,我们需要安装Firefox30,不能高于30; http://ftp.mozilla.org/pub/firefox/releases/30.0b9/win32/zh-CN/Firefox Setup 30.0b9.exe 安装浏览器后关闭自动升级: 打开Firefox浏览器--打开菜单(右上角三条横杆)--选项--更新--不检查更新 另外可以将反馈选项中的都取消 第二步,安装前端开发人员最普及的开发工具 Firebug-2.0.16 (下载包中有) 安装方法: 打开Firefox浏览器--打开菜单(右上角三条横杆)--附加组件--扩展--点击右上角有个雪花一样的设置按钮--从文件安装附加组件--选择firebug-2.0.16-fx.xpi安装就可以 第三步,安装CSS Usage 0.2.9(下载包中有) 第四步,在Firefox浏览器中打开我们要优化的页面(本地的页面也可以),点击右上角的firebug(有个小蜜蜂图标),打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况. Clear: 清除扫描结果,当我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始其他的扫描. AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率. 简单来说: Scan: 扫描当前页面的CSS使用情况。 Clear:清除扫描结果。 AutoScan:自动扫描每个打开的页面。 我们可以使用AutoScan的叠加结果 然后CSS文件名称后面有个export cleaned css 点击后可导出扫描的结果,结果就是干净的CSS文件。 我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态: 绿色–表示当前扫描看到的,=保留 深绿色–的以前的扫描中看到的,=保留 红色–的表示在当前和以前扫描中均未发现的.=这部分可以清除 灰色–的代表伪类的选择器CSS,这部分将会被忽视. 如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了 注意,说了这么久,大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具,可以清理多余的CSS样式, 但是,你一定要扫描足够多的网页,尽可能地找到最多的样式。 同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计,就是CCS文件后面的(1 scans) 如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我,每一次页面跳转,CSS Usage 都会自动增加页面的扫描次数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值