Setup A Development Environment in FireFox

January 17, 2010


This post cover the following topics:

  • What is Firefox Profile Manager
  • Setup a developer profile
  • Tweak the browser for debug profile

This post is either for new web developers or to advanced developers that keeps crashing their Firefox or have too much developing extensions that it affects their day-to-day browsing experience. I came across with Firefox profile manager when i started developing Firefox extensions and i crashed the browser so much it messed up my entire browser experience.

Introduction to Profile Manager

Firefox profile manager allows us to have multiple personalities for a single user on the same desktop. This is very important when you are about to develop plugins – especially if you are a beginner that is about to mess-up the browser profile – and believe me it isn’t fun. So it is important to setup a development profile so you could play with your projects without disrupting your everyday browsing habits.

Firefox uses the default profile to load all your preferences, that is, browser toolbars, extensions, bookmarks, history, cookies, configuration changes and tabs. Firefox’s profile manager lets you create and choose to use other browsing personalities.

In order to create a new profile you’ll need to open Firefox from the command line with the –profilemanager parameter as seen in the following screenshot.

Run FF From Commandline

Profile Manager

This will open the profile manager window to allow you to create/delete a profile. For the sake of this post we will create a new profile called ‘Development’ which we will use as our development environment. This is where we will install all out debugging and development extension so the default profile will be lighter and faster.

Create New Profile

Don’t forget to unmark the “Don’t ask at startup” so each time Firefox will open you’ll be asked which profile to run.

If you hate being asked every time Firefox starts you can create shortcuts for each profile using the parameter -P <profile name> so in our case: firefox.exe -P Development
There is also a way to run multiple instances of Firefox by creating a shortcut with the following: firefox.exe -no-remote -P development

about:config Teaks

Now since we have our developer profile we can tweak a bit the browser to exchange performance over debugging options. I recommend the followings in the about:config:

  • javascript.options.showInConsole = true (Logs errors in chrome files to the Error Console)
  • extensions.logging.enabled = true (This will send more detailed information about installation and update problems 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)
  • browser.dom.window.dump.enabled = true (Enables the use of the dump() statement to print to the standard console)
  • javascript.options.strict = true (Enables strict JavaScript warnings in the Error Console)

If you have more hacks to the config that help developers share them in the post comments.

Developer Extensions

After we tweaked the config we are now ready to install some Firefox extension to help us develop and debug. The following is a list of extensions that i found useful for web development.

Again, if you want to recommend an additional extension that you think you cannot develop without – add it in the post comment.

Good luck!

Be Sociable, Share!

tags: , , ,
posted in Blog by Amir Harel

11 Comments to "Setup A Development Environment in FireFox"

  1. shyb wrote:

    I like ur blog. gever.

  2. Amir Harel wrote:

    thanks man. likewise – :)

  3. shyb wrote:

    I like ur blog. gever.

  4. Amir Harel wrote:

    thanks man. likewise – :)

  5. Debugging Firefox Extension Using Log File | Amir Harel wrote:

    […] one of me recent post I’ve talked about how to setup a development environment in Firefox. One of the problems in developing firefox extensions and i think software in general is how to […]

  6. LANCE wrote: Canadian Health&Care.No prescription online pharmacy.Special Internet Prices.Best quality drugs. No prescription drugs. Buy drugs online

    Buy:Retin-A.Valtrex.Synthroid.Human Growth Hormone.Mega Hoodia.Lumigan.Accutane.100% Pure Okinawan Coral Calcium.Arimidex.Actos.Petcam (Metacam) Oral Suspension.Nexium.Zyban.Zovirax.Prednisolone.Prevacid….

  7. LUKE wrote:

    CheapTabletsOnline.Com. Canadian Health&Care.Best quality drugs.No prescription online pharmacy.Special Internet Prices. High quality drugs. Order drugs online

    Buy:Levitra.Zithromax.Cialis.Cialis Super Active+.Viagra Soft Tabs.Viagra Professional.Super Active ED Pack.Viagra.Maxaman.VPXL.Tramadol.Propecia.Viagra Super Force.Cialis Professional.Cialis Soft Tabs.Soma.Viagra Super Active+….

  8. RAFAEL wrote:

    CheapTabletsOnline.Com. Canadian Health&Care.Best quality drugs.No prescription online pharmacy.Special Internet Prices. Low price pills. Buy drugs online

    Buy:Viagra Professional.Soma.Viagra Super Force.Cialis Super Active+.Cialis Soft Tabs.Viagra Super Active+.Cialis Professional.Propecia.Tramadol.Maxaman.Zithromax.Viagra.Super Active ED Pack.Levitra.Cialis.Viagra Soft Tabs.VPXL….

  9. CORY wrote:

    CheapTabletsOnline.Com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. Online Pharmacy. Buy drugs online

    Buy:Cialis Professional.Viagra Soft Tabs.Viagra Super Force.Soma.Cialis Soft Tabs.Viagra Professional.Viagra Super Active+.Tramadol.Viagra.Levitra.Maxaman.Propecia.Cialis.Zithromax.VPXL.Super Active ED Pack.Cialis Super Active+….

  10. BRADLEY wrote:

    NEW FASHION store. Original designers collection at low prices!!! 20 % TO 70 % OFF. END OF SEASON SALE!!!


  11. ERNEST wrote:


    Buy:Viagra Super Active+.Viagra Soft Tabs.Viagra Professional.Maxaman.Tramadol.Cialis Super Active+.Super Active ED Pack.Cialis.VPXL.Soma.Cialis Professional.Levitra.Viagra Super Force.Cialis Soft Tabs.Viagra.Propecia.Zithromax….

Powered by Wordpress and MySQL. Theme by