Firefox web developer tools

Regardless if you are learning CSS or you're an active web developer you will greatly benefit from three Firefox extensions.

Most designers wanting to learn CSS, start by modifying existing templates and CSS styles, rather than writing a whole new stylesheet from scratch. That's a good way to learn in my opinion, but the biggest problem is usually understanding the relationship between the elements and how different styles effect the whole page. If you're a student these extensions will accellerate your understanding of how CSS works. And if you are an experienced developer they will speed up your everyday tasks especially when sorting out bugs.

Aardvark

The first extension can be installed by clicking here if you're using Firefox. You can start it from the Firefox tools menu.

It's the simplest help out there. You just hover over the elements on the page and it shows you the names of the different elements. Great tool to give you a quick overview of a web page structure. There some cool keystroke features available with this extension. For example try pressing "C" to set the element's background to a random color. More keystrokes here.

DOM Inspector

The second one is part of the default Firefox installation for the Mac OS X. For Windows you will need to run the custom installation to get it working.

DOM Inspector might be scary at the first look, but it's an extremely useful tool to understand how a certain element on a web page is adressed.

To access this function of Firefox select the Tools/DOM Inspector menu. In the new window that pops-up you need to press the Inspect button in the top right corner (marked with orange in the example). This will open the active web page in the bottom area of the DOM Inspector window. Now you should press the icon in the top left corner and than click on any object on the page in the bottom area. Now, you should be able to see in the top left window the whole path as how that particular object is addressed.

Web Developer Toolbar

The last one is the most versatile and exciting of all. To install it click here. You will need to quit and restart FF to get it working.

This toolbar has a wide spectrum of different tools and is extremely easy to use. I will only touch upon a few features and let you discover the rest by yourself.

Press Apple-Shift-E (Cmd-Shift-E) to open a sidebar and see all the stylesheets controlling the active web page, including the inline styles as well. This is surprisingly useful when you see a certain effect on a web page and you want to know how it's done. Not only that. You can overwrite elements in the sidebar and see the effects live!

Another useful feature can be accessed from the toolbar menu if you select Information/Display ID & Class details. This will switch on little panels of information about the ID's and Classes that are used on a page. This will be quite handy if you want to modify a certain little detail on your page and don't know how can it be adressed from CSS.

The last feature that I'd like to touch on for this extension is the Topographic Information, which can be accessed from the same Information menu point. This one shows clearly with shades of grey the layers of how the page is built up. The lightest being the top layer. If you combine this view with the previous feature you can clearly see the page structure unless it's too complex with many ID's and Classses covering each other.

I'm sure this post will raise more questions than it answers, so go ahead ask!