Dojo第一节：学会使用firebug对js，Dojo进行调适

内容概要：

学会使用firebug的基本功能

1. 简介：Firebug是Firefox的一个插件，用来对js代码进行调适的工具。

（官方废话：Firebug是firefox下的一个插件,可以调试全部站点语言，如Html,Css等，但FireBug最吸引我的就是javascript调试功能，使用起来非常方便，并且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其它功能还非常强大，比方html,css,dom的查看与调试，站点总体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。）

2.安装 Firebug

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

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

第三步，安装好，重新启动浏览器就可以。

3.Firebug 调试功能

快捷键一：当你输入document.get之后，按下tab键就能补齐为document.getElementById，很方便。假设你觉得补齐得不够理想，按下shift+tab又会恢复原状

快捷键二：直接在浏览器输入F12就可以直接打开firebug调适工具

进入正文：

功能一，Console 窗体的使用。 Console 窗体除了显示页面载入的文件以外，还能够直接显示页面中的代码错误和一些输出信息。

Console 窗体中输出调试信息。 Firebug 支持的调试语句较为经常使用的是 console.log 。

比方：

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

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

功能二，HTML 窗体的使用。在 HTML 窗体中能够查看到页面的源码。除了能够查看页面的源码外，还能够使用 Firebug 的编辑功能直接对页面进行编辑。

在处于 HTML 窗体的模式下，点击 Edit button，将切换查看模式到编辑模式。须要注意的是，在使用 Edit 模式前，最好先提前选中页面的 body 代码区块。

在 Edit 模式下，须要注意的是，在页面新加完代码后，须要点击一下页面的其他不论什么地方，则其效果才会在页面上载入。

功能三，HTML 模式下的 Style，Layout，DOM 三窗体

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

功能四，Script 窗体的使用。 Script 窗体支持对 Javascript 的断点调试。

功能五，DOM 窗体和 Net 窗体的使用。 DOM 窗体主要显示的是页面中的全部对象，及其所包括的属性和方法。 Net 窗体主要是显示当前页面中所载入的各个文件的大小和载入各个文件所花费的时间。