Whether you are a front-end designer or a back-end web programmer or a casual blogger, surely you’ve used Mozilla FireFox Browser. Firefox has over 1,000 extensions or add-ons or plug-ins they include debugging consoles, syntax validator, cookie manipulators, accessibility tools, manuals, measurement tools and search engine optimization information.

What is add-on?

An add-on can be a new time-saving toolbar button, a shortcut to search, a themed look, and more. Add-ons make browsing easier. Choose add-ons for the way you browse. Install in a few clicks and they stay up to date with easy reminders. Explore and add on now!

Here are web developer tools & add-ons that I personally use and find them very useful.
Before I proceed to give more information let me give you a sneak preview of my favorite browser Mozilla FireFox decorated with add-ons/ plug-ins.

1. FireBug

My personal favorite one when it comes to developing or debugging website code. With the firebug you can inspect HTML and modify style and layout in real-time, integrated advanced JavaScript debugger available for any browser. Firebug accurately analyzes network usage and performance. By extending Firebug and add features can make Firebug even more powerful.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/1843/
Developer Website: http://getfirebug.com/

2. Web Developer

This is a very useful tool similar to FirBug with some more extra features. You can use this to disabling/enabling js, css images etc to simulate different conditions. You can outline highlights, common elements and links without title tags; images show sizes, alt tags and oversized images; forms enable you to manipulate form elements and submission methods; cookies enable you to add, delete and disable cookies; and there’s much more.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/60/
Developer Website: http://chrispederick.com/work/web-developer/

3. MeasureIt

This little extension allows you to draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/539/
Developer Website: http://www.kevinfreitas.net/extensions/

4. Auto Pager

Tired of clicking page links to visit the next page? AutoPager automatically loads the next page of a site inline when you reach the end of the current page for infinite scrolling of content. AutoPager works with a ton of site Digg, eBay, Amazon, Yahoo, YouTube, flickr, live, msn, myspace, wikipedia, ebay, taobao, Twitter and, of course, Google. This little extension works for forums as well.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/4925/
Developer Website: http://www.teesoft.info/

5. FireShot

FireShot create screenshots of web pages (entirely or just visible part). It also provides a set of editing and annotation tools, which let users quickly, modify web captures and insert text annotations and graphical annotations. This functionality is very useful for web designers, testers and content reviewers. The captures can be uploaded to FREE public screenshot hosting, saved to disk (PNG, GIF, JPEG, BMP, printed, copied to clipboard, e-mailed, sent to configurable external editor for further processing.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/5648/
Developer Website: http://screenshot-program.com/fireshot/

6. ColorZilla

With this little add-on you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can zoom the page you are viewing and measure distances between any two points on the page. It has a built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. It also support HSL color CSS3 attributes.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/271/
Developer Website: http://www.colorzilla.com/

7. Delicious

Delicious Bookmarks is the official Firefox add-on for Delicious, the world’s leading social bookmarking service (formerly del.icio.us). It integrates your bookmarks and tags with Firefox and keeps them in sync for easy, convenient access.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/3615/
Developer Website: http://delicious.com/help/quicktour/firefox

8. YSlow

When it comes to check the performance of a website I rely on YSlow; it analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/5369/
Developer Website: http://developer.yahoo.com/yslow/

8. WiseStamp

I just simply love this little add-on; it empowers my email signatures in Gmail, Google Apps, Yahoo! Mail, Hotmail or AOL… This enable you to easily customize your email signatures with your personal social profiles and allows you to add to each outgoing email dynamic content such as your latest eBay item, recent blog post, your latest tweet or a cause to promote. The recipients of your email will see the updated content of the Email App and will be able to also interact with it directly from the email (e.g. retweet or follow in the Twitter App or buy in the eBay App).

Get the Toolbar: https://addons.mozilla.org/en-US/firefox/addon/8206/
Developer Website: http://www.wisestamp.com