firebug 使用

使用firebug可以调试javascript,还有可以监测网页打开速度,是开发JavaScript、CSS、HTML和Ajax的得力助手。

打开firebug的控制台,里面有HTML查看和编辑、Javascript控制台、网络状况监视器。

1、Console控制台

控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试,这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用,你能够在控制台里看到每一个 XMLHttpRequests请求post出去的参数、URL,http头以及回馈的内容,原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。 

2、网络状况监测器

也许有一天,你的老板或者客户找到你,抱怨你制作的网页速度奇慢,你该如何应对?你或许会说这可能是网络问题,或者是电脑配置问题,或者是程序太慢,或者直说是他们的人品问题?不管怎么说,最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的,它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来,也许在这里你能一把揪出拖慢了你的网页的元凶,进而对网页进行调优,最后老板满意客户欢喜,你的饭碗也因此而牢固。网络监视器还有一些其它细节功能,比如预览图片,查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

3、Javascript调试器

这是一个很不错的javascript脚本调试器,占用空间不大,但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小,五脏俱全。如果你有一个网站已经建成,然而它的javascript有性能上的问题或者不是太完美,可以通过面板上的Profile来统计每段脚本运行的时间,查看到底是哪些语句执行时间过长,一步步排除问题。

调试javascript可以设置断点,当js执行到断点时停止运行,可以到右侧的break points处查看断点的变量值。  

脚本在断点停止后,我们就可以利用搜索框旁的4个跟踪按钮进行代码跟踪了。第一按钮是继续运行程序,不再执行跟踪,快捷键是F8。第二个按钮是单步执行方式,每次执行一条语句,该方式在遇到函数调用时不进入调用函数内部进行跟踪,快捷键是F10。第三个按钮也是单步执行方式,每次执行一条语句,但它遇到函数调用时会进入调用函数内部进行跟踪,快捷键是F11。当你进入调用函数内,想马上跳出来时,可以单击第四个按钮,该按钮没有快捷键。

还可以在断点标记的红点上单击右键还可以设置断点条件,在符合条件的时候才会停止脚本的执行。