首先我们运行FF点击菜单栏的：工具>>扩展，如下图：
扩展工具面板列出了FF所有安装过的插件，例如GG工具栏等。如下图：
我们从本页最顶部提供的链接下载Web Developer插件，我们将此文件拖到FF的扩展工具面板上（在文件上按左键不要松动 移动鼠标拖动到面板上释放左键），如下图：
此时会出现一个新的对话框，要求我们确认是否安装Web Developer插件，点击“确认安装”，如下图：
界面回到了扩展工具面板，提示我们在重启FF后即安装Web Developer插件，如下图：
我们关掉扩展工具面板，并关闭FF浏览器。然后重新启动FF浏览器，软件会有一个自动安装的过程，当安装结束FF成功重启后，我们就可以看到Web Developer插件的工具条了。
假如你的FF浏览器上并没有Web Developer插件的工具条，请在FF浏览器工具栏的空白处点击右键，选中Web Developer Toolbar。如下图：
最终我们成功的安装了Web Developer插件，最终的效果是：
下面的内容里，我们将学习如何使用它！

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 Developer 插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，我们不将它完全的展开探讨，我们仅针对CSS网页布局开发调试对它进行了解，有爱好的朋友可以具体的研究一下它的强大功能。



CSS工具　是我们需要了解的重点，它提供了许多功能来辅助我们查看网页，废话少说，我们往下深入，看图片先：



1、Disable Style 禁用样式


可以用来禁用当前页面的某些或全部样式的显示。


·All Style禁用所有样式，页面中将没有任何样式效果。


·Browser Default Styles　应用浏览器默认样式，意义不大的功能。


·Embedded Styles　禁用放置在页面中 的内部样式表，其它无影响。

·Inline Styles
禁用行间样式表，即使用style=""形式的将不显示。

·Linked Style Sheets　禁用以link标签链接外部样式表。
·Print Sytles　禁用打印样式表
·Individual Style Sheet　单独设置所链接的外部样式表是否显示。例如：当前页面链接了三个外部样式表，1.css、2.css、3.css我们可以通过此功能将某一个样式表禁用。请你注重这个功能其实是非常有用的，可以帮助我们在调试时找到问题是出在哪里，我们禁用某个样式，看引发的问题是不是依然存在。假如禁用了某一个样式，问题消失了，那一样是这个被禁用的样式表文件中的某些设置出现了问题。


2、Display CSS By Media Type
按媒体的类型显示样式。我曾经介绍过在DreamWeaver中可以按媒体查看方式查看页面效果（http://www.52css.com/article.asp?id=301），此功能与此类似。不过目前只支持两种媒体类型：掌上设备、打印。
3、View CSS 用来查看CSS文件代码，点击该命令会打开一个新的FF标签页，显示当前页面的CSS，假如当前页面Link有多个CSS文件，会给出该文件的URL，或者显示出此样式为行间样式或内部样式。如下图：



4、View Style Information 查看样式信息。非常实用的学习与辅助设计功能，在点击开启这个选项以后，在FF的状态栏，会给我当前鼠标所在位置的样式信息。鼠标停留在某一个元素上时，也会显示出该元素在当前CSS样式表中的层次。这个功能可以非常方便的学习别人的CSS网页布局设计，我们在浏览他人的作品里，对某一效果不知道如何实现，我们可以应用这一功能马上找到所应用的样式，知道它的层次关系，可以在CSS文件中找到相应的编码。此功能的效果如下图：
5、Add User Style Sheet
增加用户样式。我们可以对当前页面的样式设置自己浏览时的样式，网站的当前页面能够按自己编写的样式来显示。我们在学习他人的作品时，可以进行举一反三的改进，或进行其它的优化。我们在设计自己的页面时，这也可以使我们对文件进行临时修改，立即查看效果。进行细节的微调与设计。
6、Edit CSS
编辑CSS。这是Web Developer 插件最大的亮点之一，是我们最常用到的功能。点击这个命令，FF左侧打开一个编辑窗口，将已有的CSS样式已经放置其中了，假如有N个CSS文件组成，会列出标签式的选项卡，我们可以随意的切换。显示出的CSS编辑，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的样式实时显示出来。假如我们改变了h1的样式，则在右侧的网页窗口中立即可以看到编辑后的效果！如下图：

