10个为什么使用Firebug的原因
Firebug是web开发人员使用最为广泛的工具之一，它是基于Firefox浏览器所开发的插件。在本文中，我将为你呈现10个Firebug足以吸引的特性。
1. Console
当你打开Firebug(无论你是单击状态栏或使用Ctrl+F12快捷键)后第一个你将会看到的是Console（控制台）界面。快速地浏览控制台后，你会发现它是一个替代版本的查错控制台（Ctrl+Shift+J）。通常的特性有二：
- 记录错误、警告、通知的日志；
- 运行Javascript代码。
但是Firebug扩展了Firefox的功能，所以Firebug可以做的更多：
- 记录Javascript、CSS、XML、XMLHttpRequest (AJAX) and Chrome (Firefox internals)的错误日志；
- 在当前页面运行Javascript代码；
- 将从外部引用的Javascript对象排列在控制台中。
看一个例子。Html 代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html>
<head>
<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>
</head>
</html> |
代码运行后控制台将显示信息：（如图。点击查看大图）
2. HTML
第二个界面，也是大部分web开发人员花费时间和精力最多的一个界面，它被分割为对各板块，（如图。点击查看大图）
- 该界面以收缩的树型呈现了当前页面的所有Html元素，鼠标移动到某个Html标签上时，在浏览器界面会用黄色的框框选中内容；
- 在该界面，可以分阶地选择Html元素，还可以进行一些其他的操作，如:
- 复制内联的HTML元素；
- 编写 XPath 表达式；
- 额外的事件观测器 （都记录在Console中）；
- 删除元素；
- 编辑元素和子节点；
- 在检查元素时，可以在DOM tab中移动元素
- 该界面的主窗口主要用来浏览Html文档、快速地修改代码和定位错误代码（比如关闭一个div标签）。上下文菜单也提供了和第2部分讲的同样的功能；
- 在style界面中还呈现了计算后的样式表和当前页面的元素。修改样式和CSS继承的功能也是它的最有价值特性之一；
- 通过layout界面我们可以很容易地查看一个元素的盒子模型:（如图。点击查看大图） content size, padding, offsets, margins and borders.
- 在DOM界面会罗列出一个被选择元素、方法、以及属性的列表，供我们查看：（如图。点击查看大图）
3.CSS
该界面与前面Html界面中的Style界面的主要区别是：在该界面你可以浏览没有经计算机计算过的styles：（如图。点击查看大图）
- 如果你正在操作的页面包含多个样式表, 通过该界面我们可以选择各个样式表；
- 主区域将用于呈现CSS代码;
- 可以轻松地修改CSS样式；
- 可以轻松地取消CSS规则。
4. Script
有时，当你在写Javascript代码，你必须让你的手脏。大多数时候，你会发现自己一直在使用Console控制台;只有在无法解决的情况下，你才会切换到Script界面。鉴于这些情况（这是必然发生的） ，让我们来看看这个界面，并开始熟悉它：（如图。点击查看大图）
- 点击下拉按钮，我们可以选择所需的脚本文件；
- 调试功能: continue, step in, step over and step out. 它只有在代码执行到断点时才会停止；
- 在主窗口我们可以设置（或取消）断点，也可以查看Javascript代码；
- 和DOM界面相似，Sciprt界面的监控界面输出了一些对象方法以及在调试的代码中的参数；
- 在堆栈界面实时地显示函数；
- 在断点界面罗列出断点的列表，只有在这儿你才可以取消断点。
5. DOM
DOM界面的功能和前面Html下的DOM功能一样，跳过说明。
6. Net
你是否好奇你的网页加载需要多久的时间，或则好奇那个请求占用了加载的大部分时间呢？那么你就可以通过Net界面查看这些细节：（如图。点击查看大图）
- 网页请求可以被它内部的过滤原则过滤；
- 每个请求的结果都罗列在这一界面。在请求清单的最后，我们看到的摘要信息：请求数量，大小，多少缓存和请求花费总时间；
- 更多细节可以被查看，如： HTTP标头，回应和缓存（和回应相同）。
性能测试
是否需要测试特殊的功能或循环？使用Firebug的“Timer”功能。
1 2 3 4 5 | function TimeTracker(){ console.time("MyTimer"); for(x=5000; x > 0; x--){} console.timeEnd("MyTimer"); } |
只需要3步。开始时调用”console.time” 并传入一个特定参数。下一步，放如我们的代码。最后，调用“console.timeEnd”，并再次传入该特定参数。
7. Reference
这是Firebug的附加组件，由CodeBurner提供的。通过这个面板，您可以快速访问您的HTML和CSS代码。（如图。点击查看大图）
- 搜索和过滤部分;
- 在面板中，搜索到的结果会堆叠起来;
- 兼容最新版本的主要浏览器。Chorme不属此列，但Chorme与Safari使用相同的浏览器引擎，即Webkit ，因此，如果Safari能兼容的话，Chorme也就可以兼容。
- 如果你觉得在这个面板显示的信息不够的话，你可以通过访问链接查找更多的信息，如：例子，兼容更多的浏览器版本，描述信息等
8. PixelPerfect
如果你曾经做过PSD分割，那么你就应该知道测量构图元素之间的间距是如何的耗时。PixelPerfect证明了它在这方面的的能力。将它添加到你的附加组件里将帮助你完成完美切片。（如图。点击查看大图）
- 有了这个按钮，我们可以添加多个重叠图像到当前页面；
- 图层列表，在这里我们应用或删除图层；
- 涂层设置。
9. YSlow
YSlow是另一个很不错的Firebug附件，由Yahoo！开发。它通过一些列的测试后给出提高网页速度的建议。（如图。点击查看大图）
通过使用YSlow，我们可以盖上网站的整体性能。也可以很容易地发现实时问题，同时获得一系列的建议。
除了饼图统计，我们也可使用JSLint和Smush.it。
10. FirePHP
最后，最重要的Firebug附件就是FirePHP 。有了这个插件，我们可以从我们的PHP代码透明地发送信息（警告，错误，日志，信息）到控制台面板。由FirePHP的网站提供的例子：
1 2 3 4 5 6 | < ?php FB::log('Log message'); FB::info('Info message'); FB::warn('Warn message'); FB::error('Error message'); ?> |
结束语
我希望这个关于Firebug面板/附件的列表会使您的web开发生活更容易，就像我使用它们一样。最后，我们大家都知道，错误是必然发生的，因此没有理由不正确地编写。
- 上一篇: 收藏的Cheat Sheets链接
- 下一篇: 简谈新窗口打开超链接的技巧
firebug很强大，我做毕业设计的时候也是用它！ie8和chrome的开发人员工具我觉得够不够它强大，我最喜欢它的一点就是能够查看request和response，不过10个原因您似乎只说了7个。
呵呵，在写的时候一不小心，就先发布了。
楼主，请问，你的首页的图片是怎么实现的。
呵呵，用了jQuery的innerfade插件，很容易实现的。那部分图片只是我暂时这样设计的，等我编写好后，会设计为新闻展示的！！
我也来看看支持,,,