The 5 best Firefox extensions for web developers

Making feature rich and complex web applications can be sometimes challenging but if you don’t have the correct tools for doing your job it can be really painful. For those working on new websites or debugging already exisiting websites there are a couple of Firefox extensions that can really make your life easier and also help you improving the speed and quality of your work. During the last years i got used with some extensions and now i cannot conceive my work without them. Every time i reinstall my system these are the first things that got installed after Firefox. And the reason i don’t use Chrome yet for everything is the lack of some extensions of this kind.

So here are the extensions recommended by me (they are listed after the order i started to use them):

1. Firebug – has evolved in the greatest tool for web developers. Everyone i know, working in this field is using it. With the help of this addon you can monitor and debug live the CSS, HTML and Javascript in your webpage. It will help you find errors and review the output generated by your site.

2. ColorZilla – it features an Advanced Eyedropper, ColorPicker and PageZoomer. I use it mainly for capturing the colors displayed here and there and to verify if colors are what it should be.

3. MeasureIt – allows you to measure the dimensions of web page elements. You can drag boxes and view the dimensions of these boxes. So you can really easily get an ideea of what is the size of any object in the page you are viewing or developing.

4. JSView – is an enhancement to the View Source feature of browsers. Because View Source only shows you the source of the webpage, (without additional files like external javascript files) i use this tool to view all files and their sources included externally. This consist mainly in additional javascript and css files and JSView is the right tool to view them when needed.

5. FirePHP – it is a Firebug extensions so you will need Firebug (first in my list) and an external library that you will use it PHP files. So what FirePHP does ? It allows you to debug your PHP code and view the results in the Firebug console. You just include the FirePHP library in your webpage and make a call like

$firephp->log($var, 'My Variable');

The value of the $var variable will be outputed to the Firebug console. This is very handy especially when you debug live websites and you need to output some variable but that would disrupt the aspect of your webpage. This way using FirePHP the output you are sending to the browser is available to those who have FirePHP installed. The output is sent to the browser through some special headers generated by FirePHP.

Conclusion

Sure there are many other extensions that are very useful for programmers but these 5 are the ones i use most.

Do you have extensions that makes your life easier?