第3章 调试工具及技巧
子曰：“工欲善其事，必先利其器。”作为开发人员，好的调试工具是必不可少的。幸运的是，现在JavaScript的调试工具越来越多，也越来越方便。本章将介绍Firebug、Debugbar、IE 9等调试工具，根据你们的喜好选择一款吧，这是必需的。
3.1 使用Firebug进行调试
1.Firebug概述
Firebug是由Joe Hewitt开发的、基于Firefox的一个扩展，是目前最好的Web开发调试工具。它可以在客户端实时编辑、调试和检测任何页面的CSS、HTML和JavaScript。
虽然也可以在其他浏览器中使用Firebug lite，但是功能都不如在Firefox中强大，因而本书没有特别声明时说的Firebug都是基于Firefox环境的。
2011年是Mozilla“疯狂”的一年，Firefox的版本一下子从3.6升级到9，版本更新的速度越来越快，读者可以根据自己的喜好选择一个适合自己的版本。本节的安装过程是在4.0版进行的，与最新的版本可能会有差异，但基本上还是一致的。
2. Firebug的安装
打开Firefox后，如图3-1所示，打开Firefox菜单，并选择图中红色圈住部分的“附加组件”。
在如图3-2所示的附加组件管理器标签页的搜索框中输入Firebug并按下回车键。
在如图3-3所示的搜索结果出来后，单击Firebug 1.7.0 条目中的“安装”按钮。
安装完成后将显示如图3-4所示的结果，单击“立即重启”重新启动Firefox，即可完成Firebug的安装。
Firefox重启后会如图3-5所示，在底部多了一个附加组件栏，栏中最右边多了一个臭虫图标，这是Firebug附加的工具按钮。单击可打开如图3-6所示的Firebug工作区域。
如果需要最新版本的Firebug或旧版本的Firebug，可访问http://getfirebug.com/downloads。网站提供的是以xpi为扩展名的Firefox扩展文件，单击后Firefox会如图3-7所示提示你是否允许安装该扩展。单击允许并等待下载完成后将看到如图3-8所示的软件安装窗口，单击“立即安装”后可看到如图3-9所示的立即重启信息。单击“立即重启”即可完成安装。
3. Firebug的界面
通过Firefox附加组件栏的Firebug图标或用快捷键F12可打开或关闭Firebug窗口。从图3-6中可看到Firebug主要由工具栏和面板区两部分组成。工具栏按钮的详细说明如表3-1所示。
Firebug有控制台、HTML、CSS、脚本、DOM和网络5个基本面板，切换到不同的面板时，面板区的显示会不同。有些基于Firebug的插件会在Firebug内增加自己的面板。
默认状态下只有HTML、CSS和DOM面板是处于活动状态的，而控制台、脚本和网络面板需要启动才能使用。这主要是因为开启这3个面板很占资源，而且容易造成Firefox崩溃，这需要大家做好心里准备。
4.控制台面板
控制台面板的主要作用是显示各种的错误信息（可在面板按钮的下拉菜单中定义），输出脚本调试信息，使用命令行调试脚本，以及检测JavaScript执行时间的概况。
将面板切换到控制台将看到如图3-10所示的面板区。这时面板还没开启，如果要开启所有面板，可在附加组件栏的Firebug图标上单击鼠标右键，在菜单中启用所有面板。如果只开启当前面板，则单击面板中的“启用”，或在工具栏的面板按钮下拉菜单中选择“启用”。启动后的控制台面板将如图3-11所示，它包含工具栏、信息区和命令行3个区域。