如何在Firefox安装这个插件我就不介绍了，很简单。Web Developer 插件以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。

主要说一下我了解到的它的相关功能：在Web Developer 插件工具栏中，主要由以下几个部分组成：Disable、Cookies、CSS、Forms、Images、Information、 Miscellaneous、Outline、Resize、Tools、View Source、Options。下面我们就对其概况进行介绍。

Disable禁用工具 可以暂时的屏蔽当前页面中的某些东东，如JavaScript脚本、缓存、mete自动重新定向、将网页显示为黑色（图片除外）、禁用弹窗等等。

Cookies工具 可以用此工具查看当前页面的Cookies信息，可以按不同的域名或路径进行查看，而且可以手工增加一个Cookies，这对于后台网络编程的开发调试来说是非常方便而得力的工具。

CSS样式表工具 这是一个非常强大的工具，基于CSS网页布局有这个得力的助手，工作与学习都将变的非常简单，可以控制CSS是否应用，查看页面的CSS文件，并进行实时的编辑，并在浏览器窗口中立即反应出编辑后的效果。

Forms表单工具 其主要作用是对页面的表单进行控制，其中的很多功能对于表单程序的开发有着非常非常大的帮助，由于我们的重点是CSS网页布局，此工具我们不作深入的探讨。

Images图像工具 可以对当前页面的图像进行设定，可以显示所有图片的alt信息，对背景等也可以进行是否显示的设定。

Information信息工具 此工具在我们的CSS网页布局设计中也经常用到，我们可以用它来查看页面中所有的id、class及table等元素的名称、占位等信息，关于此工具，我们后面将作更加深入细致的介绍。

Miscellaneous其他 这是一个非常“好玩”的工具，它所提供的功能是我们所梦寐以求的，在页面布局中，我们可以用它来达到很多有意思的功能，如辅助线、面积、测量等，我们在CSS网页布局设计中也经常用到，关于此工具，我们后面将作更加深入细致的介绍。

Outline线框工具 这组工具对我们CSS网页布局设计是非常有用的，线框显示工具能够将页面中的某些元素使用线框描边，使我们可以更好的查看其占位信息，我们可以使用它给div、h1-h6、表单等进行线框描边，关于此工具，我们后面将作更加深入细致的介绍。

Resize尺寸工具 我们可以用它来改变浏览器窗口的尺寸，如果我们使用了1600*1200的分辨率，我们可以借助此工具来模拟1027*768的窗口效果。关于此工具，我们后面将作更加深入细致的介绍。

Tools工具 对于我们CSS网页布局设计，它的最大功能在于将CSS及XHTML校验工具整合在一起，可以点击此工具中的校验选项对当前页面进行检验，它会自动链接到相关校验页面，并返回校验结果。

View Source查看源代码 用于查看页面的源文件。

Options选项 用于Web Developer 插件的参数设置。

具体应用就不写了，太多了，上面也只是把每个功能主要概括了一下。或许过些日子我也要用到了，到时候再详细介绍没部分的具体功能吧。

必备利器，也只是说说而已，您大可不必在此大做文章，Web开发也是仁者见仁，智者见智的。有人喜欢这样做，有人喜欢那样做，有人喜欢用这些工具，有人喜欢用那样工具。我这里也只是简单的介绍几个对Web开发调试比较方便的工具插件，您若有更好的工具或者插件，不妨也跟我们分享一下。

首先，向您推荐Firefox浏览器，当然并不是我独出心裁，虽然IE浏览器笼络了大部分用户，但Firefox是一个良好的支持W3C标准的开放源代码的浏览器。

很多朋友可能会问，Firefox好用吗？很多时候在IE下显示正常的网页，在Firefox下却出现错位或者不能正常显示的各种奇怪的问题。确实如此，但在大多数情况下这并不是Firefox的问题，而是该网页使用了不符合规范的HTML/JavaScript或其他不符合W3C标准的语言，也有可能该网页是为迎合IE浏览器或者是仅仅在IE浏览器下调试开发的。因为微软的IE浏览器极其的流氓和霸道，它不严格遵守这些标准，仗着以前自己是浏览器业界老大（现在应该也是:P），自己独处心裁，别开花样。还有一个可能的原因就是网页中可能包含一些ActiveX，Firefox只有装了相应的扩展插件才支持ActiveX。

第一个推荐的插件：

如果你需要用IE浏览，你大可以使用插件：IE TAB。它完全使用的是IE的内核，你可以用它来达到在IE下浏览的效果。

当然这并不算Web开发必备的利器。

第二个推荐的插件：

Firebug，相信绝大部分开发者都听过或者用过这个小工具，确实好用，可以调试JavaScript，众所周知，JavaScript的调试是开发者最头疼的事情了。但有了这个Firebug，你就不用那么头大了。我也就不介绍如何安装这个插件了，主要讲一下这个插件的功能及用法吧：

Firebug的相关设置：

* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的“Always Open in New Window”设置。
* 增加/缩小字体大小：先打开firebug，点击左上角的bug标志，选择“Text Size”命令。每次字体变化的幅度非常小，你可能需要使用多次。

