Firefox: Web Developer extension

A long time ago I promised to tell you about the most favourite Firefox extensions of mine. And since I have to start doing this someday, why not do it today?

Web Developer is probably the most favourite Firefox extension of mine. Over the past year I've got so used to its toolbar that I simply feel uneasy when I have to run Internet Explorer (work-related stuff) and I suddenly realise there is no easy way to analyze the opened webpage as thoroughly as Web Developer would help you to.



Web Developer is an easy to use toolbar comprised of various menus, which allows you to get all the necessary information about the page you're currently browsing: anchors, sizes of various elements, id and class names, links parameters, meta-tags, JavaScript codes and many other things. Not only this extenstion allows you to get information, but it also gives you an option of an active web design - you can change CSS styles on the fly for instance, or use various options to highlight only specific elements on the page - table cells or headers. There is a whole bunch of tiny tools which are here to help you validate your page - its CSS styles, HTML code or feeds. It's not possible to tell about everything here - so just have a look at the
Web Developer extension site and see for yourself. I just have to tell you about the most attractive features though.

Here are the functions I use most of all (I'm specifying the main extension menu items for each of the functions):

1. Information -> Display Id & Class details
This option shows you all the id and classes names of your page elements. Right on your original page, you get all the names superimposed - so that you can see what element has which name or class. Very useful!

2. Information -> Display Block Size
Simply irreplaceable feature for debugging new elements on your pages. If one of your elements seems to take up too much space, this feature will definitely save you!

3. Outline -> Outline Tables
One more feature which can't be underestimated. It shows you borders of all the visible and invisible tables on your page, so if you had forgotten to close a cell or line tag of your table, it will be very easy to spot and fix.

4. Resize
This is in fact a whole menu which allows you to learn the current browser window size and to also specify the desired one for a preview. There are standard resolution options provided, like 1024x768 or 800x600, and you can easily specify the ones you like, so it will really help you with making sure your page looks good in all the resolutions.

5. Images
This is another very useful menu of this extension, and I constantly use most of its options. It allows you to quickly see all the alt tags of images, and also to check your image sizes in pixels and image file sizes.

6. CSS -> Edit CSS
To be honest, the whole CSS menu is very useful. But one of its options, Edit CSS, has particularly charmed me. One could never dream of such a simplicity! You don't have to edit any page sources, simply go to this menu, select Edit CSS and you'll be on your way to editing any elements of your styles in no time. And what's really great is that you immediately see the effect your changes have on your page. If you like the results of your changes, there is an option to save your newly edited styles in a separate CSS file.

Well, I guess I've intrigued enough all the potential users of this extension. If you still haven't learned the convenience of Web Developer toolbar - be sure to download and try this extension out - I'm positive that you'll find some of its features very useful for you.