Javascript的调试,是开发Web应用尤其是AJAX应用很重要的一环,目前对Javascript进行调试的工具很多,我比较喜欢使用的是Firebug。Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具,可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。
|
图1-1
|
|
图1-2
|
|
图1-3
|
|
图1-4
|
|
图2-1
|
|
图2-2
|
|
图3-1
|
菜单选项
|
说明
|
Disable Firebug |
关闭/开启Firebug对所有网页的编辑、调试和检测功能
|
Disable Firebug for xxxxx
|
关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能
|
Allowed Sites
|
设置允许编辑、调试和检测的网站
|
Text Size:Increase text size
|
增大信息区域显示文本的字号
|
Text Size:Decrease text size
|
减少信息区域显示文本的字号
|
Text Size:Normal text size
|
信息区域以正常字体显示
|
Options:Always Open in New Window
|
设置Firebug控制窗口永远在新窗口打开
|
Show Preview tooltips
|
设置是否显示预览提示。
|
Shade Box Model
|
当前查看状态为HTML,鼠标在HTML element标签上移动时,页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。
|
Firebug Website..
|
打开Firebug主页。
|
Documentation..
|
打开Firebug文档页。
|
Discussion Group
|
打开Firebug讨论组。
|
Contribute
|
打开捐助Firebug 页面。
|
表1
|
|
图4-1
|
菜单选项
|
说明
|
Show JavaScript Errors | 显示脚本错误。 |
Show JavaScript Warnings
|
显示脚本警告。
|
Show CSS Errors
|
显示CSS错误。
|
Show XML Errors
|
显示XML错误。
|
Show XMLHttpRequests
|
显示XMLHttpRequests。
|
Larger Command Line
|
将命令行显示从控制窗口底部移动右边,扩大输入区域。
|
表2
|
|
图5-1
|
方块一
方块二
|
方块三
”的,但是Firebug中我们是可以看见的(图5-2选中部分)。
|
图5-2
|
|
图5-3
|
|
图5-4
|
方块二
”已被加亮显示(红色部分)。如果你单击某个显示区域,则该区域的源代码会被选中。
|
图5-5
|
|
图5-6
|
|
图5-7
|
|
|
图5-8
|
|
图5-9
|
|
图5-10
|
|
|
图5-11
|
|
|
|
|
|
图5-12
|
|
|
|
|
|
图5-13
|
|
|
|
|
|
图5-14
|
图5-15
|
|
图5-16
|
|
图5-17
|
|
图5-18
|
|
图5-19
|
|
图6-1
|
|
图7-1
|
|
|
图7-2
|
function test(){
for(var i=0;i<1000;i++){
document.getElementById('div2').innerHTML=i;
}
}
|
|
for(var i=0;i<1000;i++){
”这行上设置一个断点,并设置条件为“i=100”(图7-3),然后单击“div2”开始执行函数test。
|
图7-3
|
|
图7-4
|
|
|
图7-5
|
|
图7-6
|
|
|
图7-7
|
|
图7-8
|