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!
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.
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.
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
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!
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.
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
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
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!