A software package a day: Firefox Web Developer

If you do any web development at all, you need to test in multiple browsers. I find a good solution to this is to rotate my “primary” browser each day, so I use Internet Explorer, Firefox, Chrome, Opera  and Safari in sequence over the week as my “main” browser for working on sites. The advantage is that I sometimes note things that are not working as expected in one of the less common browsers and then can revise that piece of code to work correctly across all the major browsers. There is only one problem with this approach: I miss Firefox Web Developer every time I’m using any of the other browsers.

The package is a “kitchen sink” affair of tools for doing web development and diagnosing problems. The menus each serve a different purpose, but I have found them all useful:

• Disable: Allows selectively disabling Java, JavaScript and other features so you can view your page the way someone without those technologies will see it.
• Cookies: Disable, view, delete and even add a new cookie. Highly useful for diagnosis of cookie related issues.
• CSS: Disable, view, edit and add new CSS style rules. The edit is extremely useful as it updates the display in real time. For those pages with fiddly layouts, this can be a lifesaver.
• Forms: Allows the display of form details and the manipulation of the form in ways that help test against some security holes that otherwise might be missed. I highly recommend disabling all constraints on your forms and submitting the page back to ensure your server side code can handle malformed form submissions.
• Images: Display details about, disable, find broken images and more. I recommend showing all images at full size at least once on your site so you can tell if you are shipping excessively large images and then shrinking them on the client (a common error, especially after a site has been live for a long time).
• Information: A huge amount of diagnostic information at your mouse’s command. A lot of this can be gotten to other ways, but it is a one stop shopping trip that makes it useful.
• Miscellaneous: All the stuff they couldn’t figure out where to put elsewhere. The ruler alone is worth investigating this menu (especially when in CSS edits). It also has the ability to clear various types of data (like link visitation) which is otherwise hard to clear.
• Outline: Places an outline around various types of objects in a web page (such as external links, table components, etc). Useful when hunting down things on a large page.
• Resize: Useful for testing your page at various resolutions. You can set your own list, but 800x600 is one I use to remind myself that not everyone is widescreen. It also can display the current state of your browser window size.
• Tools: Lots of validation tools from w3.com and other sites, including 508 (disability) testing. This is an extensible menu, so adding your own favorites is recommended.
• View Source: Exactly what it says, except it also allows “View Generated Source”. This means you can see what JavaScript/AJAX has done to your page.
• Options: The boring administrative stuff.

With all those tools in one download, I can’t recommend this highly enough. Sure, there are better versions of each of these tools, but the kitchen sink is a great starting place.