Firebug调试器介绍

安装 Firebug

• 第一步，点击 Firefox 浏览器上的“工具”选项，然后点击“附加软件”，在弹出的小窗口中，点击右下角的“获取扩展”选项，如图 4 所示。

  
  
  图 4. 获取扩展
  

• 第二步，在点击“获取扩展”选项后，打开的页面中搜索 Firebug，在搜索结果的页面中，下载 Firebug 。需要注意的是，Firebug 的版本要与 Firefox 的版本相兼容。如果要查看自己 Firefox 的版本，可通过点击浏览器“帮助”选项下“关于 Mozilla Firefox ”选项。

• 第三步，由于目前 Firebug 直接支持的是 Firefox3.0，而本书作者的 Firefox 是 Firefox2.0，因此需要从 Firebug 的老版本中找到合适的 Firebug 版本。 Firebug 的下载网页会判断您的浏览器版本。如果尝试下载安装不合适的 Firebug 版本时，其链接是失效的。与本书作者浏览器版本相对的最佳 Firebug 下载页面如图 5 所示。其余的一些老版本的 Firebug，只要可以下载的，一般来说，也就是可以使用的。

  
  
  图 5. 下载合适的 Firebug
  

了解 Firebug 调试功能

• 第一步，启动 Firebug 。 Firebug 安装完成以后，有的 Firebug 版本会在浏览器的右下角产生一个特殊的小图标。点击这个小图标，就可以打开 Firebug 的调试窗口。如果浏览器的右下角没有小图标，则可以通过浏览器菜单中的“工具”>“Firebug”>“Open Firebug”打开 Firebug 的调试窗口。 Firebug 打开以后，会在浏览器的下端出现如图 6 所示的窗口。

  
  
  图 6. Firebug 调试窗口
  

• 第二步，Console 窗口的使用。 Console 窗口除了显示页面加载的文件以外，还可以直接显示页面中的代码错误和一些输出信息。

  如果将清单 1 代码中的 dojo.require("dijit.form.Button") 删除，就会在 Console 窗口中出现如图 7 所示的红色错误警告。

  
  
  图 7. Console 窗口中显示的代码错误
  
  
  

  除了看到页面的运行信息以外，还可以直接在 Console 窗口中输出调试信息。 Firebug 支持的调试语句较为常用的是 console.log 。

  在清单 1 的 init 函数中加入一条语句 console.log("I am Firebug!")，然后刷新页面则可以在 Console 窗口中看到如图 8 所示的输出。 console.log 除了可以直接将字符串输出以外，还可以使用如 C 语言的 printf 一样的格式控制进行输出。

  
  
  图 8. 输出调试信息
  
  
  

  在清单 1 的 init 函数中加入清单 2 中的代码，然后刷新页面则可以在 Console 窗口中看到如图 9 所示的输出。

  
  
  清单２
  

  var num = 222; console.log("My test num is %d",num); console.log(num,window,login);

  
  
  
  图 9. 输出调试信息的高级使用方法
  
  
  

  此外，为了方便将不同类别的调试信息输出进行区别（比如错误信息和警告信息），可以使用另外四种调试输出语句。

  在清单 1 的 init 函数中加入清单 3 中的代码，然后刷新页面则可以在 Console 窗口中看到如图 10 所示的输出。

  
  
  清单 3
  

  console.debug("I am debug"); console.info("I am info"); console.warn("I am warn"); console.error("I am error");

  
  
  
  图 10. 另外四种调试输出语句
  
  
  

  有 Javascript 经验的读者可能会习惯于使用 alert() 进行调试信息的输出，但是笔者认为将调试信息在 Console 窗口中输出是一个更优的选择。首先，如果页面有很多 alert(), 则点击“ OK ”让弹出框消失也是一个非常烦人的事情。其次，如果调试信息的量很大，则是用 alert() 的弹出窗口将无法良好的完整展示调试信息。接着，alert() 无法查看对象和数组的细节信息。最后，如果在一个循环中使用 alert(), 将很容易造成页面“死掉”。

• 第三步，HTML 窗口的使用。在 HTML 窗口中可以查看到页面的源代码。除了可以查看页面的源代码外，还可以使用 Firebug 的编辑功能直接对页面进行编辑。

  
  
  图 11. 使用 Firebug 的编辑页面功能
  
  
  

  如图 11 所示，在处于 HTML 窗口的模式下，点击 Edit 按钮，将切换查看模式到编辑模式。需要注意的是，在使用 Edit 模式前，最好如图 11 先提前选中页面的 body 代码区块。

  
  
  图 12. 使用 Edit 后的页面效果
  
  
  

  如图 12 所示，在 Edit 模式下，在页面代码的最后加上了字符串“ bbbb ”，然后在页面的相应位置也直接显示了字符串“ bbbb ”。需要注意的是，在页面新加完代码后，需要点击一下页面的其它任何地方，则其效果才会在页面上加载。

  
  
  图 13. HTML 模式下的 Style，Layout，DOM 三窗口
  
  
  

  如图 13 所示，在 HTML 窗口模式下，与 HTML 窗口相对应，在其右边有 Style，Layout，DOM 三个用于查看页面对应部分相关属性的窗口。当选中页面中的某个部分时，Style 显示选中部分的 CSS 属性，Layout 显示 CSS 的盒式模型，DOM 显示其选中部分的所有 DOM 对象。结合使用 Inspect 功能可以方便选择页面中所需要关注的部分。

  在图 13 中所显示的是在使用了 Inspect 功能选中一个 Dojo 文本框后，其所显示的 Dojo 文本框的 CSS 修饰。这些 CSS 修饰是通过加载 Dojo 的 CSS 文件来实现的。

• 第四步，Script 窗口的使用。 Script 窗口支持对 Javascript 的断点调试。

  在 Script 窗口下，可以选择不同的脚本文件进行调试。在选择好需要调试的脚本文件以后，直接使用鼠标点击代码行的左端可以添加断点，断点的标志是一个圆点。（此外，也可以在代码中直接写入 debugger; 来添加断点）

  然后刷新页面，则当脚本执行到断点位置的时候，停止执行。此时，可以选择 Script 窗口右边的几种调试按钮对当前代码进行调试。

  在图 14 中，在代码的 18 行添加了断点，且此时脚本单步运行到了第 22 行。

  
  
  图 14. Script 窗口的使用
  

• 第五步，DOM 窗口和 Net 窗口的使用。 DOM 窗口主要显示的是页面中的所有对象，及其所包含的属性和方法。 Net 窗口主要是显示当前页面中所加载的各个文件的大小和加载各个文件所花费的时间。

  除了上述五步中所讲述的功能以外，Firebug 还有一些功能本文没有涉及。如果读者对 Firebug 的使用特别感兴趣，可以在网上搜索相关资料进行了解。

  但是在某些情况下，仍然需要在 IE 或 Safari 等其它非 Firefox 浏览器上进行调试。在这个时候，Dojo 可以提供一些帮助。

  Dojo 实现了一个跨平台的调试信息输出的功能。如果需要使用这个功能，则只需要将 djConfig 的参数值设置为“isDebug: true ”便可以了。

  如图 15 所示，在页面的最下面有一个方型区域，其中有三条输出。这三条输出分别对应的调试语句为 console.debug("This is console debug information");console.warn("This is console warn information"); 和 console.error("This is console error information"); 。

  
  
  图 15. IE 下使用 Dojo 的跨平台调试信息输出功能