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