Web Developer插件(web开发者工具) v0.4.6 简体中文版

软件介绍

web developer是一款可以在谷歌浏览器上使用的Web开发者工具，这款插件拥有多种强大的功能，我们不仅可以使用web developer插件来对CSS网页布局进行开发和调试，同时还能够用来清理浏览器上的Cookie缓存，功能非常强大。

web developer软件简介

web developer google是一款可以安装在您的谷歌浏览器上的chrome web developer轻量级开发插件,安装使用web developer插件可以让您的开发变得更加顺畅,马上下载web developer吧。

Web Developer 这款扩展集成了各种各样的 Web 开发工具，几乎是网页开发人员必备的 Chrome 开发者工具扩展插件，安装之后会在浏览器工具栏添加一个齿轮状的小图标，点击小图标之后就可以看到大量的 Web 开发工具。

web developer软件功能

禁用工具

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

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

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

表单工具

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

图像工具

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

信息工具

Information信息工具 此工具在我们的CSS网页布局设计中也经常用到，我们可以用它来查看页面中所有的id、class及table等元素的名称、占位等信息，关于此工具的详细介绍：Web Developer插件 Information工具教程

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

线框工具

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

尺寸工具

Resize尺寸工具 我们可以用它来改变浏览器窗口的尺寸，如果我们使用了1600*1200的分辨率，我们可以借助此工具来模拟1027*768的窗口效果。

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

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

软件特色

1、相信在 Chrome 面世之前很多网页开发者都用过 FireFox上的 Web Developer 附加组件，功能非常强大。现在，Chrome 版本的 Web Developer 也正式推出了，而且开发者和 Web Developer For FireFox 是同一个人—— Chris Pederick。添加一个工具栏按钮与各种Web开发工具。网络开发者扩展的官方端口。

2、Web开发人员扩展插件在浏览器上添加了一个工具栏按钮，使用不同的Web开发工具。这是官方端口的Web开发扩展的浏览器。

3、Web Developer 插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，例如：调试CSS、清理Cookie、对表单图片等对象进行操作等等

使用说明

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。

用户只需要通过上面介绍的五个步骤就可以轻松地把离线谷歌浏览器插件安装到Chrome中去，希望这个离线Chrome插件的安装方法能够帮助到您。

web developer操作方法

像Robot一样浏览网页：通过设置禁用 JavaScript 与 Cookies，这样一来你在浏览网页时看到的页面就像搜索引擎蜘蛛所看到的那样（多数情况下不支持Cookies，不执行JavaScript）。这个小小的变化可以迅速帮你识别网站的结构问题，比如主导航条的显示是利用 JavaScript 实现，或访问者不能使用 Cookies 时则总是重定向至首页。（不是危言耸听，这两种情况皆为亲眼所见！）

模拟蜘蛛查看网页：为了尽量还原出模拟出核心蜘蛛工作的效果，可以使用 Web Developer 工具栏屏蔽网页的样式与图片。这时你则会惊讶的发现：之前隐藏的文本已然无所遁形，看似“头等”的标题实际上只是一个H4元素以及内容的饱和度达到 75% 也许就表明了某个页面出问题的原因。虽然不同搜索引擎的蜘蛛对待meta重定向的方式不同，但你通过“禁用→禁用 Meta 重定向”往往可以更容易的诊断出一些实际问题。

查看网页的结构：至于网页结构，你可以点击“网页信息→查看文件大纲”来查看一个页面的结构，或者更加简化的使用“标示→标题”功能来查看页面中标题元素的等级。

验证与最佳实践：该工具栏还提供了十分便捷的代码规范验证通道（类似W3C 的HTML，CSS与RSS验证），同样可以对未设置“tittle”属性的链接或未设置“alt”属性的图片元素进行高亮显示。

对调研和测试有帮助的功能：对于我们这些长期使用大号屏幕的人来说，或许没办法总是很清楚的了解人们如何浏览我们的网页。然而只需轻点“”（向下还原）按钮就可以让你看到从老式显示器或上网本浏览该页的情况。

上图中的“Love Film com”应该明白：大约有20%的浏览者看不到他们的“免费试用”的大号绿色按钮。

网页截图更方便：长久以来我们不停的努力去要求自己要做到一件事——“要在客户报告中提升具有说明意义的图片的比重”。但接踵而至的麻烦是，在你不停创建一个又一个网页截图时，却无法避免那些点击过变了色的链接，很难看。通过Web Developer工具栏只需要点击“其他功能→已访问链接→标记所有连接为未访问”即可！

轻松匿名：很多时候你或许不想让他人知道，你是在探测他的站点。现在你可以通过Web Developer简单的隐蔽自己的行踪。点击“禁用→禁用引用页（Referrer）”就可以实现该功能。