Top 7 Firefox extensions for web developers
written by craig, 4 March 2007
Firefox has revolutionised the lives of web developers. It provides a great development environment and I’d credit Mozilla for the growth in Web2.0 systems, AJAX, and DOM scripting.
High-level client-side development has been possible for many years, but it wasn’t easy. Internet Explorer provides few tools: how many times have we experienced bizarre JavaScript errors such as Object not an instance of an object at line 0. Netscape 4.x did have a JavaScript console, but the browser was awful. (Whilst Microsoft was blamed for some dubious anti-competitive activities, IE was a far superior browser to Netscape and deserved much of its market share).
However, now we have Firefox and it gives us the tools we have been praying for! Here is my list of favourite extensions for web developers:
1. Firebug
If you are lost on a desert island and only have enough bandwidth to download one extension, make it Firebug! I cannot do it justice in one paragraph, but it offers an array of fabulous tools such as: a DOM inspector, style and layout analysers, a JS console and debugger, an AJAX request/response analyser, a download profiler, script performance monitoring, and more.
Firebug does a lot, so I’d recommend you disable it when browsing the web. It allows you to block or allow certain websites.
2. Web Developer Toolbar
Long before Firebug, WDT was the extension of choice for developers and it’s still worth installing. There are too many features to cover here, but it allows you to examine and change CSS, JavaScript, images, cookies, HTML elements, forms, frames and more. You can easily resize the browser, configure settings, and validate your code with a couple of clicks.
The WDT has been so successful, that it’s been copied for Opera and Microsoft have even created an IE version. The original is still the best.
3. Console2
This extension allows you to modify how the console shows or hides errors by type, severity, and domain. If use JavaScript libraries such as Prototype, or APIs such as GoogleMaps, you can allow or block domains where you have no control of the code.
4. HTML Validator
There are plenty of online HTML code validation systems, but having one embedded in Firefox is very useful. The extension can also report accessibility issues and code warnings.
5. View Dependencies
Firebug is resource-hungry, so I often use this extension to view which scripts, stylesheets, and images are used. It integrates in to the standard Page Info dialog.
6. DOM Inspector
This is provided with Firefox (choose the advanced installation). It can be a little bewildering at first, but it’s handy when you want to see if a DOM effect has been applied or just to remind you which properties and methods are available for a particular node.
7. IE View Lite
As conscientious developers, we must test our sites in a variety of browsers, and IE is still the most dominant on the web (although the situation may be changing). IE View and IE View Lite make the process a little easier.
I can’t finish this article without mentioning some of the other extensions I have installed…
8. Tab Mix Plus
TMP is the one extension I can’t live without. Although Firefox 2 has plenty of tabbing features, TMP makes it so much better. Highly recommended for you power tabbers!
9. Adblock Plus
Many web development sites are plastered with irritating adverts and flashing graphics (are you reading, DevShed?!) This extension makes pages a little easier on the eye.
10. OpenBook
I bookmark a lot of sites, and this extension gives you far more control. Having the folder tree permanently shown has saved me hours!
11. Locate in Bookmark folders
Searching my 2MB bookmarks file is great, but it’s often useful to find the folder where I put a bookmark.
12. Server Switcher
Just like it says on the tin, this extension allows you to switch between development and live web servers with a single click.
New Firefox extensions are being developed every day, so please let me know if I’ve missed any…
- categories: all popular, web browsers, web development
- trackback: http://www.optimalworks.net/blog/2007/web-development/firefox-extensions-developers/trackback
- bookmark: del.icio.us, digg, facebook, twitter, reddit, Furl, Spurl, Blinklist, Slashdot, Technorati, Yahoo!