As it were…

I’m teaching an intro to web development class right now, just html and css plus random cool things. In the process I’ve kind of synthesized which Firefox extensions I feel are really essential to making my job easier. I told my students I’d write them down for reference, and here they are.

Web Developer Toolbar

This one does just about everything the others do, the others just do a few things better. It helps with CSS, it helps with forms, site validation, source code viewing; everything.

An example of something unexpected for me was Viewing Generated Source. Sometimes Firefox is dumb about sessions; if you’ve logged into a web site, and try to view source, the source you get is of the login page, because your View Source thing doesn’t know about your auth’d cookie, AND View Source actually does another call to the server. View Generated Source actually compiles the source of the page you have in cache, and shows you that. Very handy.

I primarily use the web dev toolbar for CSS editing and creation.

Firebug

Firebug lets you interact with pages on the fly, and see information about pages as they load. You can follow javascript actions, tweak css, see file sizes, download times, etc.

My favorite Firebug feature is Inspect Element. You can right click on anything in a page and choose Inspect Element, and it’ll open the Firebug window examining that element. It shows you where it is in the html, as well as all CSS being applied to it. It shows WHICH css file is applied to it, and what line number that css is on. That’s sweet.

YSlow

YSlow is actually a Firebug extension created by Yahoo. It specifically analyzes your content for download and render speed, and grades the site on a number of levels, and makes suggestions on how to speed up your site.

HTML Validator

There are lots of sites and extensions that will validate your html, but this one puts an icon in your status bar and analyzes every site you go to. You can hover over the icon and it will tell you how many warnings and errors you have. If you double click it, or just view source, it has a pane in the bottom that will show you every problem, what line it’s on, and suggested fixes.

It’s super fast for finding simple html syntax errors, or elements left out altogether.

IE Tab

I don’t actually use this one at all, since it only works if you’re using Windows, and I never do. However, if you’re stuck with Windows, it can save some time. It uses Internet Explorer inside a Firefox tab to render a web site. This makes it very easy to work on CSS for both Firefox and IE, since they’re in tabs next to each other. Or you can just pull up IE.

Update

Someone reminded me of another, and I remembered another when I got back to my office:

ColorZilla

This puts an eyedropper in the status bar of your browser, and you can select any pixel on the screen. It records the hex, and RGB values in a couple different formats for easy copying.

It also has a regular color palette for choosing any color, and a zoom function, to make it easier to select specific pixels.

MeasureIt

This is a pretty simple one. It puts an icon in your status bar, and when you click it it puts a layer over your entire page so that clicking doesn’t affect content. Then you can drag a box marquee and measure any part of the page.