The best Firefox add-ons for developers?

In this post I will discuss the add-ons I use on a daily basis while developing web applications. I am aware that there is a popular collection of Firefox add-ons called: Web Developer’s Toolbox. Although that is also a nice set, and some of the add-ons are also on my list, I have left some of them out and added some other ones. The reason? I mainly do back-end development, so you will not find a color picker, ruler, screen grabber, font inspector or any other typical front-end add-on on my list.

The top 10 add-ons listed below are order from high to low impact on my work:

  1. Firebug
    This add-on gives you access to many invaluable tools. A few things I use it for: profile website page load speed, inspect request and response headers, as a JavaScript step-by-step executing debugger. It really is a tool you can not go without.
  2. Web Developer
    This toolbar has a few good options. My favorite is the “Disable cache” option that a developer should always have checked while browsing his web application. Another one is “Disable All JavaScript” to test for proper degrading behavior when JavaScript is turned off. The last one I frequently use is “Resize Window” to test on small screens (mainly for use on net-books).
  3. Firecookie
    Although the “Web Developer” toolbar contains a “Cookies” menu having the cookies in Firebug is even more convenient to me. It is easy to clear the shown cookies and view them. This add-on might not do much, but it does it really well!
  4. User Agent Switcher
    This tool enabled me to identify my browser to the website as an iPhone (or any other mobile device). This is really nice in combination with the “Resize Window” option of the “Web Developer” that enables you to mimic the screen size of the mobile device.
  5. JSONView
    When creating API’s XML is no longer “cool”; everybody uses JSON these days. Pretty printing JSON is something Firefox cannot do by default. By default it even offers the JSON file as a download. This is especially annoying during API debug sessions where you quickly want to inspect JSON output. Firebug offers a similar option in its “Net” tab, but becomes inconvenient when you have multiple or large JSON files. This add-on enables you to open pretty printed JSON output in a new tab.
  6. YSlow
    Is your site loading slow and you have no clue where to start? This add-on gives you a list of things you might start changing. You can use this (Firebug) add-on when you have reports your application is slow and you are looking for “quick wins”.
  7. Flagfox
    Debugging or optimizing a site that uses an international content delivery network (CDN) or a site on a hosting environment with multiple load-balanced servers (a.k.a. web farm) can be tricky. In such cases it is very important that you know which server is giving you a response and where that one is located. Flagfox offers you a little flag in the address bar that represents the country the server is located in (for CDN’s). It also shows the IP address of the server you are connected to when you hover the flag (for web-farms).
  8. Tamper Data
    When bugs are really tricky you sometimes wished you could stop the browser to inspect and/or change some of the request it makes. Tamper Data does exactly that! Normally I just use Firebug and inspect the headers there, but in the rare case I want to change a header for debugging purposes I use it.
  9. Tilt 3D
    Are you a back-end developer like me, but is there somebody visiting you want to impress? This is exactly the right tool for it. Talk your normal IT gibberish while actively rotating the 3D presentation of the website and you can be sure the person thinks your some kind of IT wizard.

There is one tool that is not on the list, because it does not help me in web development, but is so good I have to mention it: “Adblock Plus“. It (magically) removes 99% of all the annoying ad’s from any website.

Share