大踏步走

已经忘记是从什么时候开始使用Firefox浏览器的了，印象最深的是当年各网页中铺天盖地的都是Firefox的广告，宣称是上网最安全的浏览器。不管是否真的是最安全的，就其支持丰富的插件这一强大的功能，相信就会吸引很多的用户群体。

工作后更是和各种浏览器打交道，Firefox也不例外。好在当IE6下页面面目全非的时候，Firefox下完美显示，对标准的强力支持，这又是一个让前端开发者喜欢的理由。

下面就列举下我经常使用的一些Firefox插件，希望可以对你有所帮助。抛砖引玉，大家有好的插件，也不妨共享下！

一、Firebug

推荐：★★★★★

介绍：是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一

功能：首先我想说一句，对他的喜爱已经无以言表！自从发现他，就深深的被他吸引无法自拔，不管走到那，Firebug总是我安装的第一个插件。

它集Html与Css查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、Css、Html和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。

安装：

下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/1843

另外一种通用的下载方法：

在火狐浏览器下选中“工具”，点击“附加软件”

在弹出的“附件组件”层选择“获取附加组件”，然后在搜索框中输入“firebug”按下搜索按钮进行搜索获取。

有时候搜索出的相关结果可能还没有显示出你要找的插件，可以点击“浏览全部附件组件”到Firefox官网的附件组件页面下进行详细查找。

地址：https://addons.mozilla.org/zh-CN/firefox/search?q=&cat=all

支持：Firefox 3.0 – 3.5.* （最新版的3.6.1 beta暂不支持）

使用：

安装完，重启火狐后，打开需要检测的网页，单击浏览器右下角“甲壳虫”图标，

点击该图标，将展开显示Firebug的菜单

每一项都有详细的功能介绍和使用选项，下面我主要介绍其“查看页面元素”的功能。

打开一个网页后，开启Firebug，选择查看页面元素的按钮，即可进行如图操作。

利用这个功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，最主要的是可以直接对标签和css样式进行增加、修改、删除的调试工作，大大节省调整页面的时间。

还有很多强大的功能，需要你一一来挖掘，有什么不明白的，可以参阅网上资料，或者直接给我留言。

二、Yslow

推荐：★★★★★

介绍：是Yahoo开发者团队发布的一款基于Firebug的插件。

功能：用于分析网页，并根据一些高性能网站的规则进行相应的评级打分，对于网页性能优化有很好的帮助作用，告诉你那些部分影响了你的网页速度。

主要规则有13条，其中11条比较关键：

1、Make fewer HTTP requests–更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片

2、Use a CDN–使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上

3、Add an Expires header–为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站

4、Gzip components–压缩静态资源内容，减少网络传输时间

5、Put CSS at the top–将CSS放在页面头部，能够更快渲染页面

6、Put JS at the bottom–将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载

7、Avoid CSS expressions–不要使用CSS表达式，因为CSS表达式需要很多资源，有时甚至会造成页面假死

8、Make JS and CSS external–将CSS和JS使用外部的独立文件，这点有点和1冲突，但是仔细分析下，并不矛盾

9、Reduce DNS lookups–减少DNS查找（这点我后面详细解释下）

10、Minify JS–最小化压缩JS，和第4点不同，使用YUI Compressor或者JSMin将JS文件进行分析，将一些变量名变短，去除不必要的空格和符号

11、Avoid redirects–避免无意义的跳转

12、Remove duplicate scripts–去除重复的脚本，不光是文件，甚至是同功能的函数

13、Configure ETags–配置实体标签

安装：

下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/5369

因为Yslow是集成在Firebug插件中的，所以必须先安装Firebug。

Firebug下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/1843

支持：Firefox 3.0 – 3.5.* （最新版的3.6.1 beta暂不支持）

使用：

安装完成后，打开Firebug窗口，选择Yslow选项，直接点击浏览器右下角的Yslow启动按钮。你第一次打开Yslow时，以下图像作为Firebug的一部分被显示在的浏览器窗口。

点击 Run Test 运行Yslow，也可以点击 Grade，Components，或Statistics选项开始对页面的分析。

我们主要看页面总的等级和得分：

 

右边还有一个“Rulesets”选项，可分别进行不同标准进行评分。

 

附加：

前段时间，Google也推出了一款类似的插件- Page Speed。

