Sasha Sydoruk

Web Developer Firefox Extension is definitely one of my favorites. It is quite an amazing tool; I simply cannot imagine doing web development and debugging without it.

To use it you will need Firefox. Firefox is a great browser, especially for web developers, and if you still don’t have it, shame on you. Once you have Firefox installed, you need to install the web developer extension. You get it at Firefox Add-ons site or at the developer’s site. Once the extension is installed, you will see a toolbar, right under your address or links bar, and it will look like this:

The toolbar provides a lot of functionality, but right now I will concentrate on the features I use the most:

1. Outline tables and/or table cells. This is a great feature, which let’s you examine the structure of the layout, if you use tables for the site’s layout. To access the feature go to “Outline / Outline Table Cells” or “Outline / Outline Tables”. For XHTML purists, there is “Outline / Outline Block Level Elements” and “Outline / Outline Custom Elements”. One thing to keep in mind – if you want to keep the elements highlighted, make sure that “Persist Styles” option is checked. You can find it at “Options / Persist Styles”.
Here is an example of Google’s home page with table, tr and td tags outlined in red, green and blue colors accordingly.

2. Display form details. I use this feature a lot when I debug the rendering of my custom server controls or when I write WATIR functionality tests. When this is enabled, all form and input tags will be shown along with their ids and other attributes. You can find this feature here – “Forms / Display Form Details”. Here is an example of Google’s homepage with form details shown.

3. Show Passwords. Changes all “password” input tags to “text” input tags. In other words, you can see the actual passwords instead of asterisks. You can find this feature here – “Forms / Show Passwords”.
4. Make Form Fields Writeable. If the input tag has attribute of “readonly” set to true, the text box is still shown in the browser, but you cannot enter or change any data. Well, with Web Developer toolbar you can change that. When you select this item from “Forms / Make Form Fields Writeable”, suddenly, all write-only fields become available for editing. Many times, lazy developers don’t validate information submitted in read-only fields assuming that data from those fields is always correct and never changes, but a resourceful user can now change these fields. So, don’t get caught with your pants down, always validate all the input.
5. Edit CSS. This feature is great for CSS debugging. When you select this feature at “CSS / Edit CSS”, a side bar text editor will appear. All the applicable CSS will be shown there. Now you can change your CSS and see your changes in real-time on the site. The nice thing is that it works with all the sites. This is a nice way to figure out how search engines see your site and also see which part of the CSS screws up the layout.
6. Edit HTML. The same thing as “Edit CSS” only in this case you can edit HTML. Pretty handy if you want to try out some ideas on already existing sites. You can find it here – “Miscellaneous / Edit HTML”
7. Populate Form Fields. This one is great when I test my forms. If the form gets to be pretty long, and I need to fill it out many times, I use “Populate Form Fields” feature. This will fill out the input elements with random data, including radio buttons and check boxes. You can find it here – “Forms / Populate Form Fields”.
8. View Document Size. This feature will make sure that your ViewState does not get out of hand. Size will be shown for HTML, image, CSS and javascript files. You can find this feature here – “Information / View Document Size”. Here is the size information for the Google’s homepage.

These are just some of the features that the extension offers. It is a wonderful tool and it makes me a lot more productive. Give it a try and you won’t be able to live without it!