Tuesday, July 8, 2008

Firefox Extensions for Web Development

In my last post, I listed a number of tools I use daily to help me develop software. In this post, I'm going to cover some essential Firefox extensions for doing web development. Firefox is a great browser out of the box, but adding a few extensions (or "Add-ons" as they've started calling them) can make it even better. There are extensions for just about any purpose you can imagine, but I'm going to focus on the ones that help developing and debugging web applications.
  • Web Developer. The name pretty much says it all. This add-on sits adds a new toolbar, with a ton of useful options, from outlining page elements, to viewing source in different ways, to viewing cookie information. Viewing cookies is something I've used quite a bit. When you select that option, it shows you a list of every cookie that was posted to the selected page, including their values, path and expiration. This is invaluable when trouble-shooting cookie-related issues.
  • Firebug. Firebug is similar to the Web Developer add-on, but it adds even more functionality. It's like having a debugger built in to your browser. You can edit, debug and monitor CSS, HTML and Javascript live in any web page.
  • JSView. This add-on lets you view external Javascript and CSS files easily. It adds an option on the right-click menu, and also in the status bar that lists all external Javascript and CSS files loaded by the current page. Selecting one brings it up either in the standard Firefox source viewer, or in an external application of your choice. This is great for checking out how somone else's page is put together.
  • IE Tab. As much as I love Firefox, I still have to make my apps compatible with IE. Rather than loading a separate instance, IE Tab lets me view my page in IE on a tab within Firefox. You can also configure it to automatically load specific sites in an IE tab instance, which can be useful for sites like MSDN or Hotmail, which function better in IE than in Firefox.
  • YSlow. From the description on the linked page: "YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites." This one requires Firebug to be installed. It gives you a list of things to check for to make your pages load faster.
These are the development add-ons that I'm currently using. I'm sure I'll add more over time, but just adding these few has made Firefox an excellent web development tool.

No comments: