Fixpert

(This is an email that I wrote to my pals in the IT department this morning, and I thought it might be useful to share with you.)

You may already have them but these are three helpful extensions in Mozilla that I use every day for debugging. Just click “install” and when you restart Mozilla these new tools will be available.

Colorzilla

It’s intended use is for picking up hex colors off the page, but you can click on the little eyedropper icon in the lower left corner of your browser and use it to hover over elements on the page - look at the bottom of your browser window as you do this and you’ll see it’s displaying the element that you’re over. For example, it might say “p.special_offers”. If you have mysterious white space, hover over it with this tool to figure out where it’s coming from.

HTML Validator

This will put a tiny icon in the lower right hand corner of your browser window. If the code on the page validates, you will see a satisfying green check mark. If there are errors you’ll see a small red “X” and a message that says how many warnings and errors are on your page. Double click on it and it will pull up the page source with the list of errors highlighted in the code.

Web Developer

Most useful extension ever! You can edit CSS live on the page and watch how your changes effect the page instantly. You can outline table cells, or any other element on the page.