Tool Time Friday | 8 Web Developer Must-Have Firefox Extensions

Again, with keeping the same sort of thread that ran through Tinu’s posts dealing with JV-ing (it’s not really a joint-venture, it’s more like joint sharing) and commenting (it’s the commenting that made these tools available to you), as discussed in the earlier Tool Time Friday post today, I again ran across a great site with something really cool for all of you.

Martin over at Kabatology, has graciously allowed me to repost his awesome ‘8 Web Developer Must-Have Firefox Extensions!’

So here they are, in reverse order. Jump on over and when you’re done, thank Martin for his awesome work!

 

 

 

 

 

This is what makes Mozilla Firefox special; the many extensions that help us in our daily tasks. For a Web Developer, the use of adequate tools can drastically reduce time-wasting and improve performance. Here I put together those tools that help me in my daily undertakings and that I consider the most essential of the many excellent Web Developer extensions out there. If you have tested better extensions then let us know in the comments. These are those I find most useful;

IE Tab – This is a Firefox extension that embeds Internet explorer in tabs of Firefox. It enables you to view web pages in Internet Explorer without having to open another window. For a web developer this means you can quickly see how IE displays your web site – we all know IE interprets some HTML tags differently from Firefox and other major browser.
You can configure this plug-in to automatically open certain web pages that Firefox does not display correctly like the Windows Update page – thus you can also update Windows directly from this Firefox plug-in. IE Tab also includes context menu integration.
The only draw back is that you need IE on your system to install it.

7)

Foxmark – When you are not working on your computer maybe because you traveled or your pc is under repairs, one of the things you miss most is your bookmarks. With Foxmarks, you’ll always have your bookmarks at hand. Foxmarks bookmark synchronizer keeps your bookmarks on its server and adds the new ones to that list. So when ever you change pc, you just need to install it, get into your account and retrieve your precious bookmarks that every web master/developer or blogger can’t do without.

6)

Web Developers – It is a very useful tool for web development. It has similar features to Firebug, but offers more tools to edit the web page you’re working on. You can modify cookies, examine them, delete and even manually add them. Web developer allows you to clear private data, enable/disable the cache – all on the fly. If you find it necessary, you can display all the image-paths on a page with a single click.
This add-on could be of importance to all those who browse the web, you could take-off images or background-images and more to facilitate reading or downloading of web pages.

5)

Imacros – This add-on puts together many useful applications. It can be used to automate filling in forms, it offers a single doorway to many web sites using a single master password, extract data from a website and exports it to CSV files.
Most Web Developer’s use iMacros for functional, performance and testing of web their web sites and applications. I personally use it when I want to register to many different web sites. Also try Auto Fill to automate filling-out forms

4)

ColorZilla – This a simple but brilliant tool for designers and developers. ColorZilla places an eyedropper icon in your the left hand-side of the status bar. When you click on it, you get a crosshair cursor. If you place this cursor over a web page, the values of the pixel under the cross-hair will be displayed in the status bar – both as three separate values and as a hex value (e.g., R:255, G:255, B:255 | #FFFFFF).
Colorzilla also has an Online Palette Viewer and easy access to DOM Inspector Mozilla tool for examining a page’s Document Object Module.

3)

MeasureIt – Useful and very easy to use. It places a small ruler icon at the left-side of your status bar. When click on the icon you get a cross-hair cursor and your browsing page fades out. Move over to the desired area or object you want to measure and drag out a box over it – the width and height of the box would be displayed in pixels close to the box. With this tool you can measure the exact width of your sidebar, footer, header or whatever. To get out of MeasureIt, use the Escape key (Esc) and the page turns back to normal.

2)

FireFTP is a Firefox add-on that turns your browser into a full-featured FTP client. FireFTP opens up in a new tab that offers a two-panel interface that permits you to browse and transfer files between the remote server and your local PC.
This FTP client is easy to use, so just try it out.
Its major draw back is that unfortunately it still does not support SFTP or SSH.

1)

Firebug – This is probably the most important web development tool. This Firefox add-on allows you to browse and tweak HTML, CSS and JavaScript on a desired web page and preview the changes on the fly. It places an icon on the right-side of the status bar that informs you of errors in a web page. When you click on the icon it opens up a window that displays the line in which the error is found – this way it is easy to track errors on your web pages. In the Inspect mode hover with your mouse over a desired element and it will display all the codes that generate that element – much better than using the Page source that most browsers offer. It takes a whole page to write on FireFTP.

Thanks again to Martin!

MorganLighter