FireBug调试技巧小总结(想到新的添加)

firebug是很多开发者所用的，我也是，虽然会的不是很多，但是工作中多积累，总能自己学到点东西。

（一）先说自己最常用的，js调试：
在导航条上上选择“脚本”，然后在下面的导航条里选择页面所加载进来的某个js文本，然后就可以观察里面的代码，并且进行像一些IDE可以断点调试的功能了。如图
像在java的eclipse断点调试一样，可以设置多个断点，然后逐一进行“下一步”“跳至下一个断点”等，在js代码中选中某个变量后右键选择“添加监控”，那么在右边的模块里面就会有该变量的数据，代码运行到哪里，变量就会根据实际情况变成当时的数据。也可以直接激动鼠标到变量上，也会显示出代码的内部数据，不过对于一些this.a的变量，说不定就会a的实际数据。(这里说句题外话，现在大多数的公司js代码，放出来的时候都是进行算法打乱的，所以我们看到的大多数都是一些完全不知道什么意思的代码，因为如果很正确的将原代码加载出来，就可以用firebug进行断电观察每个参数，或许会泄露一些信息哦)

[img]http://dl.iteye.com/upload/picture/pic/93220/fd336836-01ed-3637-9fa1-f69ce020444d.png[/img]

关于js的调试有很多的东西可以写，这里暂时先介绍这个，以后慢慢补充。

（二）页面html调试
如图：
[img]http://dl.iteye.com/upload/picture/pic/93222/de00c8cd-678d-3073-9cd8-f8a654a68adc.png[/img]

有的时候页面的结构会跟前端切出来的有些区别，最好的办法就是在firebug上去点击图中那个左上方的小方块，然后在页面上选择有问题的地方进行查看。而且可以直接在firebug显示html代码里自行添加一些代码，回车查看修改后的效果。

这里就随便修改了iteye的博客管理里的第一个“发表文章”为“我是文章”：
[img]http://dl.iteye.com/upload/picture/pic/93224/715ab48c-e129-31f6-8778-41d82e0c2efb.png[/img]


（三）网络查看
有很多情况可以用到“网络”里面的东西。
比如页面提交信息或者查看每个请求的参数等。
如图，我执行一次发表日志的请求后，“网络"内选择post publish.action条目进行查看，里面的”Post“下有所有刚刚请求过去的参数列表，还有其他一些”头信息“，”响应“ 等。
[img]http://dl.iteye.com/upload/picture/pic/93226/c29f4d39-49b3-3c3f-9468-f1ebeb099984.png[/img]

一些异步的参数提交等可以在相应的请求下找到参数，这里我找了一个dwr的请求的响应，该响应回来的是一个礼物的列表
[img]http://dl.iteye.com/upload/picture/pic/93226/c29f4d39-49b3-3c3f-9468-f1ebeb099984.png[/img]

具体一些异常的出现情况，还是需要我们自己不断的摸索，这里我也不能把所有出现异常的时候全部显示出来。


（四）网页加载情况
如图我firefox中进入[url]www.kehou.com[/url]，页面的加载情况就是

[img]http://dl.iteye.com/upload/picture/pic/93228/1eb5ba6e-0563-313a-abbe-f2413b85d710.png[/img]


”URL“处表示的是加载的东西，可以是图片，css，js，action请求等。”状态“表示的是加载的情况，200 OK表示加载完毕，304 Not Modified表示是缓存处读取的数据，404 Not Found就是数据不存在，400 Bad Request表示请求是糟糕的等等一些，具体可以网上搜下，其他一些也不怎么常见到 。后面的”域“就是加载实体的域，”大小“就是加载数据的大小，“时间线”就是加载时所用的时间长短和顺序，具体时间线上各种颜色代表的情况我也记不得很清楚，每次调试的时候鼠标移上去，都会显示。


[img]http://dl.iteye.com/upload/picture/pic/93228/1eb5ba6e-0563-313a-abbe-f2413b85d710.png[/img]

[img]http://dl.iteye.com/upload/picture/pic/93230/55b428b4-732c-3b45-9bfc-37525d74233b.png[/img]

[img]http://dl.iteye.com/upload/picture/pic/93232/3811d763-164e-32d7-83c1-fb172f26e829.png[/img]