* 限制只对某些站点使用Firebug：先右击浏览器状态上的green check mark标志，选择“disable Firebug”命令。然后，再右击这个已经变灰的标志，选择“Allowed Sites…”命令，增加允许Firebug生效的域名。

Firebug的窗口预览：

* Console标签： 主要使用javascript命令行操作，显示javascript错误信息，在底部的>>>提示符后，你可以自己键入javascript命令。
* HTML标签： 显示HTML源码，并且像DOM等级结构那样，每行之前有缩进。你可以选择显示或不显示某个子节点。
* CSS标签：浏览所有已经装入的样式表，可以当场对其修改。在Firebug窗口上部，“edit”命令的旁边，有一个本页面中所有样式表的下拉列表，你可以选择一个样式表进行浏览。

* Script标签：显示javascript文件及其所在页面。在Firebug窗口上部，“inspect”命令的旁边，有一个本页面中所有Javascript文件的下拉列表，你可以选择一个进行浏览。你可以在javascript命令中，设置断点（breakpoint）及其出现的条件。
* DOM标签： 显示所有的页面对象和window物体的属性。因为在javascript中，所有变量都是window物体的属性，所以Firebug会显示所有变量和它们的值。
* Net标签：显示本页面涉及的所有下载，以及它们各自花费的时间，各自的HTTP请求头信息和服务器响应的头信息。XHR标签对AJAX调试很有用。

Firebug方便的调试页面：

在HTML标签中，点击窗口上方的“inspect”命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。

Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中的对象，都可以用单击或双击进行编辑。当你输入完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上部 “inspect”命令旁边的“edit”命令，下方的窗口就会立刻变成一个黑白的文本编辑窗口，你可以对HTML源代码进行任意编辑。在CSS标签中，Firebug会自动补全你的输入。在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。

Firebug处理CSS样式表：

在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。你可以双击对这些设置进行编辑。

对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的 CSS3规则。所以，它会隐藏_height:25px;（下划线是一个针对IE6的设置）和p:first-of-type {color: #ff0000;} (:first-of-type是一个CSS3规定的伪类，目前只有Safari 3支持）。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法显示，那么你只有使用其他编辑器显示全部CSS内容，找到你的错误。
Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。“关闭”一条语句的方法是，在该语句的左边点击，会出现一个红色的turnoffselector.gif禁止标志。该语句就会变灰。再次点击，该语句就会恢复。
Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。
Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector，然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。

Firebug容器模型：

当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个layout按钮，点击后会展示与该元素相关的方块模型，包括padding、margin和border的值。要查看每一个元素的这三项值，只需点击“inspect”按钮，然后用鼠标悬停在页面中该元素的上方。

Firebug调试JavaScript：

JavaScript profiler可以报告你的Javascript函数执行所花的时间，因此你可以查看不同函数对速度的影响。使用这个功能的方法是，打开console 标签，然后点击上面的Profile按钮（上部的按钮顺序是“Inspect |Clear | Profile”）。Firebug列出调用的所有函数，及其所花的时间。你可以针对要测试的某个函数，在其前部加上 console.profile([title])，在其后部加上console.profileEnd()。
console标签的底部是命令行输入，它以“>>>”开头。如果命令行输入有结果输出，那么它会展示在上部的窗口。有一个详细的命令行输入API值得看一下。Firebug内置console对象有几种有用的方法可供调用，包括console.debug、console.info、 console.warning、console.error等。如果这些方法产生了输出结果，Firebug会提供一个链接，让你查看相应的代码。
调试的另一个方法是设置断点。Script标签允许你在任意行暂停执行。单击行号，就会设置一个断点。右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。右面还有一个watch窗口，可以查看当前变量的值。

FireFox的优点我相信就不用多说了吧, 关键是他的可扩展性, 那么多的Add-on组件让我们选择, 真是FireFox用户的便利阿……

今天我主要推荐几个Add-on: 第一个是FireBug, 这个小小的附加组件可以用来debug最让我们头疼的Javascript, 包括css等, 可以很容易让我们抓捕到我们想找到的地方, 很方便. 第二个要介绍给你的组件就是IE TAB拉, 有时候大家总是抱怨甩不掉IE, 因为很多银行网上银行都不支持Firefox的, 都只支持IE. 这让我们这些Firefox的忠实者很头疼, 现在有办法甩掉IE拉, 只需要安装IE TAB这个组件, 我们就可以完全不用打开该死的IE了. 第三个要介绍的组件就是我最近刚开始用的FireFTP, 哈哈, 很好用的. 以后也不需要安装FlashFXP或者CuteFTP了, 不用为了找他们的注册码而搜来搜去的了. 安装好这个组件, 一切皆有可能, FTP不需要用盗版的了.

当然拉, FireFox还有很多有用的附加组件, 我会慢慢来发现他们的. 相信FireFox的明天会更好, 因为有很多人为她写这么多的附加组件. 开源万岁, 免费将是趋势.