用来武装Firebug的十三款Firefox插件
上一篇 / 下一篇 2012-08-14 09:52:11 / 个人分类：技术积累
如果你是一名Web设计师，Firebug想必不会陌生，作为一款Firefox插件，它可能是网站前端开发最有用的工具之一。尤其是如今网站中用到越来越多的javascript和ajax技术，firebug为Web前端开发与调试提供了莫大便利。Firebug拥有众多优点，其中就包括可扩展性，下面介绍的这些Firefox插件就是用来武装Firebug的，让它变得功能更丰富，更便捷。
- YSlow（Why slow？-为什么慢呢？）
YSlow是一款用来分析网页，并提出前端性能改进建议的Firefox插件。YSlow依据预定义或用户自定义的规则为网页评级。它同时提供了许多性能分析工具，如：Smush.it™、JSLint。
- Page Speed
与YSlow非常相似，Page Speed是google团队推出的一款用于评测网页性能的插件，尤其可以依据“网页性能最佳实践”对网页性能提出改进建议。
Page Speed可以自动优化图片，并提供压缩版本。它也可以侦测到那些实际并未用到的Javascript和css，以便优化它们。
Page Speed可是个1.3M的大插件，它还拥有许多优秀功能等你尝试。 - Pixel Perfect
在制作网页时，在页面上添加一个新的设计元素（例如一个图片或图标）之前，我们往往希望提前看到元素添加后页面的整体效果。Pixel Perfect就可以帮你实现这个想法，它允许开发者在网页上覆盖你要添加的设计元素。使用它时你可以调整要添加元素的透明度和位置。
我感觉这款插件也可用来做网页中元素的微调，以保证和最初设计蓝图一致，如它的名字，完美到一个像素都不差。 - CodeBurnder
安装CodeBurner后，可以再firebug面板中看到参考面板用来查询html元素、html属性、css属性，就像一个字典一样。
当在Firebug中选中一个节点时，它也会提供一些相关的代码示例供你参考。 - FireUnit
- FirePHP
在FirePHP的帮助下，你可以通过调用一个简单的PHP方法，在Firebug中记录日志。
数据是通过响应包头（Response Header）发送的，不会影响到网页内容。
- FireRainbow
FireRainbow 可以用来控制、修改Firebug中Script的语法高亮显示。
- FireDiff
It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.
它能够记录通过Firebug或网站自身的CSS或DOM的每一次改动。这个我装上后，也没看出firebug上多了什么，也不知该怎么用。希望知道的朋友留言说一声。
- Jiffy Firefox Extension
安装Jiffy Firefox Extension后会在Firebug中出现一个新面板，用来图形化显示Javascript的运行时间，并可打印出报表。
看主页说明，使用好像还有点麻烦。感兴趣的朋友自己看下。
- Hammerhead
Hammerhead可以帮助你计算网页的载入时间。（这个好像Firefox本身具备啊）
它支持多页面，并允许你清除磁盘或内存缓存后再进行载入时间测试。
- Firecookie
Firecookie, 是一个嵌入在Firebug中的cookie浏览管理插件。
如果在Web开发中用到了cookie，使用它可以轻松的浏览cookie值、过期时间等，有助于快速开发。
使用它时需要在Firebug的网络面板中开启cookie监测。它可同时显示发送和接收的cookies。
- Firefinder
在之前发布的一篇日志“一款快速查找页面元素的Firefox插件——FireFinder”，专门介绍过这款插件。不再多说，需要的话去看一下。
- LiveCoder
LiveCoder是Firebug的一个扩展，用来查看Firefox Chrome。这对与那些Firefox插件开发者非常有用，它可以帮你检查、修改Firefox插件的Dom。
不知道国内是否开发Firefox插件的，否则就用不到了
14.FireFinder
FireFinder是一款用于刚出不久的Firebug扩展插件。它的功能是通过CSS选择器与XPath表达式来快速查找定位页面的HTML元素。如果您是Firefox的使用者，不妨试一试。
安装后效果图如下：
Firebug扩展插件-Firefinder
它的主要功能：
- 输入CSS选择符或XPath表达式快速定位页面中的HTML元素
- 在页面高亮显示查找到的HTML元素
- 在Firebug面板中列出查找结果
例如：
- 查找所有div下的ul元素，可输入 div ul查找
- 查找id为foo的元素，可输入#foo或xpath表达式//*[@id='foo']查找
- 查找所有class为foo的元素，可输入.foo或xpath表达式//*[contains(@class,'foo')]查找
- 查找所有拥有title属性的元素，可输入*[title]或xpath表达式 //*[@title]查找
查找所有段落的第一个子元素，可输入p > *:first-child或xpath表达式//p/*[0]下面留言中”大C”指出：“XPath array syntax uses 1-based arrays instead of JavaScript-style. 0-based arrays.”，即“相对于javascript中数组从0开始，Xpath语法中的数组是从1开始的”。我查了资料，并在firefox下做了测试，确实如他所说。在这里非常感谢“大C”的提示，对错误表示歉意，并纠正如下：查找所有段落的第一个子元素，可输入p > *:first-child或xpath表达式//p/*[1]
xpath的相关知识可查阅这里，或在之前发布的“从W3C School整理的最全的Web开发chm手册”中的chm手册中查阅。
下载安装该插件：插件主页
转载自：http://css9.net/firefox-adds-on-strengthen-firebug/
TAG:
