Firefox Add-ons For A Better Work Enviroment

Wouldn’t it be nice if your browser was so good and so advanced that you could actually use it as a development API? Well… with IE there are certain possibilities, as with Opera ^[1][2], but on the top of my list of potential candidates is Firefox. Expanded with a couple of well chosen add-ons this little puppy turns into an almost fully fledged API. If you are completely unaware of the development tools Firefox already has built in, you should first take a look this article by Leslie Frank, Rapid Web Development and Testing with Mozilla Firefox.

Before installing any other add-on you might want to install FireBug and Web Developer Toolbar. Although there is some overlap in functionality I do strongly advise installing both for the functions the one has that the other doesn’t. Under the same guise I also have HTML Validator installed, although I am sure some will argue that that really is overkill.

There are a couple of add-ons that plug into to FireBug that I’ve also found really helpful:

• Firecookie to view and edit cookies from the FireBug window
• FirePHP to send debugging/helpful data to the browser directly from your PHP script without having to pollute your webpage with nasty print_r or var_dump lines (This does also require some PHP being installed on your Web Server). Added bonus is that if you use PHP to create images, XML, JS or other files that break when text is randomly inserted you can still send yourself (debug) information in the headers. I also wrote a couple of lines of code that catch errors and redirects them to FireBug using this add-on. That way even less of mess is shown to the end user, you can read about that in this post.
• Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with inline Javascript or CSS, it will highlight them. Very usefull to quickly gain insight into the workings of a page.
• YSlow build by Yahoo! themselves based on their rules for high performance web sites this add-on analyzes a page and tells you which parts can be improved for more speed.

In addition the following add-ons have also proven their worth:

• ColorZilla (which I find beter than Rainbowpicker or FireColour)
• Lorem2Clipboard (or Dummy Lipsum if you need more options)
• FireShot to take screenshots
• Form Saver (or Autofill Forms or In Form Enter even? Mostly a matter of taste…)
• IE Tab or IE View Lite to view a page in Internet Explorer in a Firefox tab/window
• Live Headers to watch HTTP header as they wizz by
• Operaview to open a page in Opera (because of license issues it can’t be embedded like IE Tab does)
• Regular Expressions Tester to (obviously) test regular expressions. For more complex RegExp’s I use this tool.
• TimeStamp Converter saves having to go to the Unix Timestamp website everytime you need to do a date/timestamp conversion
• Unicode Input Tool/Converter or ASCIItoUnicode depending on your needs and taste
• UrlParams which shows (and allows you to edit) GET/POST values you send to a page

The following add-ons might come in handy occasionally but to me they haven’t really proven their usefulness:

• Clear cache button I have caching disabled or I use the keyboard shortcut [Ctrl] + [F5] (if you had no idea that was there you’d better check out Leslie Franke’s Firefox Cheatsheet)
• GA? Shows a little icon in your task bar telling you if a website has Google Analytics ‘Installed’ or not
• iMacros for Firefox which didn’t do what I needed unless I’d pay and TestGen4Web which didn’t do want I want full stop. Not really real macros.

For completions sake I’d also mention these add-ons, although their functionality is already covered by one or more add-ons mentioned above:

• Add N Edit Cookies if you don’t won’t to use FireBug with FireCookies.
• MeasureIt To, obviously, measure things on a webpage.
• Source Viewer Tab Website This loads “View Page Source” and “View Selection Source” in tabs instead of new windows.
• View Dependencies adds a tab to the Page Info window, in which it lists all the files which were loaded to show the current page. Does the same as the ‘Net’ tab in firebug, but with less information (which some people might find more usefull).

Currently testing

• asdf-jkl Displays keyboard shortcuts as you move your cursor over toolbar buttons or other UI widget
• Header Spy

Still to look into are:

• FlashTracer
• SeoQuake
• Console²
• Server Spy
• KGen
• Firefox Accessibility Extension
• Server Switcher
• Session Keeper
  
• phplangeditor
• TAW3 with a click
• ServerReplace

So… did I miss anything? Any suggestions or comments about add-ons not on my list are more than welcome!

All add-on on this page have been mentioned in aplabetical order, per category. No add-ons were harmed during the making of this post