Chris Pederick的Web开发扩展Mozilla Firefox浏览器是web开发人员的最佳工具之一。大约几个月前，我写了一篇文章，题为9个实用的方法来增强您的Web开发使用Firefox Web开发扩展，我想通过展示你可以用Firefox Web Developer扩展做更多的事情．
1.确定网站服务器信息。
有没有想过你最喜欢的网站使用什么服务器技术?如有，你可使用“>查看响应头信息”。
下面的例子显示了Digg的响应头:
在上面的例子中，我们可以看到Digg使用了一个Apache服务器和PHP 5．此外，(至少对于我测试的页面)它们提供压缩文件(gzip)。转到微软的主页，我们可以看到他们-反过来-使用IIS 7.0服务器和ASP。网框架:
2.使用“放大镜”放大网页的各个部分。
您可以使用“其他>显示页面放大镜选项，以获得一个窗口，允许您放大和缩小网页的所需区域。
提示:作为快捷方式，您可以使用鼠标滚动按钮放大:增加或减少放大程度
这是《人物》杂志上的一个例子页面放大镜工具。
3.查看一个网站的调色板。
如果您曾想查看网站使用的所有颜色的视觉表示(不包括图像)，您可以使用“>查看颜色信息选项，这将打开一个新的选项卡显示颜色信息．
以下是Mozilla.org的配色方案:
4.预览网站的“打印”和“移动”版本。
一些网站选择包含打印版本或移动版本的内容，提供一个替代样式表，如下所示:媒体= "打印"/>．如果您想预览网站在打印或使用移动设备浏览时的外观，请使用“按媒体类型>打印显示CSS或"CSS >按媒体类型显示CSS >手持选项中的“Firefox Web Developer”工具栏。
下面的示例显示了A List Apart的普通样式表和打印样式表。
普通样式表:
打印样式表:
打印样式表取出logo和主导航。
5.查看所有图像的尺寸。
您可以通过使用Firefox web Developer扩展的“显示图像尺寸”选项。你可以在下面看到这个选项(使用GameSpot的主页)。
从上图中，我们可以得到以像素为单位的图像的尺寸(我们还可以看到他们在用a1×1 px间隔器,有趣的）.
6.查看块元素的大小。
调试与间距有关的布局问题的快速方法是使用“>显示块大小选项的Web开发扩展，看看是否有什么东西添加了意想不到的填充和空白到你的块元素。块元素包括div的年代,形式S和元素显示:块属性。
这里有一个为雅虎打开的选项的例子!的主页。
7.看看你的页面在没有CSS的情况下是否能很好地退化，并做一个简单的可访问性测试。
一个关键的设计特征，一个网站必须有，这样它可以被大多数人浏览是它必须看起来体面和可读性关闭CSS。您可以使用“CSS >禁用样式>所有样式”选项。
这也允许您(在某种程度上——但不应该取代真正的可访问性测试)，看看你的网站是否可透过辅助科技进入(你可以看到文件的流程，以及你是否显示重要的资讯)。对于一个非常粗糙而且快速可访问性测试时，您还应该关闭所有图像，并使用用Alt属性替换图像选择。
这是正常的StumbleUpon主页。
这里是没有任何样式的:
您可以看到，该标志是一个图像替换，因此屏幕阅读器仍然可以使用该标志作为“home”链接并读取站点名称。我们还可以看到，标记符合当前的网络标准，将主要导航放在一个列表中，页面标题“欢迎来到StumbleUpon”包含在一个标题中< h # >标签。
8.快速查找页面上的CSS错误。
Web Developer扩展在工具栏的最右边指示页面是否有CSS错误，如下所示。
通过单击该按钮，将错误控制台弹出窗口，列出页面的所有错误。
如果没有任何错误，您将看到
按钮，而不是
按钮。
9.永远不要忘记把alt和标题属性在你的图像和链接。
我喜欢在我的文章中加入大量的图片，因为它打破了我冗长的写作风格的单调。然而，这确实会导致我忘记(或忽略)alt而且标题属性。
我使用的一个快速检查方法是使用显示图像属性选项和>显示标题属性选择。这是flickr的一个截图，展示了显示图像属性选择。
这就是我最喜欢的Firefox Web Developer选项。
如果您从未使用过它，可以从Mozilla的下载中试用一下Web开发人员Firefox插件页面。你最喜欢的选择是什么?请在本页评论区告诉我们。
