September 26th, 2007 - by MrSpooky

This is the first article in a new monthly series entitled the “Developer’s Toolbox”. Each month we’ll introduce you to a new application or set of tools or plugin or some type of gizmo that will make your life as a developer a little easier.

First up in this series is a tool that I find indispensable and use almost daily: the Web Developer Firefox extension.

The Web Developer Firefox extension adds a toolbar and context menu to the browser giving you a myriad of useful tools and shortcuts. These options are divided into twelve groups:

  • Disable – disable various options in the browser (cache, JavaScript, Java, etc)
  • Cookies – disable, view, add and delete various cookies
  • CSS – disable, view, edit stylesheets, and use custom styles
  • Forms – various form options (Auto-completion, translate POSTs to GETs, show passwords, etc)
  • Images – disable, display, and manipulate images
  • Information – view page and element metadata
  • Miscellaneous – helpful tools such as displaying a pixel ruler and guidelines, clearing private data, showing hidden elements and comments, and toggling visited links status
  • Outline – draw an outline around various page elements
  • Resize – display the current window size and resize the browser window to a specific size
  • Tools – shortcuts to validation and debugging tools
  • View Source – view source and ‘View Generated Source’ options
  • Options – setup and config options

The toolbar also displays a status of the page validation and if there are any JavaScript errors.

There are too many options to discuss in great detail, so here are my top 5:

Outline -> Outline Block Level Elements

This is my savior when dealing with positioning problems. Seeing an outline around all my DIVs is a huge help when fighting the CSS positioning battle. I also use the Outline Tables option for my table-based layouts (I know…leave me alone….)

Information -> View ID & Class Details

This shows me the ID and class names for each element on the page. Combined with the outlining tools, it’s very powerful.

Cookes -> Delete Domain Cookies

I use this feature constantly when testing authentication code. It blows away all cookies for the current domain you are viewing. Saves me a lot of time to not have to logout over and over again or manually invalidate my session.

Cookies -> View Cookies

Shows detailed information for every cookie on the page that is currently being viewed.

CSS -> View CSS

Lists the contents of all external CSS files and any styles inside