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

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



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

   （二）页面html调试
如图：


       有的时候页面的结构会跟前端切出来的有些区别，最好的办法就是在firebug上去点击图中那个左上方的小方块，然后在页面上选择有问题的地方进行查看。而且可以直接在firebug显示html代码里自行添加一些代码，回车查看修改后的效果。
      
这里就随便修改了iteye的博客管理里的第一个“发表文章”为“我是文章”：




    （三）网络查看
      有很多情况可以用到“网络”里面的东西。
      比如页面提交信息或者查看每个请求的参数等。
      如图，我执行一次发表日志的请求后，“网络"内选择post publish.action条目进行查看，里面的”Post“下有所有刚刚请求过去的参数列表，还有其他一些”头信息“，”响应“ 等。
     

      一些异步的参数提交等可以在相应的请求下找到参数，这里我找了一个dwr的请求的响应，该响应回来的是一个礼物的列表
         

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


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




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

评论

1 楼 异步获取爱 2012-08-28  

到了新公司，了解到原来firefox做firebug的那个家伙跳到google做了，现在chrome的debug很牛逼了，公司的前端都在用，学习下贴个文章出来，大家与时俱进。