Firebug

 高要求的web开发：要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug有6个主要的Tab按钮：console，html，css，script，dom，net。

1.Console：

1）显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

2）还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

3）查看脚本的log。以前用alert（url）打印变量，现在可用console.log()打印日志，输出有多种可选的格式及语法。

2.HTML代码查看器：

1）格式化的HTML代码，可分辨每个标签之间的从属并行关系，层次清晰。标签的层叠功能。源代码上方标记出DOM层次，可看出一个html元素的parent、child及root元素，配合css查看器，进行div+css页面分析。

2）可在HTML查看器中直接修改HTML源代码。当JavaScript根据用户动作动态改变某些HTML元素时，HTML查看器可抓取页面上改变的内容。利用Inspect检查功能，可在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表。

3.CSS调试：

自下向上列出每个CSS样式表的从属继承关系，及每个样式在哪个样式文件中定义。可直接添加、修改、删除CSS样式表属性。

4.net网络状况监视器：

将页面中CSS、JavaScript、图片载入所耗时间以矩状图呈现出来，对网页调优。

5.JavaScript脚本调试：

单步、断点、变量查看。

Profile用来统计每段脚本运行的时间，查看哪些语句执行时间过长，优化性能。

6.DOM查看：

DOM中包含大量Object及函数、事件。双击DOM对象，可以编辑它的变量或值，按tab可自动完成功能，shift+tab恢复原状。