I need to give you a bit a background so you can see what my priorities are when setting up my favorite browser. I am a computer programmer that deals with web stuff as well as back-end stuff. I am NOT a designer in general, mostly a coder. I am running Firefox 3 beta 5 (not RC1 yet) since it is compatible with almost all of my extensions.

Step 1: My Theme

NASA Night Launch - This has little effect on my productivity but I get asked about this more than anything else. I like the cool blackness and the fact that this theme is Firefox 3 compatible.

Step 2: Get Extensions

• Adblock Filterset.G Updater - Update ad killer
• Adblock Plus - Kill ads
• All-in-One Sidebar - Really, really slick sidebar
• Delicious Bookmarks - I use del.icio.us for bookmarking everything so having this is a must. I basically switched to FF3 once this extension was compatible.
• DOM Inspector - For all those tricky userChrome.css questions you give me ;)
• Firebug 1.2 Beta - In case you haven’t heard there is a new beta with some more cool features!
• Firecookie 0.5beta - Firebug extension that is now essential for cookie debugging
• FireGestures - Simple mouse gestures extension. Compatible with FF3 unlike many others
• Fission - Not a productivity enhancer, just cool to put my progress bar behind my address bar like Safari
• Keyconfig - Configure everything to be a simple key command away! OK, you got me, the latest keyconfig is not compatible with FF3b5. Wait, what’s this I made for you?
• Live HTTP Headers - Analyze traffic. Useful to see exactly what is being POSTed and where.
• Web Developer - Another staple for anyone doing web development work.
• XUL/Migemo - Enhances search by allowing regex search with nice highlighting. Way better than I can describe in this one-liner.
• YSlow - Web performance analytics tool that works through Firebug. Another must-have.

I also plan on using this extension when they are compatible with Firefox 3:

• Google Browser Sync - Sync history, bookmarks, cookies, etc. across my many Firefox instances.

Step 3: Menu & Interface Customization

I right click and customize my top toolbar by dragging the back, forward, etc. buttons to the top, as well as the address bar and the search bar. I remove pretty much everything else and am left with only the Menu Bar and the Web Developer Toolbar on top.

I first configure All-in-One Sidebar by making basically everything except "Page Source" open in the sidebar. I leave the hotkeys at their default values and enable the thin sidebar switch. I put a few buttons for things on my sidebar but really I use hotkeys to access everything on the sidebar. Ctrl-B gets me my searchable del.icio.us bookmarks, Ctrl-H for searchable history etc. More on that in Step 7

Last but not least, my status bar with Firebug, YSlow and Greasemonkey sits on the bottom. I also use the XUL/Migemo extension to freshen up my search, allowing it to use regular expressions and highlighting the text just like Safari. A lot of you have specific questions about this, so keep ‘em coming by contacting me.

Step 4: userChrome.css

You have probably already seen most of my userChrome.css file posted in a couple earlier posts, you can just grab the file I use here (Right-click to Save Link As…). Here are instructions just in case ;)

Step 5: userContent.css

I am not going to post the thousands of lines of code in my userContent.css file, but you can download my personal userContent.css here (Right-click to Save Link As…). Allow me to give you the important bits - the titles are pretty self-explanatory:

• Digg.com - Dark gray design
• GMail Redesigned
• Dark Gray Google
• about:blank - Dark Firefox

Just like editing userChrome.css, and instructions are here.

Step 6: about:config

You might be surprised to learn that I don’t use all of the about:config entries that I have posted. Let’s go through the ones I DO use:

browser.cache.disk.capacity » 150000
browser.cache.offline.capacity » 20480
browser.download.manager.closeWhenDone » true
browser.search.openintab » true
browser.tabs.loadDivertedInBackground » true
browser.tabs.opentabfor.middleclick » false
browser.urlbar.hideGoButton » true
browser.urlbar.maxRichResults » 5
network.http.pipelining » true
network.http.proxy.pipelining » true
zoom.maxPercent » 400

I seem to remember there being more that I used with Firefox 2 but Firefox 3s interface just suits my needs more so I don’t have to do so much :)

Step 7: Special bookmarks

Lifehacker provided me with some really cool chrome bookmarks that I use to quickly get to pretty much any Firefox setting quickly. Let me give you some examples: Ctrl-L goes to the URL bar, then I type "opt" to access Firefox options. Similarly, I can type "gmonkey" to access my greasemonkey scripts. You can also set this up yourself to access Live HTTP Headers and friends. Cool, huh?

Step 8: Hotkeys etc.

The point of many of these tweaks is to make everything available with few keystrokes. Of course, I set hotkeys for pretty much everything. Another really important part of my setup is bookmark keywords. I use this alongside del.icio.us to make my browsing super-efficient. When you hit Ctrl-D to enter a bookmark, make sure you have a short "keyword" so that you only have to type "g" and hit Enter to go to Google.

Use all these things and I think you will be a master web browser. What do you do to optimize your browsing? Which extensions? Let’s hear it!

Since we like on the bleeding edge here at eriwen.com, I wanted to share some of the most useful about:config entries that are new to Firefox 3. You probably know that you just need to type "about:config" into your URL bar to get set up for these gems. If you haven’t already you will also want to check out the Firefox 3 chrome tweaks to really customize your favorite browser.

Bleeding Edge: Force Extension Compatibility

WARNING: I take no responsibility if enabling all your favorite extensions borks up your browsing experience. Hence the “bleeding” as it were…

extensions.checkCompatibility -> Toggle to false
extensions.checkUpdateSecurity -> Toggle to false

Credit may go to Lifehacker’s article for posting this first.

Location Bar

This is a good alternative to the userChrome.css hack to trim down that huge auto-complete list on your URL bar. Note that the browser.urlbar.maxRichResults one does not like to display more that 12 as far as my testing goes. I personally set mine to 3.

browser.urlbar.maxRichResults -> # results for URL auto-complete list

Zoom, Zoom

These are most useful for presenters that need the ability to zoom in very close for their audience when showing them Firefox. You can also make Firefox 3 behave like Firefox 2 by settingbrowser.zoom.full to false. As you might have guessed, putting browser.zoom.siteSpecific at false takes off site specific zoom settings.

zoom.maxPercent -> Set to 400 for the ability to zoom closer
zoom.minPercent -> 10 will let you can zoom out further
browser.zoom.full -> Set to false for Firefox 2-like text zooming only
browser.zoom.siteSpecific -> False removes site-specific zoom settings
toolkit.zoomManager.zoomValues -> You can change zoom levels here

Random

Toggle extensions.getAddons.showPane if you don’t care for the Add-ons search part of the Add-ons dialog. You can also crank up the space you make available for the shiny new offline capabilities of Firefox 3!

extensions.getAddons.showPane -> False removes Add-ons search
browser.cache.offline.capacity -> Increase offline cache (I set to 20480)

As always you may want to stay tuned because a lot of these were added with beta 5 and I’ll be posting more as I get them. I would also recommend subscribing to the comments on this one in particular as the readers here tend to have good additional hacks! Thank you commenters!

You already know that Firebug is quite possibly a web developer’s best friend. You also know that you can edit pretty much anything with it and see results immediately. We can add one more thing to that list today.

You may not have known that you can also edit the values in the layout pane as well! (You can find it on the right side of the HTML tab) This makes it even easier to adjust the layout of a block and see the results. As a bonus, if you press the up and down arrow keys while editing a value the pixel value will adjust by one pixel in that direction. One note on this though, you can’t specify values in anything other than pixels (sorry fluid layouts).

If you haven’t already, you might want to check out 10 more things you may not know about Firebug.