Website Design Tip: Firebug is awesome

I somehow stumbled on to an amazing firefox addon called firebug.   This addon is a web designers dream!  I have not yet unlocked all of its amazing features, however, there are a couple/few features that have already saved me time and headache!

Once it is installed, you can pull it up with the F12 key.  Although it is useful for inspecting code on other peoples websites, I have so far found its usefulness in inspecting websites that I am designing.

With firebug open you can press Ctrl + Shift + C.  This is where magical things happen.  Highlight any part of your website, and firebug automatically highlights the corresponding code!  If you click on a part of the webpage, firebug will keep the corresponding code highlighted, until you activate Ctrl + Shift + C again (I believe its technically called the "Inspect Element" tool).

This is especially useful for troubleshooting.  Once a piece of code is highlighted, you can easily view which parts of your style sheet are affecting it!  I had some fonts that were not behaving properly on a website.  I was easily able to see that this was because of an inherited style from a parent element!  It also shows you which rules are canceled out from nested divs and such.

You can also mouse over divs within your code and the webpage highlights the corresponding section, showing padding as well as margins!   Dang I can't wait to unlock more of this addons features....

Fritz
Pensacola Website Design