建立符合WEB标准的网站，应用XHTML与CSS来构建网站，我们往往处在开发与调试两个重要的环节，对于DIV+CSS的XHTML开发环境，页面的调试更加的重要。我们完全手写代码，需要不断的预览所形成的页面效果。而DIV+CSS这一形式是刚刚兴起的一种新技术，目前还不是非常的普及，我们需要不断的学习，浏览他人的成功作品从中汲取制作经验显得非常重要，也是我们学习的一种捷径。

现在我们介绍一种网页调试的辅助工具：Web Developer！ 它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。

Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：

对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。

Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。

Web Developer作为FF的插件存在，这一点我们在上面已经提及，在安装好FF时，我们必须单独的下载安装Web Developer插件。如果你还没有Web Developer插件，我们在页面最顶部给出了Web Developer插件的下载链接。关于FF安装我们就不多费口舌了，一路确定即可，我们下面详细的说明Web Developer插件的安装步骤。

首先我们运行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插件，最终的效果是：

下面的内容里，我们将学习如何使用它！

资料来源 http://www.114study.com/?ybtg=wuhuaitang

评论