Glengage – Glen Horton

Firefox is a great web browser, but it also makes for a great development environment. With the right extensions loaded, you can really save some time tracing through code, finding bugs, and optimizing your site. Below are the extensions that I have loaded in Firefox.

ColorZilla

This extension puts a little eye dropper tool in the lower-left corner of the browser. Clicking on the dropper and then on the web page gives you the RGB or Hex code of the color at that spot. You can also copy the code to the clipboard to be pasted into a style sheet, etc. I use this one a lot. It’s simple, but very useful.

Dummy Lipsom

I don’t use this as much as I should, but that’s because I often forget about it. It allows you to quickly fill in form fields with dummy Lorem Ipsum text. That way, you can quickly test a form without having to fill it out by hand. If you use a CMS, you can also use this to quickly create body text for a page.

Firebug

If I had to pick only two extensions, Firebug would be one of them. It sits as an icon on the bottom status bar until needed. It’s great for debugging JavaScript code, but I don’t do a whole lot of that. For me, the best feature is being able to click anywhere on the web page and seeing in real time what HTML and CSS is code is involved in that spot. Firebug also allows you to edit code and see the effects in real time.

HTML Validator

This extension is simple, but valuable. It validates web pages in the background and displays a check mark in the status bar. When viewing HTML source, it highlights the lines that are causing validation errors. It’s great for ongoing monitoring of a web site.

IE View Lite

Another simple extension. Load a page in Firefox, right-click on the page, click on “View this page in IE.” It will launch Internet Explore and load the same page you were viewing in Firefox. It’s nice for checking how pages look in IE and for pages that don’t look or work properly in Firefox.

Web Developer

If I had to choose just one extension, this would be it . It’s not quite as powerful as Firebug, but it’s very easy to use. It gives you a toolbar across the top of the browser that has the tools clearly organized and displayed. I like that I don’t have to think about how to use tool. It’s just second nature. Nifty features include a ruler, a page magnifier, a window resizer, and many more.

X-Ray

X-Ray puts an item on your right-click menu that acts as a toggle. When turned on, it surrounds a page’s content with the underlying elements and classes. So instead of a word showing up as word. It is displayed as <p><em>word</em></p>.

YSlow

This one is an extension of an extension. It works with Firebug to identify “problems” that may slow down the loading of a web page. The extension is Yahoo’s response to its Thirteen Simple Rules for Speeding Up Your Web Site. When run, it gives you a letter grade on all thirteen aspects of your page. Pay attention to the rules and what they mean. Some of the suggestions it makes can actually slow down your page depending how your site and server are set up.

I should note that all of the above extensions work in Firefox running on both Linux and Windows. I haven’t tried them on a Mac, but I bet many of them will work.

Of course, I’m not developing all of the time. Sometimes I just want to use Firefox as a browser. Having all of the above extensions loaded into Firefox can use up RAM and slow things down. So I created a separate profile in Firefox where I installed all of the developer extentions. So when I start the browser, I can choose to load my day-to-day profile with minimal extentions or the developer one.

If you develop web sites and don’t use Firefox, you should. If, however, you are stuck with IE, there is an Internet Explorer Developer Toolbar available. I haven’t used it, but I hear that it’s decent.