木木木木木

首先申明，个人对Firefox的firebug插件，IE8的开发人员工具，不熟。此文也只以个人角度出发，对Chrome的审查元素的部分功能做个介绍。所以，各位童鞋大可不必争到底孰好孰坏，各取所需各选其好即可！

使用Chrome的审查元素很简单，以小站wordpress的分类页为例：

打开页面——鼠标移到“折腾WP”——右键——审查元素

即弹出了审查元素的窗口：

我们看到导航中的“折腾WP”元素的源代码已经被高亮，整个页面源代码也以折叠方式展示在主体的左边部分。当我们移动鼠标到高亮的源代码上时，会发现页面上的“折腾WP”被突出显示了。当然同样把鼠标移到源代码的其他部分，页面上也会实时突出显示对应的部分，点选源代码中的其他部分后，右边内容也会即时改变。

那右边部分显示的又是什么呢？这里显示的主要是当前选中元素所对应的CSS代码，就是说可以从右边部分看到定义这个元素在此页面上显示的所有CSS代码。当我们把鼠标以过去时，每个CSS属性右边会出现一个打钩的小框框，点击小勾子就可单独取消此条CSS属性，同时，我们可以即时看到页面上元素的变化：

同时右边部分的Metrics内，还直观显示了此元素的框模型：

另外，我们也可以双击CSS属性，如双击“padding:8px 15px;”后就可修改数值和属性，并在修改完后按回车即可查看元素在页面上的变化：

由于对其它源代码查看工具不熟，不确定Chrome审查元素中的这样的一个功能：

折叠展示页面源代码+独立显示元素所对应定义的所有CSS属性+可即时修改CSS属性并直观展示在页面上

算不算一个很好使很强悍的一个功能了！

当然，Chrome审查元素不单单就只有我所说的这些功能。但对我来说，仅我以上所说的这些，已足够我随心所欲地修改我小站的页面样式。另外，我也可以轻松地使用此功能，扒下其它网页酷炫的CSS样式为己所用~

好了，要说的这就这些，更多内容就等各位童鞋来补充咯~~