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.
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.
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
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:
- 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)
If you have more hacks to the config that help developers share them in the post comments.
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.
- DOM Inspector
- Extension Developer
- IE Tab
Again, if you want to recommend an additional extension that you think you cannot develop without – add it in the post comment.