How-To Geek
Create the Ultimate Firefox Web Development Profile
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.
Create Separate Profile for Web Development
Installing all of these development tools will make Firefox into a very heavy browser, so we should first create a new profile for 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.
firefox.exe -P WebDev -no-remote
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.
Must-Have Web Dev Extensions
These are all extensions that I use on a regular basis for web development.
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.
One of the best extensions for x years running. This is a must-have for any developer, but you’ve already heard of it.
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.
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.
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.
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
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.
Clears the cache. Especially useful for checking new CSS changes.
The Restart Firefox extension is very useful for closing down and restarting Firefox with all tabs and sessions intact.
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.
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.
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.
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.
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.
Got Feedback? Join the discussion at discuss.howtogeek.com
Comments (31)
Programmer by day, geek by night, The Geek, also known as Lowell Heddings, spends all his free time bringing you fresh geekery on a daily basis. You can follow him on Google+ if you'd like.
- Published 08/9/07
One of the most awesome Firefox posts I’ve ever read. Thanks alot!
Great post.. I use pretty much 90% of what you have mentioned especially View Source With.. and here are a couple more!
TamperData, used minimally, will let you see the http traffic. Useful for debugging as it splits and shows you load times as well. Not for everyone but useful.
FireFTP is a great ftp client for Firefox and I use it everyday. The new OneClick Install FF extension is great for WordPress bloggers that makes installing themes and plugins a breeze!
This is a great list of extensions, I’m using several of these, but there are some tasty nuggets I hadn’t seen before and will definitely be trying out. I’m absolutely in love with Firebug and probably use it the most, especially when developing ajax applications. Firefox and it’s awesome plugins are definitely the web developer’s dream come true, sometimes I don’t know how I did my job before.
Great Post! This was definitely a good reference for web developers.
Most of these extensions were reviewed on my site and I would definitely endorse all of these extensions mentioned here.
JD
Great collection!
I have one more suggestion:
JSView it’s very useful to view any particular javascript or stylesheet:
https://addons.mozilla.org/en-US/firefox/addon/2076
Hello,
Good list. I would add URLParams if you’re working a lot with forms (big forms). Combined with ReloadEvery if you want to avoid session timeouts (convert POST->GET first if needed).
And Pearl Crescent Page Saver Basic if you need to do screenshots of full pages.
Additionally: MeasureIt and ClearCache can both be avoided as the features are included with WDT:
- Miscellaneous > Display Ruler
- Miscellaneous > Clear Private Data > Cache
Regards,
JB
Nice list.
Also very useful in development is CookiePie http://www.nektra.com/oss/firefox/extensions/cookiepie/ which allows you to log into a site with two different profiles at the same time – say as a normal user and as an admin – something that is missing from standard ff
instead of the “clear cache button” only I strongly recomment the preferences tool bar http://prefbar.mozdev.org/
Beside using the fabulous Firebug and the MeasureIt/ColorZilla-combo, I do also tend to use the extension “X-Ray” a lot.
“One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser.”
https://addons.mozilla.org/en-US/firefox/addon/1802
I was SO excited to see the IE view extension, but then SO disappointed to find out that it’s only available for Windows. :(
thanks do much for the article. really mind-blowing
I use fireFTP (http://fireftp.mozdev.org/) a lot. As they say on their website: FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. For sites where you cant ssh in, this is a good way to go.
Great list.. I just installed four new extensions.
Thanks for the great site.
Evan said: “I was SO excited to see the IE view extension, but then SO disappointed to find out that it’s only available for Windows”.
You can install IE to run under Wine (go to http://www.tatanka.com.br/ies4linux/page/Main_Page on how to do it) and then install IE view extension to work with IE/Wine.
I use some of these great extensions too but I’d like to mention Session Manager (link).
You can setup sessions (open up all needed “tabs”) for your projects and you can easily switch between them.
While working on a project I usually keep 4-5 tabs open (project tab, project admin tab, database tab, documentation if needed).
You could save yourself a bit of memory and speed by not installing MeasureIt, as there’s already a ruler in the Web Developer Toolbar.
If you do a lot of XML related work then XML Toolbar (https://addons.mozilla.org/en-US/firefox/addon/2897) is indispensable.
Is there any value to the web developer toolbar if you’re running FireBug?
You should also give the Live HTTP Headers extension a shot.
Nice list, thanks!
I would add another one to the list if you work alot with cookies:
Add & Edit Cookies – Cookies Editor
http://addneditcookies.mozdev.org/
See video 1.
http://www.netfxharmonics.com/2006/10/video-5-fwd-editing-css-live-in.aspx
Top post – very useful
Great list, none of them work with FireFox 3 atm though :(
Nice post and very good extensions.
I am looking for a tool like CookiePie, but I was disappointed to see that there is a bug which means that the session started in the parent window does not apply to popups. Unfortunately this makes the extension useless to me.
Hi,
yeah, nice extensions, thx :)
you should add the advices of mozilla team for the dev profile (http://developer.mozilla.org/en/docs/Setting_up_extension_development_environment)
go to the page: about:config
set this:
* javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console.
* nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you’re using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
* browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See window.dump for more info. You can also use nsIConsoleService from privileged script.
* javascript.options.strict = true. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with Console2.
* extensions.logging.enabled = true. This will send more detailed information about installation and update problems to the Error Console.
Thanks Geek !
thanks Geek, and everyone else – I use pretty much all of those too.
for blog developers ScribeFire is useful too, allowing you to blog on the fly, as you surf … I reviewed it at http://guvnr.com/web/blogging/scribefire/
Firefox WebDev profile created. I like this idea.
Since this post is getting a bit dated, search mozilla.org instead of following the provided links.
https://addons.mozilla.org/en-US/firefox/
Perfect – sum up all the tools we need! Thank you for sharing! Best regards from Germany.
This post shows the information which is close to standard.
Hope next You will again post a nice Artical/Information