I don’t know how I’ll design a single graphic or write a single line of code without Firefox.
Apart from the darn good web browser that it is, Firefox is also a web designer’s best friend. You can do almost all of your web page testing within Firefox and use it as a tool along with your graphic and code editors to help you design better and faster.
This post is not one of those all encompassing guides that list pageloads of extensions that do almost the same thing, but rather it’s about the unique extensions that I love and use myself on a daily basis.
I’d also love to hear your recommendations and how you use Firefox as a web development tool.
First off, Firefox is a minimalistic browser and does not come with many built-in web development features. Despite that, it has plenty of features that are really useful compared to their counterparts in other browsers (cough.. IE).
To name a few:
I am sure there are some more that I have not yet discovered.
Firebug – My favorite extension! Have you ever wanted to edit a web page in the browser, on the fly, and without losing your original code? If so, Firebug has all the answers for you. You can, for example, fiddle with the CSS and see the results in the browser in real time. When satisfied, copy the code and paste it into your stylesheet. Cool, isn’t it?
ColorZilla – ColorZilla is a color picker that sits in your status bar and lets you pick the color of any pixel on a web page. Much better than searching for a particular color code all over in a stylesheet.
FireFTP – FireFTP is an FTP client that you can launch right in your browser’s window. Who needs a separate FTP application anymore?
Codetech – A code editor for Firefox. Can be opened in a new tab or in a floating window.
Screengrab – If you are annoyed by constantly having to take a screenshot of a web page, and edit the captured image in Photoshop to cut off unnecessary parts (browser window, scroll bars, etc.) Screengrab does it for you with one click. With Screengrab, you can capture the visible portion or complete web page and copy it to clipboard or save it to hard disk. Yes, all this with only one click.
IETab – Even though we all detest IE with passion, majority of internet population is stuck with this web browsing horror. So, rather than opening IE to see how your newly designed web page looks in IE, you can use IETab to open IE in a separate tab within Firefox. I know, using IE in Firefox gives you the creeps, but it’s the best way to use IE, isn’t it?
Web Developer Toolbar – WDT needs no introduction. A must have for any web designer.
And this ends my small list of Firefox web development extensions. As I said earlier, if you know of any other useful web development related extensions, I’ll love to know about them. Please list them in the comments.