Web Developer插件的这个功能，我不用多说，大家也可以明白它可以干什么了。我们可以在开发网站时，在查看效果的同时，可以用此功能直接打开CSS文件进行编辑，并随时把握修改后的成效，修改满足了，点击窗口上方的保存按钮，可以将当面样式表保存到指定的位置。真正实现了便捷的辅助设计与开发。我们学习别人的作品，可以用它来查看网页上的CSS文件，查看别人的编码，试着修改别人的编码并可以立即查看到变化后的效果，思考别人为什么这样写，为什么这样进行设置，有什么道理。以此来学习，我们可以更方便的学习优秀网站的CSS技术应用。
7、Use Border Box Model
使用边框式盒模型，这是一个并不常用的功能，你可以点选此命令查看一下页面的变化。

Web Developer插件的Information工具是一个包罗很多实用功能的地方，有些东西对于我们CSS网页布局设计显得非常有用。Information工具提供的功能非常多，我们仅挑一些CSS网页布局设计中常用的功能加以介绍。该工具菜单如下图：

1、Display Blocks Size
显示块元素对象的尺寸。该功能将页面中所有div描边为红色进行区域划分，同时显示出该div区域的尺寸。如下图：


2、Display Div Order
显示网页中div在xhtml代码中的顺序与编号。用红色的线框进行区域划分，并显示div编号。如下图：
3、Display Element Information
显示元素信息。非常实用的功能之一，点选该命令，会在网页中显示一个浮动的窗口，鼠标移动到不同的网页对象上时，会用红线框标识当前对象，并且显示该对象的一些信息：名称、样式、title、target、href等等。该功能会折叠显示一些信息，如定位等。如下图：
4、Display ID & Class Details 显示ID和Class的细节。点选该功能，将对页面中的对象标出其ID和Class的名称。如下图：
5、Display Link Details
显示链接的信息。此功能将在页面中标注出链接的URL。
6、Display Stack Levels
显示层级关系。若页面中使用了z-index属性的定位，将显示对象的z-index属性值。
7、Display Table Information　显示表格信息。与上面的一些功能相似，标注显示出表格的具体信息。シㄙ
其它的信息大家自己试一下就能明白它的作用，我们这里就不具体的深入了，需要提示你注重View Color Information查看色彩信息，会将页面中应用的色彩用方块以一个新的标签页显示出来，对于页面美工的色彩设计有非常大的作用。

Miscellaneous工具包含了很多有意思的功能，我们只讲三个与CSS网页布局开发有关系的功能。如下图：



1、Display Line Guides
辅助线功能，我们在Photoshop或Fireworks等图象处理软件中，提供了额外的辅助线功能，方便图片文件在处理过程中的对齐等。在Web Developer插件所提供的这个功能，达到了同样的效果。我们点选该命令就可以看到辅助线了，如下图：
我们发现当鼠标移到辅助线的时候，还会提供一些额外的信息，如当前的绝对位置是多少，距离上一条、下一条辅助线的距离。我们可以通过面板中的Add Horizontal Line Guide增加一条水平辅助线；Add Vertical Line Guide可以增加一条垂直辅助线。通过Color改变辅助线的颜色。是不是非常方便？快试试吧！吼吼。
2、Display Ruler
标尺或测量工具。点选这个命令，可以在页面中的任何位置画一个矩形，会有一个TIP提示相关的信息，坐标、长与宽等。在移动鼠标的时候，这个TIP也会提示相应的值，如下图：

