Firefox and web developers are good friend. So, if you are a web developer, chance that you also use this web browser as your primary tool to build your projects.

Firefox (and other web browsers) gives no tool in the term of web development because it’s designed for end users. However, there are many third parties that develop Firefox add-ons to make it easy for Firefox users finding additional features that Firefox don’t has, including the ones that aimed for web developers.

With web development-oriented add-ons, you can do a lot of things to ease your work such as inspecting a web page that you refer to or measuring a page width.

Here are the top 6 Firefox add-ons that will help your work in developing a beautiful sites.

1. Firebug

Firebug is one the most favorite add-ons used by nearly all web developers, including those working with Google Chrome as this tool is also available for that browser. Firebug has the capability to debug HTML source of a website and also change the CSS parameter to be previewed in the real time. Most importantly, this tool is very lightweight.

2. Web Devloper Toolbar

As its name, this add-on gives you a new Firefox bar containing several tools that you can use to support your work. Web Devloper Toolbar has functionality similar to Firebug, but with more features. You can use this add-on to view HTML source of a website, validating CSS, disabling images and more.

3. Fireshot

There are many tools that you can use to capture the screen. If you are working with Firefox to observe a specific site that you are interested in, you can capture it and send to your colleagues or some else that involved to your project. Simply right-click anywhere within the site and choose the FireShot menu. Or you can also use this tool by clicking on its icon at the top right of Firefox.

4. ColorZilla

Here the case. You stumbled on the cute site while surfing the web. You interested with specific color of that site and wondering the hexadecimal code of the color. ColorZilla will help you fixing the problem.

ColorZilla is the best tool for inspecting color of a site. Not only Firefox users to use this tool, those using Google Chrome also use the same tool for checking the hexadecimal code of a color. It’s really easy to use. Just click on the Eyedropper icon at the top right corner and hover your mouse anywhere within the site. Once found your desired color, just click on it and your hexadecimal code will be copied to the clipboard.

5. FireFTP

The protocol of FTP helps you uploading your files to you server quickly. There are several desktop based FTP clients that you can use. However, if prefer you to use web-based tool, you should try using FireFTP. You can add multiple websites in FireFTP and upload files from your computer to any of your website’s directory.

6. BuiltWith

If you ever wonder what technologies used by big sites such as CNN, National Geographic or The New York Times, then this add-on will be useful for you. With this tool, you can see almost everything behind a website, including web server, CMS, advertising model to analytic platform.

Once BuiltWith add-on is installed, a new icon will appear at the icon bar of your Firefox. When you click on the icon, a new pop up will appear at the right side of Firefox and voila!. Look what you get.