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代码，并在控制台输出相应的警告、错误等信息。

上述插件你可以在这里下载到：

• Firebug
• CodeBurner
• PixelPerfect
• YSlow
• FirePHP

翻译：所以说
原文：10 Reasons Why You Should Be Using Firebug