Wes Cutshall

I have 6 Firefox plug-ins, or “add-ons“,  that have made my life as a web developer much easier. Some of them I don’t know how I ever got along without. Here’s a quick rundown of the plug-ins I use every day. We’ll start with the least useful and move the most useful tool I have, period, for web development.

Window Resizer

It’s a simple tool for resizing your application window to common screen resolutions. Once installed you right-click the page and bring up the dialogue. Choose your screen resolution and the application window resizes. Great for making sure your website fits in various resolutions.

Screengrab

What is it about Windows screen capture that CRASHES it if you do not reboot your PC often enough? I’ve had this problem on countless computers across at LEAST 3 different OS’s and don’t know why Microsoft cannot get this fixed. Either through the Print Screen key or using Vista’s Snipping Tool, the core application for screen grabbing crashes and you’re stuck without being able to get a screengrab without rebooting. I often send customers screengrabs when they simply cannot understand what I’m talking about. Sometimes, “Select the item and click ‘delete’” doesn’t come across correctly in an email, and a screengrab always ends the conflict. The Firefox add-on Screengrab works even when Vista’s print screen feature has crashed! I actually downloaded this add-on right after discovering that Vista’s screen capture was not working that day, installed it, and immediately made the grab I needed. You can choose to grab the whole page or just a selection. You can either save or copy the grab to the clipboard. Most of the time I take a screengrab into Photoshop and add comments, so this is a great tool for me.

Colorzilla

Colorzilla is a simple color picker tool that will give you the RGB and HEX code value of any color on a web page, even images. Drag the cursor over the element and your status bar now shows the color values of whatever color you are hovering over. Great tool for when you forget what colors you used on a certain page or want to use the same colors as another site. I don’t use this a ton but it’s an awesome tool for the times when I want to do this.

IE Tab

No more needing to open a new Internet Explorer window in order to test your design in IE. IE Tab allows you to open a new Firefox tab that runs the IE rendering engine inside of it. It will load the address of the current tab so that you can see how your current design is working out. Of course it cannot share cookies between the two browser engines, so you might have to sign in if you’re checking out a secure section of your site.

MeausureIt

This awesome tool allows you to draw rectangles over a web page and it gives you width and height measurements of your rectangle. I use this all the time. Whether I’m checking to see if an element is displaying as wide as I specified, or trying to figure out how much room I have for an icon, I find many uses for this tool.

Firebug

Hands down the most important add-on there is for a web developer. Especially if you write JavaScript. Browsers have been notoriously poor at giving developers information on JavaScript errors. They will tell us when and where the error occurred, then leave us to search through the code for line #1304. And why was it that older versions of IE were ALWAYS off by one line? If you develop with some type of server-side scripting language it can make it harder to find the bug because you have to View Source since your actual code lines will not line up with what is rendered by the browser. And Firebug will crawl deep into your included/source JavaScript files for you. Firebug allows you to click the “# errors” link at the bottom of the status bar to jump right to the line (in a small window) that caused the error. Although I don’t use, I believe you can even view the value of some variables at the time of the error (don’t quote me on that). Beyond JS you can use Firebug to view the HTML of any section of a website. Firebug’s Inspect Element feature allows you to mouse over sections of the web page and view the HTML for that element. And in reverse, you can run through the HTML of a page and click on a tag to see the element highlighted on the page. This is huge for looking for HTML bugs of any type, and DHTML/CSS developers like myself need this. There are other features but that’s mostly what I use it for, and it saves me a ton of time.