Services Spotlight:

Essential Firefox Addons for Web Developers

Written By Corlew Solutions
Updated February 10, 2014
Published February 10, 2014
Why Corlew Solutions?

We write great software and provide amazing technical support. Contact us today if you need help with a software project:

It’s no secret that Firefox has great add-on and extension support. There are thousands of add-ons available on the Mozilla Addons page. If you’re a web developer it’s almost guaranteed you’re using Firefox in some capacity, even if it’s not your favorite browser. In this article, we present the best Firefox Add-ons for web developers. These are the add-ons we use ourselves, every-day on almost every project.

This article is continuously updated as we discover new tools. If you have suggestions, please let us know in the comments.

1. Web Developer Toolbar

This is a perennial top extension on everyone’s list. We use it mainly as a quick way to launch HTML, CSS and Link validators, but it includes a number of useful features. It also integrates a handy DOM Inspector tool which requires a separate download.

Installation/Usage::After restarting the browser, the Web Developer Toolbar should automatically appear at the top of the browser. If it doesn’t, try right clicking to the right of the last tab and make sure there is check mark text to Web Developer Toolbar.

Pro Tip: The toolbar itself takes up precious screen real estate. Fortunately, the Web Developer Toolbar includes an icon that can be pinned to the add-on bar. First, right click over the empty area just to the right of the last tab. Next, select the menu option for Web Developer Toolbar to hide the toolbar. Next, right click again to bring the same menu up, but this time choose the Customize… option from the popup menu. Finally, find the icon in the dialog that opens up and drag it to the desired location on the add-on bar.

2. Firebug

Firefox’s own developer tools are starting to chip away at the need to use Firebug, but we still end dropping into Firebug at some point in the day. There are also a number of handy Firebug extensions that add capability that is just too good to pass up. We tend to spend most of our time in the Net tab, script debugger and console.

Pro Tip: Check out the Firebug Extensions page for useful Firebug specific extensions. There are many specialized extensions that just might make your particular workflow more efficient.

3. ColorZilla

If you’re looking for an efficient way to “borrow” colors from an existing web page, it doesn’t get any better than ColorZilla. For the longest time, we just used the default eye dropper icon as a way to easily copy a color to the clipboard, but ColorZilla has so much more to offer. It’s CSS gradient generator is particularly awesome, as well as the DOM Color Analyzer.

Pro Tip: ColorZilla includes a Zoom menu if you need to make a targeted color a little larger. Firefox lets us zoom by holding the CTRL key down while we scroll the mousewheel so this may be a bit unneeded. However, Firefox currently doesn’t give us a clean way to get back to 100% if we’re using the orange Firefox button instead of the menu so ColorZilla’s Zoom menu might be a useful shortcut to make sure we’re back to 100% after all the zooming is done.

4. Google Analytics Opt Out Add-on

We want our Google Analytics data to be as accurate as possible. The Google Analytics Opt Out Addon gives us an easy way to block ourselves from being recorded on sites we develop. It’s available for all major browsers except IE 11 which will surely be rectified in the future. Install it in every browser you use, forget about it and move on.

5. FireRainbow

This is a nifty add-on that adds JavaScript highlighting to the Firebug script browser.

Installation/Usage:There’s nothing to configure, but you may have to restart firebug to see the changes take effect.

6. JS Deminifier

This is another great Firebug addon that unpacks minified JavaScript and formats it nicely. This comes in very handy when you need to dig into a minified JavaScript library like jQuery or Underscore.js. Ruby on Rails applications automatically minify code when they get deployed to production and JS Deminifier is a handy tool if you need to unpack and debug minified application JavaScript.

Installation/Usage: After installation, the addon will add a “JSD ON” or “JSD OFF” button to the status bar at the bottom of Firefox. Simply toggle the button and reload the page to change the state of your code in Firebug.

7. Tools Menu Button

Many add-ons install a menu on the Tools menu, but this menu is hidden if you’re using the orange Firefox menu button. This plugin will add a second orange button to your title bar so you can quickly access add-on tools

8. NoDoFollow

Need a quick way to find out if particular links on a page are rel=“nofollow”? NoDoFollow will tell you what you want to know. It colorizes the links on a page pink if they are nofollow links and light blue if you’ll get some SEO benefit from the link.

Installation/Usage: NoDoFollow adds a menu option to the Tools menu to turn the tool on or off. You can also right click over a page and find the same context menu.

9. app.telemetry Page Speed Monitor

This add-on installs a widget on bottom status bar which shows the total page load time. This is very handy when you want to get a quick idea about page speed without dropping into Firebug or some other tool. It’s always present and it gives a little more data when the button is clicked.

10. Page Speed

Page Speed is Google’s page performance analysis and recommendation tool. It does a great job of reviewing your website and presenting useful suggestions for making a web page load faster. Get it. Learn it. Love it.

11. YSlow

YSlow is Yahoo’s page performance analysis and recommendation tool. It does at very good job at pointing out ways to improve the load time of your webpages. Many people prefer Google’s Page Speed alternative, but we always give YSlow a look when we’re trying to understand performance improvement opportunities.

12. Empty Cache Button

This add-on lets you easily clear portions (or all) of your cache without destroying your session information. It does a great job of making sure you’re not looking at any cached information when trying to debug information on a page.

13. FireShot

This is comprehensive screen shot tool that just makes things easier. Sure you could Alt-PrtScn, drop in Photoshop, crop and annotate, but FireShot streamlines the process. One of the more useful features is the ability to copy an entire webpage even if it’s not fully visible on the screen.

14. Flagfox

Flagfox is one of those tools you might not realize you’re missing. It shows a small flag in the address bar that will tell you where the server is located for a particular website. If you click the flag, you’ll get more detailed information about the server location. We find this particularly useful when looking at competitors or trying to analyze a new clients web hosting situation without getting too involved.

15. RESTClient

If you develop RESTful API’s then this is a tool you’re going to love. In a nutshell it lets you specify a URL and Method (GET, POST, PUT,etc…) combination and look at the response from the server. The user interface is very well built and it’s very easy to use when we’re trying to debug a Web API.

16. SeoQuake

There are number of SEO addons and every good Web Developer should know something about SEO. Whether or not developers need to be aware of external link counts, page rank and all the other technical SEO Wizardry is another matter, but we all have clients that want to rank better and this is a useful tool to help analyze the basics.

Pro Tip: As with most SEO add-ons, we find the display a little overbearing to leave on all the time, so we usually disable the tool until we need to use it. Seo Quake installs an on/off toggle button in the bottom status bar to address just this issue.

We hope you found this article useful. If you see any mistakes, missing features or ways to improve it, please let us know in the comments below so we can update its contents. If you're willing to link to us, we would sincerely appreciate it!

Corlew Solutions is a Web Design and Web Application Development company based in Fairfax Virginia, minutes away Washington D.C. If you're looking for great web design from the Northern Virginia area or web design from the Washington D.C. area we can help. Contact Us today!

comments powered by Disqus