Coding Horror

programming and human factors

Firefox as an IDE

Although I prefer IE7's native speed and feel for day-to-day browsing chores, there's no doubt that Firefox is my primary web development IDE.

Whenever I need to troubleshoot HTML, CSS, or JavaScript, I immediately reach for Firefox. That's primarily because of two incredibly powerful developer extensions for Firefox:

1. Web Developer Extension

Firefox Web Developer Extension screenshot

WDE has lots of useful features, but the most wonderful thing about WDE is that everything is editable in real-time. Edit the CSS, edit the HTML, and watch your changes take effect as you type. It's like magic.

2. Firebug

Firefox Firebug screenshot

Firebug is a richer tool than WDE; it goes far beyond real-time editing of HTML and CSS, and delves deeply into profiling and debugging JavaScript. It also offers metrics on download time and download order over the wire. I highly recommend checking out the Joe Hewitt Firebug power user demo movie to get a sense of its full feature set.

I can't imagine debugging a web app without these two essential tools, which transform Firefox into the Visual Studio of browsers. It'd be akin to writing a .NET application in Notepad. In fact, I feel so strongly about the utility of these extensions that I'm stopping to donate $10 to each project, right now. This is part of my ongoing monthly contribution to small software vendors.

If you haven't used these tools yet, I envy the experience you're about to have. Download them both and start experimenting. If you have used Firebug and WDE, I encourage you to share your favorite tips in the comments.

Written by Jeff Atwood

Indoor enthusiast. Co-founder of Stack Exchange and Discourse. Disclaimer: I have no idea what I'm talking about. Find me here: http://twitter.com/codinghorror