如果配置得当，Firefox可以成为最终的web开发工具，让您可以直接访问正在处理的页面，从而可以实时设置页面样式、调试javascript甚至编辑html。

为Web开发创建单独的配置文件

安装所有这些开发工具将使Firefox成为一个非常沉重的浏览器，所以我们应该首先为Firefox创建一个新的配置文件。

您可以使用这些参数创建一个新的快捷方式，将WebDev替换为您的配置文件名，从而在启动常规配置文件的同时启动一个单独的配置文件。还有一个更详细的解释如何做到这一点。

firefox.exe -P WebDev -no-remote

现在，您已经为Firefox配置了一个单独的配置文件，只用于web开发，让我们来看看我们可以用来使Firefox成为最终web开发工具的扩展。

必须具有Web开发扩展

这些都是我在web开发中经常使用的扩展。

萤火虫

Firebug是调试javascript、查看CSS和html的最强大的扩展。您可以对代码和CSS进行动态更改，并使用它来调试Ajax代码。这确实是最好的延伸。

Web开发人员扩展

连续x年的最佳延长期之一。这是任何开发人员必须具备的，但您已经听说过了。

土豚扩展

这个扩展是一个非常轻量级的扩展，可以很容易地向您显示页面上的元素及其分配的类/id。在您只需要元素的快速信息的时候，它比web开发人员扩展更简单。您还可以使用它从页面中删除元素。

色子拉

轻松选择颜色。再也不用为在样式表中找到嵌入的颜色而烦恼了。

查看源代码

您可以设置多个视图源配置文件以在不同的应用程序中打开源文件。

HTML验证程序

这个扩展让您可以轻松地验证页面HTML并将其安装到“查看源代码”面板中。

油腻的

它并不完全是一个web开发人员扩展，但是Greasemonkey非常棒，尤其是它能够自动执行通常执行的操作，这对于web开发人员来说是一个很好的时间节约。

测量一下

使用此扩展可以轻松地在屏幕上测量距离。一旦你测量了一个区域，你就可以在屏幕上拖动这个矩形作为比较。

IE视图/IE选项卡/OperaView/FirefoxView/Safari视图/IE视图Lite

这些扩展让您可以在不同的浏览器中轻松地查看当前页面。如果你愿意的话，IE标签甚至可以让你在标签里面运行IE。

清除缓存按钮

清除缓存。特别适用于检查新的CSS更改。

重新启动Firefox

重新启动Firefox扩展对于关闭和重新启动Firefox非常有用，所有选项卡和会话都完好无损。

标签管理

Tab Mix Plus扩展通常是一个很好的扩展，但是对于web开发人员来说有一些基本上有用的特性：复制Tab和复制taburl。

伊斯洛

YSlow扩展是来自Yahoo的一个新扩展，它将分析你的页面并告诉你哪里出错。它甚至会给你的网站性能评分。您会注意到右下角的小仪表…它告诉您页面的总大小以及加载时间。非常有用的扩展，但它确实需要Firebug扩展。

假同侧眼底

虚拟Lipsum生成器扩展将基于著名的Lorem Ipsum文本为您生成虚拟内容，该文本对于在站点中布局虚假内容非常有用。

截屏！

Screengrab扩展可以让你对页面进行截图，但是可以做一些常规截图工具做不到的事情——它可以拍摄整个页面的图像，而不仅仅是可查看的部分。

有很多其他的扩展，你可以使用，但这些是最好的最好的，从所有我见过的。如果你有另一个你经常使用的扩展，请在评论中提及。

至此，您已经将Firefox变成了最终的web开发工具。花点时间学习如何使用Firebug。