Web Developer 是设计师经常用来调试CSS的一个 Firefox 插件；下面写出他的中英对照，方便使用……
CSS — 可编辑当前页面的CSS，并可即时显示修改效果。
Forms — Get/Post转换，显示所有表单信息。
Images — 显示图片的各种属性，可找出未设置Alt,Title等属性的图片。
Information — 最有用的两个功能：查看Cookie信息和Http Response数据，Web调试必备
Micellaneous — 最有用的功能：Clear Session Cookie。 已往调试Web，为了新开一个Session，不得不关闭IE，重新再开，现在不用啦。
Outline — 框出Table元素，Cell元素,Div元素
Resize — 模拟800*600等窗口大小，可自定义窗口大小
Tools — 验证CSS/HTML 等
View Source — 显示带关键字颜色的漂亮源代码
这篇文章主要一步一步教你如何使用 Firefox Web Developer Toolbar，高手请飘过，适合新手，这是一篇入门级教程，不足之处请多包涵！
The Web Developer extension 增加了一个菜单和工具栏到各种Web浏览器。the Firefox Web Developer Toolbar 是最有用的网页设计工具之一。这篇简短的介绍将告诉你一些可以使用方法，当你制作网站时。要使用工具栏你必须要使用免费的Mozilla Firefox浏览器。在您的Firefox浏览器，您可以下载Firefox扩展名为Web Developer Toolbar 的工具。
Web Developer Toolbar 概述当您安装Web Developer Toolbar，你必须关闭所有的Firefox浏览器窗口并重新启动Firefox浏览器。然后，您会看到Web开发工具栏在Firefox下导航按钮。工具栏的一部分，上面写着“Disable”，“Cookies”，“CSS”，“Forms”，“Images”等等。这篇博文描述的是使用Web Developer Toolbar的1.1.8版本，即使你使用的是不同的版本，但它应该是相似的。在截图我用的Firefox默认主题，Firefox版本是Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10。如果你的版本不同，不用担心，其功能是相同的。
使用 Web Developer Toolbar在您安装Web开发工具栏完成后，您会看到对面的浏览器上方的菜单项从左至右：
Disable（禁用）:
这些菜单项可以让您禁用功能在网页上，如缓存，Java，JavaScript，HTML重定向，页面颜色，反向链接，代理甚至更多。在这两个菜单项是特别有用的是禁用从哪里来，它给你增加关于网络隐私权，并禁用缓存，它是有用的当您正在更新网页时，并需要确保您正在查看的是最新的，当你在浏览器中观看它时。
Cookies:Cookies菜单让你选择是非常有用的，当你在编程网站使用Cookie时。例如禁用所有cookie，禁止外部网站的Cookie，会话cookie清除，删除域的Cookie，删除路径的Cookie，查看cookie信息，并添加cookie。
CSS（样式表）:
此菜单包含了我最喜欢的Web开发工具栏功能：编辑CSS。当你激活这个功能，您可以编辑一个网页中的CSS实时栏，看看当你键入更新，这些网页上就会看到的您的变更。例如，也许你想看什么不同的网站颜色和字体就看你的网站一样。在下面的图片，我迅速检查了这个页面看起来就像一个绿色头背景只需在补充工具栏的CSS编辑。只要关闭边栏，更改将被丢弃。
CSS菜单中的另一项有用的功能是禁用方式，允许你删除所有从网页上的CSS。
Forms（表单）:
一个在此菜单上有用的东西是表单信息选项。它会告诉你在网页上的表格信息。您还可以使用填充窗体域选项来自动填写表单时，测试您的网站。在Form菜单上的其他选项包括：显示详细信息，显示密码，查看表中的信息，转换表单的方法（例如从的GETs到POSTs或反之亦然），转换选定元素为文本输入，启用自动完成，启用表单字段，清除单选按钮，要使表单域可写，填充表单域和删除最大长度。
Images（图片）:
您可以使用这些选项来显示文件尺寸和网页上的图像的大小。您可以隐藏页面上的图像，或显示图像的路径。你可能没有ALT属性的图像轮廓，使其成为一个快速的方法找到你可能错过了什么。
Information（信息）:
Information菜单上有很多选项。你可以找到更多有关您的使用显示ID和类的详细信息，并显示元素信息页面的结构信息。这些都是有用的，因为他们直观地显示在网页上，然后可以更容易地使用编辑与该网页外观的CSS选择实验的CSS类和ID名称。一个显示ID和类详细的图像如下。您也可以使用信息菜单，检查有多少层嵌套表的页面与显示埋深功能了。您可以通过选择View颜色信息的一个网页调色板。如果你想知道如何在网页上大量的文件中，选择查看文件的大小。另一种有用的工具是查看响应头。
Miscellaneous（杂项）:
杂项菜单上的其他一些有用的选项就是Small Screen Rendering小屏幕渲染，可以给你一个如何显示您的网站，可能像PDA或手机便携设备的想法。您也可以在网页上叠加线指南，或显示一个标尺，以获得的布局和完美的测量。你甚至可以编辑工具条中的HTML和观看网页实时更新自己。
Outline（轮廓）:
这些选项将列出一个网页的内容，让你发现你可能会寻找某些东西。例如你可以概述框架，标题，表格单元格，表，块级元素，外部链接，甚至自定义元素。这些都是你非常弄清楚的为什么网页无法正确显示。
Resize（可变大小）:
看看你的网页在不同的分辨率下的情况，如800 * 600的分辨率，或选择自定义大小。您还可以放大或缩小网页。
Tools（工具）:
工具菜单有选项来验证你的HTML，Feed，CSS和链接。您还可以得到一个快速报告，打开DOM查看器，Java控制台和JavaScript控制台。
View Source（查看源代码）:
这给了你另一种方式来查看网页的源代码，但是它更快的是只使用键盘快捷键Ctrl-u。此菜单真正的强大是其被被激活后，进入选项菜单。您可以设定Firefox以查看外部编辑器的源，包括设置一个自定义键盘快捷方式。例如，你可以保持正常的快捷方式来查看CTRL – U的来源，并添加另一个快捷方式SciTE查看（或其他喜欢的文本编辑器）。
Options（选项）:
这个菜单项允许您自定义的Web开发工具栏。
尾声此文借鉴了Firefox Web Developer Toolbar
The Firefox Web Developer Toolbar is one of
一旦你已经下载的Web开发工具栏，你会认为这是你的网页设计工具的重要组成部分。如果你制作网站，我强烈建议下载这个工具栏，然后试用它。
我非常想知道你们是如何使用这个工具到你项目中的，通过评论发送你使用以后的心得，谢谢观看，明天我们将继续研究更多高级的东西。
附加工具Komodo Edit：
免费的，功能丰富的JavaScript，Perl，PHP，Python，Ruby和TCL，在Linux，Mac OS X和Windows的编辑器。
通过以下下载Komodo编辑器：
Download Komodo Edit 6.0.0 for Windows (x86)
IE Tester：
IETester是一个免费的web浏览器，让您有IE9的预览渲染效果和JavaScript引擎，IE8，IE7，IE 6 and IE5.5在Windows 7，Vista和XP。以及安装在同一进程中的IE。
Download IETester v0.4.5 (27MB)BrowserShots.org：
如果你工作在Mac（或需要在更大的各种测试浏览器），第二个选择是使用名为Browsershots的一网站，它会把你的浏览器中的所有设计快照反馈给你。它支持的浏览器无奇不有。
访问Browsershots
最新评论