Tools Every Designer Should Know About, Episode 1

What: Firebug plugin for Firefox
By: Mozilla
For: Web designers, coders
Where: http://getfirebug.com/



Well, okay, this mostly applies to web designers. But read on!

Not only is this little sucker just about the handiest browser plugin after, I dunno, Adblock, it's actually really smart. Install it as a quickie plugin and you're ready to rock. Activate it and you can meander through the code of the page you're looking at, tapping through HTML, CSS and layout levels like magic.

Firebug lives in the bottom left corner of your Firefox browser. You turn it on by clicking and it opens a fairly well organized and designed window showing different levels of code and design.

This is great for when you're tweaking someone else's code, because you never know where they've put their style sheets, what they've named their DIVs, and whether or not they've done in-line styles (bad! bad!).

My favorite things it does:

- Lists all CSS scripts any given page is accessing, in order of dominance, crossing out any code which is overridden by a higher ranking code

- Has a layout tool which will highlight DIV areas when you click on their code, showing you exactly where each area of DIV exists

- Has a cute firefly icon

...Aaand that concludes this brief first episode of Tools Every Designer Should Know About.