Firefox Extensions for Web Development
I use Firefox on a daily basis, not just for browsing, but as a vital part of my web development platform. The key to this is the excellent web development extensions that users have written for Firefox. Here are the extensions for Firefox that I cannot live without.
Web Developer
The extension that started it all. I did not use Firefox much until I found this. The Web Developer extension provides too many features to document here, but some notables are:
- Resize the browser window to represent different monitor resolutions.
- Display details for all of the fields in a HTML form.
- Outline block level elements.
- Disable JavaScript, CSS, or images.
- Validate the HTML against its DOCTYPE.
While the Web Developer extension provides the ability to validate your HTML, you still have to click menu item from the Web Developer tool bar to do it. The HTML Validator extension will validate your HTML automatically when you load the page. The validation result is displayed as an icon in the status bar. The extension also integrates with Firefox's source code view so you can easily see which lines of code do not validate and why.
IE Tab
While Firefox is my preferred browser, I always have to make sure my web pages work in Internet Explorer. The IE Tab extension adds an icon that allows you to view your current web page using Internet Explorer rendering. This is very useful for testing. The extension also allows you to define certain URLs that should be viewed in Internet Explorer. So if you use certain web sites that require Internet Explorer, this extension will allow you to switch automatically. Many people use this in order to use online banking web sites that required Internet Explorer.
Firebug
Firebug adds extra functionality useful for JavaScript debugging. I like the interface better than the default JavaScript console. In addition it allows you to view the source code for the page not based on the HTML source received from the server, but based on the DOM as the browser has rendered the page. This allows you to see elements added via JavaScript at run-time.
Tamper Data
The Tamper Data extension is a must for Ajax development. It allows you see all of the HTTP requests and responses, including those created by XmlHttpRequest object. It displays the content and headers of each request and response, which comes in handy when you are trying to figure why an Ajax request is not working. In addition, Tamper Data allows you to intercept and change the contents of HTTP communication. I have not used this feature yet, but I can see where this may come in handy.
Selenium IDE
One of the hot topics in software development in recent is automated testing. Like many other, I have had difficulty getting started with this technique. Enter Selenium IDE. Although not a unit test tool, it does allow you to record and playback browsing actions from within Firefox. In addition you can script tests on the page content that should be executed along with the script. If you have ever wanted to add some automatic testing for your web site, this is the place to start.
Load Time Analyzer
This is a new addition to my arsenal. It shows you every JavaScript event that fires while browsing. This includes HTTP request and responses for the images and CSS files used by you page. The Load Time Analyzer extension is useful to find the bottlenecks in your web page, whether the cause is bandwidth, number of HTTP requests, or client-side JavaScript processing.
Update: While I really like the Load Time Analyzer extension, I have found it clobbers my CPU, making Firefox respond much slower. Therefore I have uninstalled it.