Firebug 是当今最流行的网页开发工具之一。在本文中，你将看到他的10个最有吸引力的功能。
1.控制台
一打开 Firebug，无论是从菜单栏还是通过快捷键CTRL + F12，你第一眼看见的就是控制台。粗略一看，你可能会认为这只是火狐的“错误控制台”的插件版。它们的共同特点是：
1)记录运行错误、警告和通知。
2)能运行 Javascript 程序。
但是 Firebug 有更多功能，比如：
1)记录 Javascript、 CSS、 XML、 XML、Http请求 (AJAX) 和 Chrome 的运行错误。
2)在当前页运行 Javascript 代码
3)补充的 Javascript 对象列表
现在让我们来看看一些控制台的基础应用的例子。想象一下我们要运行如下 HTML 文件：
1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript">
console.time(1);
console.log('the script section has started executing');
console.warn('warning message');
console.error('error message');
console.info('info message');
console.log(
'finishing script execution\n',
'execution took:'
);
console.timeEnd(1);
</script> |
这会导致如下结果：
2. HTML
第二个面版“HTML”有一些复杂，我猜你一定得花挺多时间来了解这个面版。那么我们就一个一个来介绍（按标号对应）：
1.这个按钮相当于“检查元素”（Inspect Element）功能。它能让你迅速地找到与你选择的元素相对应的代码，并能高亮这行代码。
2.在这一区域，我们能看到按层次分好的网页结构，并能进行一些操作，比如：
1)复制其中的HTML
2)创建 XPath 表达式
3)记录事件
4)删除元素
5)编辑其中内容和子节点
6)在DOM标签中查看元素
3.这是这块面版的主区域，能够高效地查看，修改，检查HTML代码，比如能方便地检查漏了一个</div>标记。
4.在这一区域能列出网页内使用到的样式表。其特点在于你能方便地修、检查这些css。
5. 在这个区域你能方便地检查元素的框架结构，包括但不限于：内容大小、边框、补白、位置等属性。
6.在 DOM 能列出所有选定元素的内容与属性。
3.CSS
这个编辑窗口与刚才提到的编辑窗口类似，不同的是在此处编辑不会被实时处理。现在我再分块介绍一下这个部分的相关功能。
1.如果我们编辑的页面包含多个样式表，那么我们可以在这里切换。
2.CSS编辑的主窗口。
3.这里可以便捷地修改CSS属性。
4.可以一键取消某一项属性设置。
4.Script
往往我们得自己写些 Javascript 代码，通常使用控制台编辑就足够了，但在特殊条件下我们不得不使用 Script 面版。鉴于这种情况（你一定会遇到的），那下面就介绍一下这个面版的功能：
1.这个下拉菜单可以让我们选择需要的脚本文本
2.这四个按钮分别是：断续、单步进入、单步跳过、单步退出。它们只在程序运行中断的时候起作用。
3.编辑主窗口。在这里可以增删断点，以及检查JavaScript代码。
4.类似于 DOM 面版。列出了所有参数，以便你调试程序。
5.实时显示程序堆栈。
6.该处显示了所有你所设置的断点。
5. DOM
这个和HTML面版里显示的 DOM 功能相同，这里不再做介绍了。
6. 网络
你知道你的页面加载需要多长时间吗？你想知道哪个请求最费时间吗？一切答案在网络面版就能找到。
1.网络请求按照类型不同分类于此。
2.所有的网络请求都在这里显示。在最后还显示了总结，包括：总请求数，大小，已缓存的文件大小和各项加载时间。
3.这里有更多信息，包括 HTTP Header，回响与缓存。
7.Reference
这个面版是由CodeBurner提供的额外扩展。通过它可以快速地搜索、查看HTML与CSS代码。尽管这些功能不言自明，我们还是来介绍一下吧：
1.搜索框与一些选项按钮。
2.这里列出所有的搜索结果，在图例中只搜到了一条结果。
3.这里列出了对各个浏览器的兼容情况。尽管 Chrome 不在此列，但它与 Safari 一样，使用的是 Webkit 内核，所以通过 Safari 就能看出对 Chrome的兼容状况。
4.如果界面3显示不下，那么点击这里将展示更多内容，包括更多的浏览器兼容情况、其他说明等。
8.Pixel Perfect
如果你曾做过 PSD 切图，你一定懂得要获得各个元素之间的距离是多么费事。这时 Pixel Perfect 就排上用场了，它可以让你方便地完成网页切图。
1.这个按钮可以让你在当前页添加多个重叠的图片。
2.图象列表，在这里可以更改覆盖方式。
3.其他图片覆盖选项。
9.YSlow
由雅虎开发的扩展，能给你提供一系列如何改进网页的建议。
通过YSlow我们可以给网站的各方面进行测试并分级。这样可以很容易地完善网站。
不仅有各种图表，还有很多性能分析，包括JSLint和Smush.it™。
10.firePHP
最后我们还要介绍一款同样重要的扩展：FirePHP。通过它我们可以方便地调试PHP代码，并在控制台输出相应的警告、错误等信息。
上述插件你可以在这里下载到：
翻译：所以说
原文：10 Reasons Why You Should Be Using Firebug
![[RSS 1.0]](images/rss10.png)
![[RSS 2.0]](images/rss20.png)
![[FOAF]](images/foaf.png)
![[OPML]](images/opml.png)
![[Planet]](images/planet.png)
![[Mozilla Firefox中文社区]](images/firefoxcn.png)
![[Get Firefox]](images/firefox.png)
![[Hosted by opentiss]](images/opentissh15.png)
