Handy Firefox Extensions for Debugging
(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.
November 10th, 2005 at 9:50 pm
Make sure you have the DOM Inspector installed as well — it’s necessary for many of the features of all three of the above-mentioned extensions. You can get it during any Firefox upgrade by doing a Custom Install (in Windows or Mac) or by installing firefox-dom-inspector (in Ubuntu Linux or anything else based on Debian Linux). It has its own cool set of tools, such as navigating the DOM tree and clicking on elements to locate them in the DOM.
November 11th, 2005 at 1:48 pm
Awesome, thanks for bringing that up Tim!