Firebug是一个Firefox插件,功能：HTML查看和即时编辑、控制台、网络状况等，是开发JavaScript、ExtJs的得力调试工具。
一、Firefox的安装.下载地址:
http://www.mozilla.org.cn
二、Firebug下载地址：
https://addons.mozilla.org/zh-CN/firefox/search?q=firebug
下载后将 firebug 拖入到 firefox 浏览器中即可自动安装。
三、演示[我们以前面讲过的login.htm为例]：
我们在开发的时候，最常用的三个firebug功能分别为：查看元素的构成、脚本调试、client与service交互查看
1.查看页面元素，现在我们看一按钮的组成结构。
如下图所示：
(1)找开firebug。
(2)点击左下角的小方块[小虫子旁边的]。
(3)然后把鼠标移动到提交按钮的位置[即：我们要查看结构的对象]。
如图所示[默认]：firebug的左侧部分显示的是这个按钮的构成，右侧部分显示的是样式表。
2.js脚本调试
(1)我们故意把login.htm的代码改出错，在上节课中59行的位置多加个“,”，如下代码第8行所示。
1 //密码input 2 var txtpassword = new Ext.form.TextField({ 3 140, 4 allowBlank: false, 5 maxLength: 20, 6 inputType: 'password', 7 name: 'password', 8 fieldLabel: '密 码',, 9 blankText: '请输入密码', 10 maxLengthText: '密码不能超过20个字符' 11 });
(2)点击firebug控制台。
(3)刷新页面后如下图所示:
控制台直接显示错误信息[文件名，行号，列号等]，点击后会直接打开客户端的js文件，并找到出错位置。
在firebug中还可以设置断点，逐步调试，这个功能大家自行看下，这里就不做讲解了。
3.我们在做开发的时候，大部分是与service端做交互，在这方面firebug也做出了很好的帮助调试功能，如下图所示：
点击“网络”--》"xhr"
我们在开发中常用的有"Post"和“响应”
(1)我在client向service以post形式发送了3个参数，分别为：username,password,checkcode。
(2)点击“响应”后会显示service返回给client的返回值。
这样我们就可以很容易的查看client与service端的交互，并且判定错误是出在service端还是client端。