内容概要：

学会使用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(),将很容易造成页面“死掉”。

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

在处于 HTML 窗口的模式下，点击 Edit 按钮，将切换查看模式到编辑模式。需要注意的是，在使用 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 窗口主要是显示当前页面中所加载的各个文件的大小和加载各个文件所花费的时间。