测试工具(1)---Firebug (firefox下查看网页细节的好插件)

阿七

本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。不过，本文的内容对一个新手来说，应该是足够了。


目录
一、安装Firebug
二、打开和关闭Firebug
三、Firebug窗口概览
四、随时编辑页面
五、用Firebug处理CSS
六、盒状模型
七、评估下载速度
八、DOM
九、Javascript调试
十、AJAX
十一、附注

[ 本帖最后由 阿七 于 2010-4-3 15:05 编辑 ]

丰卉者

findbugs 最新的从哪里下载呢

多学多看

对啊对啊，求版主PDF文档的或者word文档

jollyfeixue

之前用过，但没那么细的去了解，谢谢楼主了

yintianyouqin

这个工具还真是不错啊！不过开发用起来应该作用大很多吧！谢谢楼主的推荐！

carry1986

谢谢楼主分享，正在研究这个呢。。。

xieyang702

呵呵，这个东西是比较好用的。

nieryy2009

这个开发用还好..   对编程不是很精通啊

Joyeer

确实，用得非常多。。。。。

flowingcloud

同求文档。

papeandpopo

太帅了，我正在用，还是用的很不好。这个很详细。呵呵。参考。
我现在想弄明白，bugfree 里的如何精确控制角色的权限。如：只有创建者和被指派者，能编辑解决bug的控制。我就是楞没找到相关的帖子。疯了。
修改代码，也没写清楚修改哪个文件，只是添加userid的session。

心中有彩虹

版主你都全套的那个PDF文档的或者word文档的么？图都看不见啊 。

阿七

7、使用Firecookie调试页面cookieFirecookie是基于Firebug的cookie调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。
http://www.softwareishard.com/blog/firecookie/
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。

Firebug是一款能够为WD提高效率的调试利器，希望大家都能用上。

[ 本帖最后由 阿七 于 2010-4-1 15:15 编辑 ]

阿七

6、查看页面上所有的资源列表其实前面第四点介绍到的“网络”功能就可以查看所有资源列表，而且可以通过查看状态来进行对应的优化（例如排查404元素）。这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表：

鼠标hover可以看到对应的缩略图，点击则可在新窗口中打开。更多Yslow功能请查看其主页。

[ 本帖最后由 阿七 于 2010-4-1 15:14 编辑 ]

阿七

5、查看页面上所有的CSS与JS在页面调试中我们发现，对于外部引用的CSS与JS很难进行调试，使用基于Firebug的Yslow扩展即可解决该问题。首先在Yslow的主页上下载一个最新的版本装上：http://developer.yahoo.com/yslow/

在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。

如上图，选择“All JS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。

[ 本帖最后由 阿七 于 2010-4-1 15:14 编辑 ]

阿七

4、使用Firebug查看XMLHttpRequest使用Firebug查看XMLHttpRequest，对于调试AJAX是很有帮助的。如图：

为需要调试的站点开启“网络”监控功能，其实该功能可以查看页面上所有类型的post和get请求，并且还会显示出请求消耗的时间。对于XMLHttpRequest会有详细的参数与返回值。

[ 本帖最后由 阿七 于 2010-4-1 15:12 编辑 ]

阿七

3、查看/测试页面的函数执行效率查看页面上所有函数执行效率可以很容易的找到运行最慢的函数，从而帮助WD有针对性的进行页面的JS优化。如图，为需要调试的页面“启用控制台”：

点击“概况”开始收集，再次点击即可停止，然后进行查看。
在firebug控制台的最底下是一排命令行，在这里你可以输入任意JS语句，按下回车键即可执行：

使用console，还可以测试一段代码或者函数的执行时间，点击命令行最右侧的红色按钮切换到命令行多行模式：


[ 本帖最后由 阿七 于 2010-4-1 15:11 编辑 ]

阿七

2 、查看动态生成的HTML代码的方法通过“查看源代码”的方法，无法看到由JS动态生成的HTML结构，这里我们可以通过Firebug来查看，如下图，选中“body”节点，按下“编辑”，即可输出页面上源文件的代码以及动态生成的代码。

还有另外一种简单的方法，选中你要查看的页面元素，然后在右键菜单中选择“查看选中部分源代码”

[ 本帖最后由 阿七 于 2010-4-1 15:10 编辑 ]

阿七

1、查看、编辑HTML元素及其CSS安装好Firebug之后，你可以通过点击浏览器右下方的小虫子打开Firebug，如图：

或者直接按F12，如果要以窗口形式打开的话，就按下CTRL+F12
打开Firebug之后，点击“查看”，然后选择页面上任何需要编辑的地方，Firebug会将其选中，并且在HTML结构中将其高亮，如图：

之后你可以对该元素的HTML结构、属性进行任意的编辑，修改后的效果都会实时的展现在页面当中。
同时在Firebug的右侧是该元素对应的CSS样式，如下图：

图中的样式，显示了该元素被重新定义的样式继承关系，比如“继承自body.CurHome”的“text-align”属性被“继承自div.shell”的“text-align”覆盖，原先的属性就会以中横线的形式表示出来。如果要查看所有的属性，请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性；单击任意一个属性或者属性值可以进行CSS的编辑，如“3”；双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板：

上面这幅图展现的是一个HTML结构的标准盒模型，通过点击相应的数值可以修改该值，同时在浏览器窗口中显示出对应的效果来。

[ 本帖最后由 阿七 于 2010-4-1 15:07 编辑 ]

阿七

* Firebug 1.05 及以前版本，与Firefox 3.0不兼容。

* Firebug的作者Joe Hewitt免费提供了这个软件，为了显示我们对他的爱，你可以考虑对他进行捐助。

* Firebug的一些高级应用，请看Joe Hewitt的演示视频。
http://video.yahoo.com/video/pla ... af731346f78.1755924