Firebug调试js详解

《Firebug调试js详解》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Javascript的调试利器：Firebug使用详解Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript进行调试的工具很多，我比较喜欢使用的是Firebug。Firebug是JoeHewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！1、安装Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的search输入框中输入“firebug”。等搜索结果出来后点击Firbug链接（图1-1红色圈住部分）进入Firebug的下载安装页面。图1-1在页面中点击InstallNow（图1-2）按钮。图1-2在弹出窗口（图1-3）中等待3秒后单击“立即安装”按钮。图1-3等待安装完成后会单击窗口（图1-4）中的“重启Firefox”按钮重新启动Firefox。图1-4当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标（），这就表示Firebug已经安装好了。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而绿色（）则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。而红色图标（）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。2、开启或关闭Firebug单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口（图2-1）。如果你不喜欢这样，可以按CTRL+F12或在前面操

5、作后单击右上角的上箭头按钮，弹出一个新窗口作为Firebug的控制窗口。图2-1从图2-1中我们可以看到，因为我们开启Firebug的编辑、调试和监测功能，所以目前只有两个可以选择的链接：“EnableFirebug”与“EnableFirebugforthiswebsite”。如果你想对所有的网站进行编辑、调试和检测，你可以点击“EnableFirebug”开启Firebug，则以后无论浏览任何网站，Firebug都处于活动状态，随时可以进行编辑、调试和检测。不过一般的习惯我们只是对自己开发的网站进行

6、编辑、调试和检测，所以我们只单击“EnableFirebugforthiswebsite”开启Firebug就行了。开启Firebug窗口（图2-2）后，我们可以看到窗口主要有两个区域，一个是功能区，一个是信息区。选择功能区第二行的不同标签，信息区的显示会有不同，Options的选项也会不同，搜索框的搜索方式也会不同。图2-2要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。如果要关闭Firebug的编辑、调试和监测功能，则需要单击功能区最左边的臭虫图标，打开主菜单，选择“Dis

7、ableFirebug”或“DisableFirebugforxxxxx”。3、Firebug主菜单单击功能区最左边的臭虫图标可打开主菜单（图3-1），其主要功能描述请看表1。图3-1菜单选项说明DisableFirebug关闭/开启Firebug对所有网页的编辑、调试和检测功能DisableFirebugforxxxxx关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能AllowedSites设置允许编辑、调试和检

8、测的网站TextSize：Increa