Firebug中你不该错过的几个功能

Firebug是Firefox的一个扩展，提供了诸多网页开发的辅助功能，如果你是一个网页开发人员，天天要和HTML/CSS/Javascript打交道，Firebug能大大提高你的工作效率。
Firebug的大部分功能都很直观，我最常使用的是Inspect CSS/DOM和Javascript debug，有时候会看看Net和YSlow。还有一些功能，或大或小，不是上来就发现，但也是非常好用，不容错过：

获取XPATH

无论做userscript、bookmarklet还是网页爬虫，有时候用五六行DOM实现的网页元素提取，用XPath一句就搞定了。以前定位一个元素的XPath主要靠眼，有Firebug就省眼了，先用Inspect定位网页元素，然后点右键，选Copy XPath，搞定。

这个XPath是从DOM树里来的，已经修正了网页上的一些错误，所以有时和实际的XPath有一些偏差，但一般都很容易调整。比如一些网页中table 里没有tbody，直接就是表格内容，DOM树会自动补上tbody，得到的xpath中也会有tbody，在实际使用的时候，和网页实际内容对应，就要 把tbody去掉。

javascript命令行

如果哪个脚本语言不提供带命令行的控制台(console)，我就不玩了，:-p。善用命令行控制台(console)，可以省下很多debug的时间。我以前介绍过jsenv。Firebug也提供非常好用的javascript命令行控制台，可以直接和当前网页交互，输入命令的时候还能自动补齐。另外，一定不要忘记先看看这个命令列表。

控制台API

我最爱用的javascript函数就是alert，偶尔把它放在循环里，我可以花一下午的时间点OK玩。现在是和alert说byebye的时间 了。Firebug提供了一套相当完备的javascript控制台API，可以将log直接输出到控制台而不再用跳出小窗口，提供多种log级别 （debug,info,warn,error)和分组功能，可以显示对象属性，可以记录stack trace，甚至提供timer和profiler，调试performance都不用发愁了。记得查看控制台API的说明。

标尺

无论在网页布局还是做动态HTML，常常需要知道一个网页元素的相对位置。你可以装一个Measueit扩展自己量，也可以用Firebug里的标尺。用Inspector选中你要度量的元素，在右侧选中Layout标签，然后鼠标划过盒模型中央，标尺就会出现。

在所有浏览器中使用Firebug

对不起，不是所有的功能，是不是有点失望。不过，至少你可以保证控制台API正常输出，并且提供命令行的支持，已经相当不错了。下载firebuglite文件，放在脚本目录下，然后在页面中加入：

<script language="javascript" type="text/javascript"
src="/path/to/firebug/firebug.js"></script>

用F12就可以召唤出Firebug了。