When properly configured, Firefox can become the ultimate web development tool, giving you direct access to the page you are working on so you can style your page in real-time, debug javascript or even edit the html.
正确配置后，Firefox可以成为最终的Web开发工具，使您可以直接访问正在处理的页面，以便可以实时设置页面样式，调试javascript甚至编辑html。
Create Separate Profile for Web Development
为Web开发创建单独的配置文件
Installing all of these development tools will make Firefox into a very heavy browser, so we should first create a new profile for Firefox.
安装所有这些开发工具将使Firefox成为非常强大的浏览器，因此我们首先应该为Firefox创建一个新的配置文件。
You can launch a separate profile at the same time as your regular profile by creating a new shortcut with these arguments, replacing WebDev with the name of your profile. There’s also a more detailed explanation of how to do this.
通过使用这些参数创建新的快捷方式，并用配置文件名称替换WebDev，可以与常规配置文件同时启动单独的配置文件。 有关如何执行此操作的详细说明 。
firefox.exe -P WebDev -no-remote
firefox.exe -P WebDev-无远程
Now that you’ve got Firefox configured with a separate profile just for web development, let’s take a look at the extensions we can use to make Firefox into the ultimate web development tool.
现在，您已经为Firefox配置了仅用于Web开发的单独配置文件，让我们看一下可用于使Firefox成为最终Web开发工具的扩展。
Must-Have Web Dev Extensions
必须具备的Web开发扩展
These are all extensions that I use on a regular basis for web development.
这些都是我经常用于Web开发的扩展。
Firebug is the most powerful extension for debugging javascript, viewing CSS and html. You can make dynamic changes to the code and CSS, and use it to debug your Ajax code. It’s truly the best extension out there.
Firebug是用于调试javascript，查看CSS和html的最强大的扩展。 您可以对代码和CSS进行动态更改，并使用它来调试Ajax代码。 这确实是那里最好的扩展。
One of the best extensions for x years running. This is a must-have for any developer, but you’ve already heard of it.
是x年以来最好的扩展之一。 对于任何开发人员来说，这都是必需的，但是您已经听说过。
This extension is a very lightweight extension that will easily show you the elements on the page and their assigned class/id. It’s simpler to use than the web developer extension for those times when you just need the quick info for an element. You can also use it to remove elements from the page.
此扩展程序是一个非常轻量级的扩展程序，可以轻松地向您显示页面上的元素及其分配的类/ id。 当您只需要元素的快速信息时，它比Web开发人员扩展更易于使用。 您也可以使用它从页面中删除元素。
Select colors easily. No more pain of finding colors embedded somewhere in a stylesheet.
轻松选择颜色。 查找样式表中嵌入的颜色不再麻烦。
You can set up multiple view source profiles to open the source in different applications.
您可以设置多个视图源配置文件以在不同的应用程序中打开源。
This extension lets you easily validate your page HTML and installs into the View Source panel.
此扩展使您可以轻松地验证页面HTML并将其安装到“查看源代码”面板中。
It’s not exactly a web developer extension, but Greasemonkey is awesome, not least for the ability to automate commonly performed actions, which is a great time saver for web developers.
它不完全是Web开发人员的扩展，但是Greasemonkey很棒，尤其是能够自动执行常用操作，这对于Web开发人员来说可以节省大量时间。
Easily measure a distance on the screen with this extension. Once you’ve measured an area, you can drag the rectangle around the screen to use as a comparison.
使用此扩展名可以轻松在屏幕上测量距离。 测量面积后，您可以在屏幕周围拖动矩形以用作比较。
IE View / IE Tab / OperaView / FirefoxView / Safari View / IE View Lite
IE视图 / IE选项卡 / OperaView / FirefoxView / Safari视图 / IE View Lite
These extensions (take your pick) let you easily view the current page in different browsers. IE Tab will even let you run IE inside of a tab, if you were so inclined.
这些扩展(请选择)使您可以在不同的浏览器中轻松查看当前页面。 如果您愿意，IE选项卡甚至可以让您在选项卡中运行IE。
Clears the cache. Especially useful for checking new CSS changes.
清除缓存。 对于检查新CSS更改特别有用。
The Restart Firefox extension is very useful for closing down and restarting Firefox with all tabs and sessions intact.
重新启动Firefox扩展对于关闭并重新启动所有标签页和会话的Firefox非常有用。
The Tab Mix Plus extension is a great extension in general, but has a few essentially useful features for web developers: Duplicate Tab and Copy Tab URL.
通常，Tab Mix Plus扩展是一个很好的扩展，但是对于Web开发人员来说，它具有一些本质上有用的功能：“重复标签”和“复制标签URL”。
The YSlow extension is a new extension from Yahoo that will analyze your page and tell you where you are making mistakes. It’ll even give you a grade on your site performance. You’ll notice the little gauge in the lower right-hand corner… it tells you the total size of your page as well as the load time. Very useful extension, but it does require the Firebug extension.
YSlow扩展程序是Yahoo的新扩展程序，它将分析您的页面并告诉您您在哪里出错。 它甚至会给您网站的表现打分。 您会注意到右下角的小规子……它告诉您页面的总大小以及加载时间。 扩展非常有用，但确实需要Firebug扩展。
The Dummy Lipsum generator extension will generate dummy content for you based on the famous Lorem Ipsum text that is very useful for laying out fake content in your site.
Dummy Lipsum生成器扩展程序将根据著名的Lorem Ipsum文本为您生成虚拟内容，这对于在您的网站中布置假内容非常有用。
The Screengrab extension will let you take screenshots of pages, but can do something a regular screenshot tool can’t – it can take an image of the entire page, not just the viewable portion.
Screengrab扩展程序可以让您截取页面的屏幕截图，但可以执行常规的截屏工具无法执行的操作-它可以截取整个页面的图像，而不仅仅是可视部分。
There are tons of other extensions that you can use, but these are the best of the best from all that I’ve seen. If you have another extension that you use regularly, leave a mention in the comments.
您可以使用大量其他扩展，但是这些扩展是我所见过的最好的。 如果您有其他经常使用的扩展名，请在评论中提及。
At this point, you’ve now turned Firefox into the ultimate web development tool. Take the time to learn how to use Firebug especially.
至此，您已经将Firefox变成了最终的Web开发工具。 花时间学习如何特别使用Firebug。
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
