Web Developer教程
作者：佚名来源：52css发布时间：2011年09月18日点击数：1165
现在我们介绍一种网页调试的辅助工具：Web Developer！它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。
Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：
对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。
Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。
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的窗口效果。关于此工具，我们后面将作更加深入细致的介绍。
T ools工具对于我们CSS网页布局设计，它的最大功能在于将CSS及XHTML校验工具整合在一起，可以点击此工具中的校验选项对当前页面进行检验，它会自动链接到相关校验页面，并返回校验结果。如下图：
View Source查看源代码用于查看页面的源文件。
Options选项用于Web Developer 插件的参数设置。如下图：
W eb Developer CSS工具
Web Developer 插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，我们不将它完全的展开探讨，我们仅针对CSS网页布局开发调试对它进行了解，有兴趣的朋友可以详细的研究一下它的强大功能。
CSS工具是我们需要了解的重点，它提供了许多功能来辅助我们查看网页，废话少说，我们往下深入，看图片先：
web浏览器在哪里打开
1、Disable Style 禁用样式可以用来禁用当前页面的某些或全部样式的显示。
·All Style 禁用所有样式，页面中将没有任何样式效果。
·Browser Default Styles应用浏览器默认样式，意义不大的功能。
·Embedded Styles禁用放置在页面中的内部样式表，其它无影响。
·Inline Styles 禁用行间样式表，即使用形式的将不显示。
·Linked Style Sheets禁用以link标签链接外部样式表。
·Print Sytles禁用打印样式表
·Individual Style Sheet单独设置所链接的外部样式表是否显示。例如：当前页面链接了三个外部样式表，1.css、2.css、3.css我们可以通过此功能将某一个样式表禁用。请你注意这个功能其实是非常有用的，可以帮助我们在调试时到问题是出在哪里，我们禁用某个样式，看引发的问题是不是依然存在。如果禁用了某一个样式，问题消失了，那一样是这个被禁用的样式表文件中的某些设置出现了问题。
2、Display CSS By Media T ype 按媒体的类型显示样式。我曾经介绍过在DreamWeaver中可以按媒体查看方式查看页面效果（www.52css/article.asp?id=301），此功能与此类似。不过目前只支持两种媒体类型：掌上设备、打印。
3、View CSS 用来查看CSS文件代码，点击该命令会打开一个新的FF标签页，显示当前页面的CSS，如果当前页面Link有多个CSS文件，会给出该文件的URL，或者显示出此样式为行间样式或内部样式。如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。