Firebug

Firebug is the Firefox add-on that I use the most. Honestly, I don’t know how I used to get by without it. It is a very powerful tool that allows you to make changes to CSS and HTML and instantly see the changes. It allows you to visually select an element on a page and it will instantly tell you what styles are being applied to that element. You can use it to see how long a page takes to load and why. Firebug is also very useful for JavaScript debugging and DOM manipulation. Basically, if you’re serious about web design or development, you should be using Firebug.

Web Developer

The Web Developer add-on gives you the ability to selectively enable and disable stylesheets, scripts, images, cookies, etc. It can display a lot of useful information such as image dimensions, image file sizes, line guides (similar to guides in Photoshop), and much more. It will also allow you to easily resize the browser window to any size you choose, which is valuable when testing for different screen resolutions. I consider this another must-have add-on for anyone doing serious web design or web development work.

HTML Validator

In this day and age, any self-respecting web designer or web developer should be developing websites using valid code that follows the W3C standards. This Firefox add-on gives me instant feedback on whether or not my pages adhere to these standards. It puts an icon in the bottom-right corner of the tray to let you know if a page contains errors or warnings, or if the code is valid. This saves a lot of time since I don’t have to manually check pages through the W3C web-based validator.

I have also used Total Validator to do code validation. It works okay, but is a little more complicated than I need.

Screengrab

It’s often useful when designing a webpage to be able to grab the screen contents and save them to a file or paste them into Photoshop. Screengrab makes this very easy. Especially helpful is the option to save the entire webpage to a file rather than just the visible portion. In the past, this could only be accomplished by taking multiple screenshots and stitching them together in Photoshop. Screengrab does it with one click. Another nice feature is the ability to grab just a portion of the screen with a draggable selection box.

Colorzilla

Sometimes when I’m browsing the web, I see a color I really like and want to use in one of my designs. Colorzilla allows you to use an eye dropper (similar to Photoshop) to grab any color on screen and view its RGB and hex values. It also has a nice feature to pull all colors associated with DOM objects and show them to you together. You can then save the colors as a palette file.

FireFTP

I have used several FTP clients over the years including CuteFTP, WS FTP, Bullet Proof FTP and FileZilla. While they all do what they’re supposed to, they all feel overly complicated and bloated. I haven’t had any of these FTP clients installed on my computers since I discovered FireFTP. It just fits in with my workflow so well, and is one less piece of software I have to worry about. Now I just have a tab open in Firefox for transferring files. It doesn’t have a ton of features, but it has a connection manager and allows me to easily transfer files, which is all I really need. It does have a feature to keep directories in sync between the server and your local machine, which is nice.

IE Tab

Occasionally there are certain webpages or web apps that only work well in IE (SharePoint, for example). Rather that abandon my Firefox workflow and fire up IE itself, I use this add-on. IETab allows you to define certain sites that you would like to open with IE. Then, when you are viewing one of these sites, it changes the Firefox rendering engine to embed IE in a Firefox tab.

Foxmarks

Between work and home, I use Firefox on four computers. The problem with this is that I ended up with four different sets of bookmarks, which is annoying. This is where Foxmarks comes in. By signing up for a Foxmarks account, you can store your bookmarks in a central location. Then, with the Foxmarks add-on installed on each computer, your bookmarks are kept in sync. While you could certainly get by without this add-on, I can’t imagine wanting to do so after having used it.

Map This

This add-on isn’t really related to web development, but I find it very useful. If there is an address on a web page that you would like to see on a Google map, all you have to do is select it, right click and choose Map This. You can also set up a default starting address, select the address you want directions to, right click and choose Map to This.

Twitter Bar

Twitter Bar allows you to post Tweets to your Twitter account right from the Firefox address bar, saving you from going to Twitter, logging in, and then posting your Tweets that way.