无论你是前端图形设计师还是后端web程序员，如果你在创建基于web的解决方案领域工作了足够长的时间，你无疑听说过Mozilla Firefox web浏览器的扩展名为(简单地说)theWeb开发人员扩展．如果你不知道我在说什么，下面是webtips的一个简要概述，可以让你熟悉这个奇妙的工具。本文列出了Web Developer扩展的一些实际的日常用法，以帮助改进您的Web构建方法。
我试图避开Web Developer扩展的更常见和基本的用途，比如用>显示分区顺序选项，因为我觉得这些在其他地方已经讨论得够多了。新用户，不要离开，我认为这篇指南将帮助您快速开始将该工具应用到您的日常开发例行公事中。废话不多说，下面是Firefox Web Developer扩展的九种高度实用的用法。
1)改变XHTML动态不改变你的网络文件。
不幸的是，对于许多开发人员来说，我们并没有足够的时间测试服务器和沙盒环境。我承认自己是在在线网站上开发的甚至在网络流量高峰期。
如果你想减少客户的支持请求由于一个疏忽显示:没有;属性赋值—在将XHTML修改提交到服务器之前，使用Web Developer扩展毫不费力地检查它们。这里有一个(极端的)例子，关于我如何能够改变一些reddit的XHTML标记。
最初的头版:
这是修改后的版本:
正如你在上图中所看到的，我改变了前三个故事(我经常读到的)，并将背景颜色修改为粉色(我有一个奇怪的出于某种原因，人们喜欢粉色)。方法可以达到相同的效果杂项>编辑HTML标记选项，它将打开编辑HTML选项卡面板，显示网页的XHTML。不幸的是，该窗口没有进行颜色编码，Search HTML函数还不能正常工作(目前)。
提示:的方法可以更改Edit HTML面板的位置位置图标(就在上面截图的Edit HTML选项卡旁边)。要更改页面的CSS样式，请使用CSS >编辑“CSS”选项，该选项将允许您编辑web页面上使用的样式。
2)快速测量统治者工具。
如果你曾经打印过屏幕，然后将截图复制粘贴到Photoshop中，用选择工具确定特定页面对象的尺寸(比如图像的宽度)，请举手。*羞愧地举手*与统治者的工具(使它通过>显示标尺工具)，你可以在浏览器内快速调整对象的大小。
它是一个很好的工具，与大纲选项，如>显示分区顺序选择或>显示块大小选项，允许您检测元素之间的填充和空白的数量。
3)看看网页在非传统网页浏览器上的效果。
如今，许多人都有移动设备，可以以非传统的方式浏览网页。方法确定页面是否在便携设备屏幕上正确呈现(或足够接近)杂项>小屏幕渲染选择。
这样你就不用为了跨浏览器检查而去买黑莓或三联手机了。
Gamespot网站在普通浏览器上的表现:
它在小屏幕渲染设备上的样子……
4)了解你的页面优化程度。
使用Tools >查看速度报告选项自动发送您的页面到WebSiteOptimization.com这个网站提供了大量关于你的网页加载时间的信息，比如你的网页加载有多快，有多少HTTP连接正在被使用等等。Adobe Dreamweaver和Flash(如果你能访问它们的话)中有一些内置的工具可以模拟下载速度，但是没有什么能比得上免费的，全面的而且实际生活速度报告。
5)立即填充web表单字段。
当你不得不填写定制的网页表格时，你不讨厌吗n因为你在测试它?可以停止选项卡和在表单字段中输入垃圾信息，并切换到使用填充表单字段选项中的Web Developer扩展。
在下面的例子中，你可以看到它填充了大多数web表单有些它能够猜出电子邮件字段，但错过了电话号码字段。
6)找到所有影响一个元素的CSS样式。
对于大多数相当熟练的CSS开发人员来说，找到元素属性样式的确切选择器是相当容易的-参考:#选择器｛财产:价值;｝．当您是原始作者并且/或样式包含在一个样式表中时，这一点尤其正确。
但是，如果你在为别人的项目工作……而这个项目有1000多行纯CSS代码，被分割成几个外部样式表(因为Bob a.k.a。”先生。
模块化“喜欢保留东西“简单”)?您可能遇到的另一种情况是，您被要求对Drupal或WordPress等内容管理系统进行主题化，但不太确定所有外部样式表都在哪里。例如，雅虎!
主页有超过2400行CSS，分布在几个外部样式表和内联样式中(Bob，您构建了这个页面，不是吗?)如果你的任务是修改这个页面，你有两个选择:(1)浏览、理解并寻找你需要的样式;(2)决定你更聪明(和懒惰)，所以你用CSS >查看样式信息选项的Web Developer扩展。启用此选项后，单击页面元素将打开Style Information面板，其中显示影响该元素的所有样式。
7)查看JavaScript和CSS源代码在瞬间。
我解决渲染问题的方法之一是观察其他网页是如何处理的。JavaScript和CSS通常被分成几个文件——谁想查看所有的文件呢?
使用信息>查看JavaScript和CSS >查看CSS视图选项立即显示所有的JavaScript和CSS在一个新的浏览器选项卡。这有一个附带的好处，即能够在一个网页中聚合所有的CSS样式或JavaScript，允许您使用找到Firefox浏览器的工具(键盘快捷键:ctrl + fPC用户)。
8)看看网页是如何分层的。
确定哪个页面div和对象在更高的平面上通常非常有用。使用信息>查看地形信息为您提供页面元素深度的可视化表示—较深的灰色比较浅的灰色低。
原始网页设计……
使用地形信息选项将页面呈现成这样:
9)看看你的网页在不同的屏幕尺寸下看起来是否正常。
我使用的显示器尺寸在19 - 22英寸(宽屏)之间。这可能会有问题，因为我们的许多访问者使用较小的显示器。
我没有切换到较小的LCD屏幕来模拟用户体验，我只是使用调整大小窗口选择。它有助于测试我的流动布局是否在较小的窗口中工作良好(有时你忘记为div元素设置最小宽度，这会在较小的屏幕尺寸中提高布局)，或者您的固定宽度布局是否显示重要内容没有用户需要滚动。请确保启用调整标题中>显示窗口的大小选项，以帮助您确定准确的尺寸，也用于文档的目的，当您的网页截图。
以上就是九种方法，你可以使用Mozilla Firefox Web Developer扩展来改善你的Web开发体验。我并不是说自己是专家，但我确实对Web Developer扩展有足够的了解，可以提高我的网络构建速度。关于如何进一步利用Web Developer扩展，您还有其他的提示和策略吗?
您在工作中使用Web Developer扩展的方式是什么?在这里分享。
