As a web developer and designer I have come across many programs and browser add-ons that help make my job a much easier and smoother process. There are four specific add-on tools for FireFox that I use on a daily basis and wish to share.
- Firebug – download add-on
- Web Developer Tools – download add-on
- Color Picker – download add-on
- MeasureIt – download add-on
Firebug:
Definitely my most favorite tool to use. With this tool you can edit, debug, and monitor CSS, HTML, and JavaScript live on any website. This is a huge advantage because now when working on sites, if you come across an issue with items not displaying correctly, you can click on any item, and make changes live in the code. This helps save lots of time. Being able to make changes live and then applying them later to your code is much faster then switching back and forth between your browser and some HTML editing program (Dreamweaver) until it is fixed.
Web Developer Tools:
My second choice would have to be the web developer tools. Although I only use two main functions of the tool, there are many other interesting and neat things you can do with this add-on.
One use is being able to disable the style sheet. The advantage of this is so I can check to see if all my headings, list items, and text are displaying correctly for search engines. When a bot/spider from google comes to your site, it is reading it top to bottom. So having a site built in DIVS/CSS is the best and fastest way for google or other search engines to read your site.
The second function is checking to see if your site validates. There are certain web standards and strict rules when coding sites. This add-on has a quick shortcut that brings up W3C validation page that reads your site and lets you know if you passed. If you did not pass it gives you great feedback on how to fix the issues.
Color Picker
Not much to say about this add-on. It does what it says. Lets you pick color off the site you are viewing. Just click on the tool and then point and click on any color on any site and it will give you the exact hex color that it is using. Great for designers who see a color they like and want to know which on it is.
MeasureIt
Just a fun tool that is useful if you need to find how large an area on the site is. I use it a fair amount to measure columns and banner sizes when building out templates.