3、Edit HTML 编辑HTML工具。大家一定还记得CSS工具菜单下的Edit CSS工具，这个功能与之类似，不同的是编辑的是xhtml代码。点击这个命令，FF左侧打开一个编辑窗口，将网页源文件xhtml代码放置其中了，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的代码实时显示出来。够爽吧，前面的编辑了CSS，这个实时调整一下XHTML，并且能实时查看效果。如下图：
有了这个功能，我们可以真正的实现了在这个环境中进行开发，而且学习别人的作品时，也能兼顾xhtml编码的学习。方便实用！

Outline线框工具


提供将元素使用线框标识出来的功能。我们可以辅助查看各细部的元件。如下图：
我们列举一此常用的功能如下：


1、Outline Frames　线框显示出框架，假如使用了框架技术，可以用线条标注出来。


2、Outline Headings
标注标题元素，假如页面中使用了h1～h6对象，会用线条标注出来。


3、Outline Table Cells
标注单元格，假如页面是用传统的表格进行布局，往往表格线是不可见的，表格只是布局的需要，根本没有边框线，使用这个命令可以将它们都用线框标识出来。


4、Outline Tables　类似于上面一个命令，区别在于上面的是显示单元格，而这个命令只显示表格。如上面的显示的是tr、td。这个命令只显示table。


5、Outline BLock Level Elements
标注出对象的嵌套级别。
6、Outline Deprecated Elements　标注出网页中存在的不合法的对象。合法与否根据网页的文档对象模型doctype来判定。

7、Outline Positioned Elements
标注出定位对象，可以单独的标注出来四种定位方式：Absolute、Fixed、Float、Relative。

8、Outline External Links　标注出外部链接，请注重是指链接向站外的链接，外部链接。
9、Outline Links Without Title Attributes　标识出所有的显示，并且不显示title属性的值。


10、Outline Current Elementぴゲヾㄌだくづセォォゲヾㄌㄙ标识鼠标位置的当前对象。


11、Outline Custom Elements 自定义标注，点选该命令会打开对象框，要求设置标注哪些对象，如键入“h1”，并设置相应的颜色。如下图：



12、Show Element Names When Outlining　点选该命令会在标注的同时，显示对象的名称。




Resize尺寸工具
这是一个小巧而实用的工具，我们可以利用它来改变窗口的大小，我们在开发CSS网页布局时，屏幕尺寸或许很大，但要兼顾到小尺寸的访客的需求，我们可以用此工具来预览小尺寸显示的效果。如下图：



1、Display Window Size
显示当前窗口的大小，点选该命令会直接弹出一个对话框显示信息。


2、Display Window Size In Title
将窗口的大小放置于标题栏，这是一个非常方便的功能，我们可以自由的拖动缩放窗口的大小，在标题栏立即就能知道当前的窗口是多大。如下图：



3、Resize Window
可以键入数值修改窗口的大小。
4、800*600
在网页设计制作中，最需要关注的就是800*600大小的窗口中显示的情况，Web Developer插件预设了这个尺寸。直接点选即可。



至此，我们的教程基本结束了。相信你对Web Developer插件强大的功能已经有足够的了解，至少在CSS网页布局开发中，应该如何发挥它的功能你已经非常清楚了。但还需要提醒你注重，我们所开发的网站，并非全部在FF浏览器中运行，我们需要考虑更多的兼容因素，当前的网络浏览器还是以IE为主流。我们需要明白，我们要借助于的是Web Developer插件强大的功能，但它并不是万能的，我们的开发还需要进入IE中进行调试与预览。我们可以用它来帮助我们开发与找出问题，帮助我们学习他人的成功作品。非常欢迎大家光临我的小站www.52css.com这里有一些教程或许可以助你一臂之力，我们也提供了一些CSS模板大家可以下载学习，我们也列出一些CSS优秀站点，大家可以多看大师的作品！祝愿大家尽快的把握CSS技术，为WEB标准在中国的普及作出自己的贡献！

这么好的FF插件没人用？
这个插件非常适合偷CSS设计自己用！！！

工具 非常好！！

太强了，好插件