Setting Up Firefox as IDE for Firefox Extension Development! [Firefox Developers]

This article is intended for all geeks who are working on firefox extension development! If you are new to this then you may want to start with shortest tutorial for firefox extension development!

This is small but important tutorial for those who seriously want to develop firefox extensions. As there is no good IDE for developing firefox extension you have to change your firefox itself so that it can act like IDE! With proper settings and few extensions you can really reduce extension development time and get a nice debugging environment.

Following points have been covered in this article:

• Setup a different profile for extension development
• Development Preferences
• Development Extensions
• Live Extension Development
• Things to skip

 

#Setup a different profile for extension development

This is first thing to do. Creating separate profiles for extension development saves you from personal data loss which may result from accidental crashes. Also points explained below will make your firefox slow and bulky which is not desirable for day-2-day browsing specially when you use sites based on AJAX like Gmail!

If you know how to use multiple profiles in firefox then create a new profile right now for extension development. If you are new then you can read our earlier article to do this. Also as always there is an official doc which explains this topic.

If you are interested in my extension development profile then you can download it from here! (Size: ~4.0 MB)

 

#Development Preferences

These are basically settings which you can change by visiting about:config page. Just type about:config in address bar and hit enter. You will see lots of settings there. Now use search feature to find following settings and change their values if needed. If a search returns no result right click in windows to create a new setting. If you need help regarding this, please refer official Mozilla doc – Editing Configuration Files.

Following is list of setting = value pair. If you are new, just do it without bothering too much.

• 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.
• 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.
• javascript.options.strict = true. Enables strict JavaScript warnings in the Error Console.
• browser.cache.memory.enable = false. Disables caching in main memory i.e. RAM.
• browser.cache.disk.enable = false. Disables caching on secondary storage i.e. hard-drive in most cases.

Last two are not present in official doc. They reduce performance but better to do them for live extension development as explained later. Also the performance hit can be and must be offset by creating a new profile for extension development as explained above.

 

#Development Extensions

There are lots of extensions which can make extension development process pretty easy! Complied below is list from official docs and my experience over the time!

>> From official doc

• DOM Inspector, an option of a custom installation.
• Venkman, a JavaScript Debugger.
• Extension Developer’s Extension
• Console²
• Chrome List
• Firebug
• Execute JS
• XPCOMViewer, an XPCOM inspector

>> Recommendations

• All-in-One Sidebar
• GreaseMonkey
• View Formatted Source
• View Source Chart
• XPather
• Live HTTP Headers

This is by no mean a complete list. You may find some of these useless at this point but what you really need is mainly depend on goals of your extensions. You may like to bookmark official developers extension listing. Alternately you can add it to your search toolbar.

 

#Live Extension Development

Do you follow following sequence?

1. Edit Extension.
2. Package it into XPI.
3. Install edited extension.
4. Restart Firefox.

If yes, then you can’t go far!

At this point you must switch to live extension development. This way you can skip packaging/installation steps always and restarting step most of the time!

To do this, first navigate to folder named extensions where all installed extensions are stored. extensions folder can be found in path like <profiles_folder>/<profile_name>/extensions. (Help on finding profile folder)

Once in extensions folder, you will find many subfolders. Each of these corresponds to one extension and folder names indicate extensions guid. Now if your extension is already installed then you will see a folder with its guid name. Jump in it. Or just create a new folder with its name equal to guid under extensions folder for new extension and start developing right in that folder.

Now important point is, changes made to files under extension folders are reflected instantly without packaging or installation. Still you may need to restart firefox depending on change you have made! A slightly different approach is taken by Jonah Bishop at borngeek.

 

#Things to skip

This is little unrelated to this topic but nevertheless important as a beginner. Many articles including official talks about deploying extensions into JAR files. I personally against it as JAR files complicates the process of development as well as maintenance with no considerable benefit.

Also there is a complicated process called signing XPI which is really not essential at beginners level!

While surfing, you will come across many topics which can be skipped without any problem to save your time as well as confusion.

 

Finally there is no as such hardware requirement but consider having atleast 1 GB RAM as extensions like Venkman are memory hungry.

That’s it! If you have any query regarding this or any other problem feel free to use comments form below. Please avoid contacting via email/chat for generic problem as open discussion here can help others too.

 

Credits: Mozilla’s official article – Setting up extension development environment & many other docs are used while writing this.