感兴趣的朋友可以下载试试，下载地址：http://code.google.com/intl/zh-CN/speed/page-speed/download.html。

三、HTML Validator

推荐：★★★★★

介绍：非常好的HTML错误检查工具，可以验证网站页面是否符合web标准。

功能：无以言表

安装：下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/249

支持：Firefox 3.0 – 3.5.* （最新版的3.6.1 beta暂不支持）

使用：

1、启动火狐浏览器，打开某个网站，看浏览器右下角的“小叉”图标：

2、鼠标放在该图标上，显示这个网站的html大致状况：

3、双击图标，弹出网站的html具体状况：

上面为网页html的代码，左下面为错误的列表，点击每条错误，右侧会显示错误的原因（英文）。

4、顶部菜单的 HTML验证器，可以直接前往w3c在线验证，或展示清理错误后的html代码。

5、大多数情况下，我们并不需要这个工具一直处于启用状态，这样会降低我们的网站打开速度。我们可以先禁用它，遇到要检测的页面后，先打开页面，双击那个灰色的圈就可以了。

四、HttpFox

推荐：★★★★

介绍：是一款很不错的抓包插件，可以将网页中的任意元素进行抓取。

功能：这个插件很像IE的那两款抓包插件HttpWatch 或 IEInspector ，使用方法也差不多。

安装：https://addons.mozilla.org/zh-CN/firefox/addon/6647

支持：Firefox 3.0 – 3.5.* （最新版的3.6.1 beta暂不支持）

使用：

1、安装后在Firefox状态栏显示该图标，如图：

2、点击展开该窗口，并点击“start”开始记录，再刷新任意网页，就可以抓取改页面的所有元素，并可以监控任意元素的读取时间。

附加：

类似的，可以同时在IE和FF下安装的插件- HttpWatch，功能也很强大，下载地址:http://httpwatch.com/download/。

五、Alexa Sparky

推荐：★★★

介绍：查看网站排名的绝佳工具。

功能：查看网站的排名趋势以及目前的排名状况，新版本中，在Firefox工具栏中增加了该浏览页面的相关链接，可以点击直接查看。

安装：https://addons.mozilla.org/zh-CN/firefox/addon/5362

支持：Firefox 2.0 – 3.5.*

使用：安装后直接在Firefox工具栏显示当前页面的排名。

六、Tails Export

推荐：★★★

介绍：查看页面微格式工具。

功能：随着越来越多的内容用微格式发布，搜索引擎很难拒绝微格式带来的这一机会，以提供前所未有的内容索引和搜索细分。这款插件就是可以帮助查看页面中包含微格式的内容，让你先人一步抢先体验。

安装：https://addons.mozilla.org/zh-CN/firefox/addon/2240

支持：Firefox 1.5 – 3.5.*

使用：安装后直接在Firefox工具栏显示图标。

默认装下该图标显示为灰色；但当当前页面中含有微格式数据，该图标则变为彩色，这时候点击图标，在页面右侧会弹出抓取的微格式数据，如图：

最后补充两个Firefox中国版中自带的插件：Firefox炫彩风格和字体管理器。

七、Firefox炫彩风格（Personas）

推荐：★★★

介绍：是为您的火狐浏览器打造的轻量的、易于安装的、千变的“换肤”组件。

功能：给浏览器换装，使用最易于切换的“皮肤”装扮你的火狐浏览器。

安装：https://addons.mozilla.org/zh-CN/firefox/addon/10900

支持：Firefox 3.0 – 3.6b1pre

使用：安装后，在Firefox工具栏左下角显示图标，点击即可选择不同风格的皮肤进行更换。

八、字体管理器

推荐：★★★

介绍：是火狐中国版自带的字体“换肤”组件。

功能：一键切换菜单和网页内容的字体。

安装：暂时未发现单独下载的地址，需安装火狐中国版，

下载地址：http://dl1.g-fox.cn/chinaedition/releases/partners/monline/FirefoxChinaEdition-latest.exe

支持：Firefox China

使用：安装该版本浏览器后，在工具栏右下角有“字”的图标，点击可显示当期计算机中安装的字体列表，选中任意字体，即可将浏览器菜单和网页内容字体进行切换；如果想换回默认字体，在点击该列表，选中“恢复默认设置”完成。

 

说明：本文中部分内容收集于网络，但绝对原创。如有转载，请注明出处，谢谢！