Firefox is the most widely used browser alternative to Internet Explorer, and provides a great amount of user flexibility and capabilities, backed by its large user/developer community. This developer community has provided many add-ons that can be used to better improve user experience and website development.
The following add-ons have provided greater usability, flexibility, and have played a key role in my website development process:
Ever wanted to find out what color was exactly being used on the web page or what tag was the color associated to? Then ColorZilla is the add-on you’re looking for. It provides the ability to find out the color being used on web pages by hovering your mouse right on top of the location. It will provide you with both the hex color code and the RGB code. You can also choose colors through the ‘color picker’ feature and save it. It also provides the X and Y access of a point on the web page based on where you place your cursor on the page and allows you to see the id/class tags being used in that section without having to refer back to the CSS.
Ever get frustrated when you needed to clear your cache and you always had to navigate to the tools … etc.? Here is an add-on that will cure your frustration, Clear Cache Button. Just like it says, it’s a button, that is added to your toolbar section so that it will clear directly the browser cache with one click.
You’re starting a download, and the traditional Firefox download window pops up every time. No problem, just close it. But when downloading repeatedly in one session you have to re-close the opening window over and over; thus the problem, it’s bothersome. So, here is an add-on that will compress and extend your downloading capabilities/experience on Firefox, Download Statusbar. This add-on will stop the window pop-up and allows you to compress to a nice, small indicator at the bottom of the window. It will also provide a convenient status bar which you can customize through its settings.
Always wanted to see the source code (html, css, jscript, etc.) and make changes to it, and see it change on the site without it having to go live. Here is the ultimate tool that allows just that. The Firebug tool has made it easier and more convenient for web developers to view and preview changes to sites they’re developing without having to make the changes on a live site. This tool allows you to localize your view right away when you hover the section you want to see with your cursor assuming Firebug is activated.
Firebug also has other add-on extensions that are more specific and are also very helpful:
Drupal for Firebug – adds capabilities for Firebug to better debug and see status for Drupal sites.
FlashBug - adds the ability to see the trace output for .SWF files.
FirePHP – adds the ability to enable you to log to your Firebug Console using a simple PHP method call.
FireCookie - adds the ability for Firebug to view and manage cookies in your browser.
Need a FTP client but don’t really know a good one or just don’t want to install another application? Try out the Firefox add-on, FireFTP, which integrates a FTP client right into the browser. This provides a nice flexible and simple GUI interface that won’t intimidate or confuse.
Browsing and going back-and-forth and multiple mouse clicks, can be annoying when developing a website. FireGestures will help your navigation experience by utilizing mouse gestures to make an action event happen on your browser, such as L gesture to open a new tab, N gesture to close, etc (these are customizable). There will be a small learning curve as you get comfortable using gestures, but the overall progress and movement through websites will be quick, improving and saving lots of time.
Opened up a page that only works with IE and need to switch over to IE quickly? Use IE Tab, an add-on that allows you to open up in Firefox an IE page rendering it with IE engine. Definitely cuts the time to open up IE itself and conveniently allows smooth transition. Also there is an enhanced version of the add-on called Coral IE Tab, which goes a step further and expands a bit more on IE Tabs capabilities.
Launchy is a very great tool that allows you to open up links, files or text documents from the web into an external application right away. This allows a great flexibility for advanced users who are looking for a great way to open external apps right from their browser. You can add additional apps that you can use, will take a bit of configuration and setting it up on the user-end but well worth the benefit.
Need to take measurement or find out the size of an image and just too lazy to look at the source code? Use MeasureIt; it allows you measure the images / the objects on the web page your viewing in you’re browser.
Tired of having to use “save link as” or finding the folder section to save to all the time? Save File To is the add-on you want to use. This add-on creates the “save file to” to the right-click menu; this will allow you to go through folders of your choice quickly and saves a history of your save locations for future re-use. This will cut down your folder search time to find the correct folder and save it.
Looking for a quick screen-shot of a part of a web page you’re looking at, or better yet a whole page screen-shot? Try Screengrab, integrated right into your Firefox browser as an add-on. This screengrab will let you take a screen-shot of the parts of the page you want and you can save them in several formats .jpg, .png, etc.
Tweak Network is an add-on that will increase your download rate and speed up your page load rate. This add-on will allow you to tweak Firefox’s configurations for the number of connections made to a site and network pipeline for the browser. You’ll need to do a little bit of do it yourself on the settings, but you’ll definitely will see an improvement in your page loads and downloads time. This will definitely help with some of the site with high traffic and have slow page upload time.
Need some extra tools to help you analyze, debug and build your website? Try Web Developer toolbar. This handy toolbar with lots of web dev tools will help you out a lot. It will provide you ways to outline and differentiate table elements / object elements, view source code, straight link to validate your HTML/CSS code. This is a nicely packed tool that covers many of the essentials.
The YSlow add-on is a site performance / evaluation tool, which tests your site against Yahoo’s Smush.it service. This will help you evaluate and guide your update to the site for slow performance issues.
10+ Useful Firefox Addons for Development
The following add-ons have provided greater usability, flexibility, and have played a key role in my website development process:
ColorZilla
Ever wanted to find out what color was exactly being used on the web page or what tag was the color associated to? Then ColorZilla is the add-on you’re looking for. It provides the ability to find out the color being used on web pages by hovering your mouse right on top of the location. It will provide you with both the hex color code and the RGB code. You can also choose colors through the ‘color picker’ feature and save it. It also provides the X and Y access of a point on the web page based on where you place your cursor on the page and allows you to see the id/class tags being used in that section without having to refer back to the CSS.
Clear Cache Button
Ever get frustrated when you needed to clear your cache and you always had to navigate to the tools … etc.? Here is an add-on that will cure your frustration, Clear Cache Button. Just like it says, it’s a button, that is added to your toolbar section so that it will clear directly the browser cache with one click.
Download Statusbar
You’re starting a download, and the traditional Firefox download window pops up every time. No problem, just close it. But when downloading repeatedly in one session you have to re-close the opening window over and over; thus the problem, it’s bothersome. So, here is an add-on that will compress and extend your downloading capabilities/experience on Firefox, Download Statusbar. This add-on will stop the window pop-up and allows you to compress to a nice, small indicator at the bottom of the window. It will also provide a convenient status bar which you can customize through its settings.
Firebug
Always wanted to see the source code (html, css, jscript, etc.) and make changes to it, and see it change on the site without it having to go live. Here is the ultimate tool that allows just that. The Firebug tool has made it easier and more convenient for web developers to view and preview changes to sites they’re developing without having to make the changes on a live site. This tool allows you to localize your view right away when you hover the section you want to see with your cursor assuming Firebug is activated.
Firebug also has other add-on extensions that are more specific and are also very helpful:
FireFTP
Need a FTP client but don’t really know a good one or just don’t want to install another application? Try out the Firefox add-on, FireFTP, which integrates a FTP client right into the browser. This provides a nice flexible and simple GUI interface that won’t intimidate or confuse.
FireGestures
Browsing and going back-and-forth and multiple mouse clicks, can be annoying when developing a website. FireGestures will help your navigation experience by utilizing mouse gestures to make an action event happen on your browser, such as L gesture to open a new tab, N gesture to close, etc (these are customizable). There will be a small learning curve as you get comfortable using gestures, but the overall progress and movement through websites will be quick, improving and saving lots of time.
IE Tab
Opened up a page that only works with IE and need to switch over to IE quickly? Use IE Tab, an add-on that allows you to open up in Firefox an IE page rendering it with IE engine. Definitely cuts the time to open up IE itself and conveniently allows smooth transition. Also there is an enhanced version of the add-on called Coral IE Tab, which goes a step further and expands a bit more on IE Tabs capabilities.
Launchy
Launchy is a very great tool that allows you to open up links, files or text documents from the web into an external application right away. This allows a great flexibility for advanced users who are looking for a great way to open external apps right from their browser. You can add additional apps that you can use, will take a bit of configuration and setting it up on the user-end but well worth the benefit.
MeasureIt
Need to take measurement or find out the size of an image and just too lazy to look at the source code? Use MeasureIt; it allows you measure the images / the objects on the web page your viewing in you’re browser.
Save File To
Tired of having to use “save link as” or finding the folder section to save to all the time? Save File To is the add-on you want to use. This add-on creates the “save file to” to the right-click menu; this will allow you to go through folders of your choice quickly and saves a history of your save locations for future re-use. This will cut down your folder search time to find the correct folder and save it.
Screengrab
Looking for a quick screen-shot of a part of a web page you’re looking at, or better yet a whole page screen-shot? Try Screengrab, integrated right into your Firefox browser as an add-on. This screengrab will let you take a screen-shot of the parts of the page you want and you can save them in several formats .jpg, .png, etc.
Tweak Network
Tweak Network is an add-on that will increase your download rate and speed up your page load rate. This add-on will allow you to tweak Firefox’s configurations for the number of connections made to a site and network pipeline for the browser. You’ll need to do a little bit of do it yourself on the settings, but you’ll definitely will see an improvement in your page loads and downloads time. This will definitely help with some of the site with high traffic and have slow page upload time.
Web Developer
Need some extra tools to help you analyze, debug and build your website? Try Web Developer toolbar. This handy toolbar with lots of web dev tools will help you out a lot. It will provide you ways to outline and differentiate table elements / object elements, view source code, straight link to validate your HTML/CSS code. This is a nicely packed tool that covers many of the essentials.
YSlow
The YSlow add-on is a site performance / evaluation tool, which tests your site against Yahoo’s Smush.it service. This will help you evaluate and guide your update to the site for slow performance issues.