Why Firefox Is a Web Designer’s Best Friend

November 26, 2007

Firefox is a web designer's friend

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.

Why is Firefox my best friend

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:

Firefox has a really nifty source code viewer with code highlighting and many other bells and whistles (right click > View Page Source)
an error console
and a page information tool that lists detailed information about a page (right click > View Page Info)

I am sure there are some more that I have not yet discovered.

Firefox web development extensions I love

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?

YSlow - YSlow gauges your page’s performance and tells you why it is slow, all with specialized recommendations to speed it up! Thanks Mehdi for letting me know about YSlow.

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.

Tags: design, firefox, free, Resources, tools, Web Design

25 comments so far and counting

MehdiNovember 26th, 2007
Thanks for the backlink. Glad to read you liked YSlow
Aaron StroudNovember 26th, 2007
Thanks Mohsin! Firebug, ColorZilla, & Screengrab are going to be really handy!
MohsinNovember 26th, 2007
Mehdi, you are welcome.

Aaron, these three along with YSlow are my favorites too! Firebug, in particular, is a great time saver.
Justin TadlockNovember 26th, 2007
Great! More Firefox goodies! I thought that life was already simple enough with the extensions I’m using. Now, you’re telling me there’s more?

ColorZilla, YSlow, and Screengrab are the next things I’m downloading. Instead of looking through stylesheets for color codes, I’ve always just opened PhotoShop, pasted a screenshot of the page and used the color picker to find the color I want.
Fred @ Newest on the NetNovember 27th, 2007
I love screengrab. I am really bad at website design so I don’t fool around with most of these addons. Thanks for the list though.
Jeremy SteeleNovember 27th, 2007
I use firefox for javascript stuff now… mostly because it is very standards compliant - but I’m using Safari 3.0 for more web design stuff - I’m in love with the new view source window.

With that said - I may have to try out Colorzilla and firebug - they look great.
Elliott CrossNovember 27th, 2007
Moshin,

Here are a couple more that I use regularly for accessibility and usability testing:

HTML Validator: https://addons.mozilla.org/en-US/firefox/addon/249

Accessibility Extension: https://addons.mozilla.org/en-US/firefox/addon/1891

iWEBTOOL Webmasters Toolbar: https://addons.mozilla.org/en-US/firefox/addon/5171

Lynx Viewer Tool: https://addons.mozilla.org/en-US/firefox/addon/1944

Hope these help someone!
Denver Web DesignNovember 27th, 2007
Been using Firefox for a long time now… and each design day that passes makes me hate IE more and more!
LincolnNovember 27th, 2007
I already use Firebug (total lifesaver) but I never knew about Screengrab. Great find!
BaldnessNovember 27th, 2007
I totally agree with you. Since the time I have started using firefox I don’t like to use any other browser. It’s fast and good.
redwall_hpNovember 27th, 2007
You know that “nifty” source viewer? It has an even niftier keyboard shortcut: Ctrl-Shift-U. Remember that and it will save you a lot of time and trouble hunting through menus. IE doesn’t have anything like that.
ListerNovember 27th, 2007
Firefox is incredible, but most of all it lets you code things properly!

Then when you are done, and you find something is broken in IE, you just head over to Web Bug Track, and find out which bug in IE is the issue today, and add a hack to workaround it.

http://webbugtrack.blogspot.com/search/label/IE

Most are to do with Explorers old and broken JavaScript, which luckily can *mostly* be tamed into behaving like good browsers do.
Tad ChefNovember 28th, 2007
Do not forget CSS Viewer and Aardvark for the CSS lovers!

I use Lynx viewer too for my SEO work.
suraj naikDecember 5th, 2007
Yes..firefox is really good to develop web pages but if you write clean mark up it work well with internet explorer.
fredJanuary 26th, 2008
A++ seller, would buy again!
asdfJanuary 27th, 2008
Yeah firebug is insane. I don’t know how I ever did CSS without it.
Dalton FilhoJanuary 27th, 2008
And don’t forget source chart, which displays your html in neat organized chart. Must have!
JacobFebruary 7th, 2008
Hey Mohsin, great article, that’s why I decided to use on my post on SixRevisions.com. 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension. And thanks for leaving a comment on my blog, I’d like you to know that it’s the first ever comment, so thanks!
culpritzApril 5th, 2008
That’s 99% correct.
I am a web designer and i too use firefox.
Random BlogApril 6th, 2008
I loved firefox because it has plenty of of very useful plugins.
Web Design PakistanMay 29th, 2008
Yeah. Firefox is undeniably the best.
Herbalife DietJuly 9th, 2008
What can you do when Dreamweaver page shows perfect in ie 7.0 but in firefox its very distorted? What steps can you take to narrow down the conflict. Thanks for a great blog!!
nameJuly 19th, 2008
Smotri i y4is,