Top 7 Firefox Add-ons (Extensions) for Web Development
Posted by Jon Lee in Web Development, tags: add-ons, extensions, firefox, top-list, web development
Firefox is a wonderful tool for web development. Not only is it the second most popular browser (next to IE of course), it includes many features out of the box that IE does not. The DOM inspector and Error Console are both invaluable when debugging webpages and scripts. However, the true power of Firefox lies in its ability to install user-created add-ons (a.k.a. Extensions prior to version 2). Of the thousands of add-ons available on the Mozilla Add-ons directory , there is bound to be at least one or two that will do what you want.In this post, I will list and discuss the best add-ons for web development.
Web Developer (homepage)
If there is one add-on you should get, its Web Developer. It adds a tool bar to window that does almost everything you need, including some of the functions of the other add-ons on the page (but not as specialized). Some of the features include Resize Window, so you can see what your page looks like in various resolutions, Edit Css/Edit HTML to let you edit a page’s CSS and HTML on the fly without having to change your actual site, upload it and refresh. It also has a ruler to measure page elements, ability to display/highlight certain objects on the page (tables, forms, hidden elements etc.). Basically, the most feature-filled web development tool I’ve ever seen. Thanks to Paul Bulter and Gary Lee for pointing this out to me.
IETab (homepage)
I always run into the issue of creating a beautiful site, only to have it look as dirty as a public bathroom when I fire up Internet Explorer to test it. I know I should be constantly testing in both Firefox and IE (and other browsers) while creating the site but sometimes I just can’t be bothered to. With IETab, there is no excuse now. A simple click will change the rendering engine to IE while staying in the same window. An alternative is the IE View Lite add-on that will launch the current page in a real IE browser window. This is also handy for visiting sites that (for some reason) only allow IE.
Firebug (homepage)
Firebug is in my opinion, the best debugging tool for web development, miles ahead of the built-in DOM inspector. It can browser HTML, CSS, JavaScript individually as well as create break points and step through code to debug it. It also has a network monitor so you can track the load time of your site and see where the bottlenecks are. There are tons more features and Jez does a better job of explaining it (with screenshots!).
FireFTP (homepage)
Not a pure web development tool, but it provides full FTP/SFTP functionality in a lightweight package that exists completely inside a tab. Wonderful for quick and dirty uploads.
Search Status (homepage)
A bunch of useful tools that sit in your status bar. It can give you the Alexa ranking of a page as well as the Google Pagerank. Other features include highlighting nofollow links, showing Whois info, showing backlinks and much more.
HTML Validator (homepage)
A goal that all web developers should strive towards is to comply with W3C standards. This handy add-on is a much better implementation of the Error Console. It determines the number of warnings and errors you have on your page and tells you in your status bar. Double clicking the icon opens up a window that highlights exactly where in the source code your warning or error is, and even tells you how to correct them! Ideally you would have this running from the beginning and fixing errors as they arise. Gotta love that sexy green checkmark!
Adsense Notifier (homepage)
If you have Adsense ads on your site, this gives you a way to check your revenue with just a glance. I know it is not a web development tool, but I find that it increases my productivity since it saves a lot of time compared to logging into the Adsense page. It can also be a good indication of a traffic spike on your site if you notice ad impressions are much higher than normal (albeit with a couple hours time lag).
Got any more add-ons you use to pimp out your Firefox for web development? Tell me about it in the comments!
Popularity: 5% [?]
Entries (RSS)