Are You A Web Developer? Here’re Top 10 Firefox Add-Ons To Make Your Life Easy!

No matter which browser you love and you use most of the time in your personal life, when it comes to your life as a web developer, Firefox is your best companion along the journey!  

Firefox As Web Developer’s Browser

Firefox is known as web developer’s browser of choice for a number of reasons. Its support for DOM, CSS, SVG, XML and other standards make it primary browser for web developers 

But its extension ecosystem – its set of rich, developer friendly set of thousands of add-ons is what makes it so popular among developer.

And from these thousands plugins, here’re top 10 most useful add-ons that will be your great assistance while you continue to write beautiful code to develop innovation web apps!

1 Firebug

Doubtlessly, the best Firefox addon for any web developer! Firebug adds a set of rich tools to your browser. It allows you to debug your code, inspect HTML, CSS and DOM elements and tweak your HTML/CSS code in real-time within your browser screen.

Install Firebug

2 YSlow

As a developer, you have to often work to optimize the slow loading website to turn it into faster one. In such scenario, add-on like YSlow can be your life-saver tool that helps you figure out improvement areas. YSlow analyzes the site and tells you which elements of a website needs improvement and provides you suggestions for the speed improvement.

Install YSlow

3 Web Developer

Ever wanted to debug, edit and inspect your CSS code within the browser and in real time? The Web Developer add-on makes this possible! It allows you to edit your CSS elements or even disable them in browser window while you inspect and figure out the issues in it.

Install Web Developer

4 ColorZilla

ColorZilla is a beautiful add-on that gives you power of extracting the HTML or Hexa color code of any element on the browser window screen. Simply click on any element on a web page and ColorZilla will get you its hexa and HTML color code that you can directly copy paste in your css style-sheet.

Simple but powerful!

Install ColorZilla

5 FireFTP

FireFTP is your built-in FTP in your browser. This add-on is a browser based FTP that allows you to connect to your site’s FTP and transfer files in between from your browser window! This comes very handy especially in scenarios where your platform based FTP faces any crashes or conflict with firewall permission.

Install FireFTP

6 GreaseMonkey

GreasMonkey gives you power to change how the web page looks and functions. It allows you to run JavaScript codes in any webpage. it even allows you to write your own JavaScript in the browser. The add-on is really helpful for those developers who have to frequently work on scripting side.

Install GreaseMonkey

7 User Agent Switcher

The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser. You can switch your user agent from Firefox to any other browser or even mobile browser like Google Chrome for Android, from within your desktop Firefox using this add-on.

Install User Agent Switcher

8 Font Finder

Font Finder is yet another designer friendly tool after ColorZilla!  As the name suggests, it helps you figure out the name/type of the font being used on a particular piece of text that you have selected using this add-on. Just select the text you wish to know the font of and this add-on will tell you name of the used in the CSS style of that piece of text!

Install Font Finder

9 FoxyProxy Standard

FoxyProxy Standard add-on allows you to switch your Firefox’s proxy setting based on URLs pattern. This add-on takes out pain of manually changing the browser’s proxy setting and automatically switches proxy settings based on the loading URL and the switching rules you define in the setting panel.

Install  FoxyProxy Standard

10 Awesome Screenshot Plus 

Capturing, editing and saving screenshots from a web page is somewhat tedious task. And it becomes frustrating experience when you have to capture whole lengthy web page. What if you can capture and store and even edit a full, really long web page in seconds?

Yes! Awesome Screenshot Plus add-on allows you to capture screenshot of a portion of the page or even whole page in just one click! Not just this, it also allows you to edit it and do more, and save it locally on your system in seconds. Really, this is awesome!

Install Awesome Screenshot Plus

Bonus! 

Open With Photoshop 

Specially developed for graphics and web designers, this add-on, as name says allows you to open any image from browser in Photoshop in just one click. Just install this plugin, right-click on any image and choose open with Photoshop from its context menu and your image will be opened directly in Photoshop!

Install Open With Photoshop

Your Thoughts

I have tried to list out best 10 Firefox add-ons here that I think should make a list of top 10 add-ons. Do you have any other best Firefox Add-on for developers to share here? Let me know in the comment.

Thank you for taking your time in reading my blog, keep in touch!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s