Yeah, yeah, I know this topic's kinda corny. But this is just a reminder for myself, and you reading this is simply incidental. :P

Anyway, I've used only FireBug for a long while, and I've started looking around for other useful addons to enrich my web development experience. So, here's my list of must-haves.

1. FireBug

Of course, no Web developer worth his/her salt should leave his FireFox (you are using FireFox, right?) unbugged. Firebug is a multi-purpose assistant that can help you a great deal with HTML, JavaScript, CSS, HTTP... you name it.

FireBug extension for FireFox: I can't imagine doing my frontend development without this tool!

The tool presents itself as an icon on the right side of the status bar. If there are JavaScript errors, it will become a red circle with an X and show the number of errors on the page. Clicking it will show you the exact places where the errors have occurred. Other than that, it will allow you to view the exact layout 'caused' by your CSS code, show you the cascades (inheritance and all) and will even allow you to edit the stylesheet to preview the changes before you retype them into your actual file.

2. YSlow

YSlow is not only a FireFox addon, but also a FireBug addon. It shows you how fast (or, more often, how slow) your frontend is performing, and gives your page grades. The grades are calculated based on various best practices recommendations, and you can see the recommendations by clicking the item.

YSlow, a FireBug companion: YSlow is for those performance freaks that want their site to be as fast as it can.

Although this addon is very useful, it's importance will shrink as you use it. Once you get familiar with the best practices YSlow relies on, you will not need the addon anymore. But it's still a good idea to have it around as a todo list of a kind.

3. HttpFox

One of the problems with web development is that you can't debug the HTTP communication between your server and browser the way you'd debug code. Between submitting your form, and getting the response from the server, a lot of things happen that you won't have a chance to see. But it still helps a lot if you can at least see the headers that get exchanged. HttpFox is what you're looking for.

HttpFox is to HTTP, what FireBug is to HTML: Another tool you will be addicted to, once you grasp its utility

The HttpFox interface is similar to that of FireBug, so people who like FireBug will appreciate it. The icon is in the status bar, just like FireBug, and the overall layout is similar too. The information it can display is fairly complete and neatly arranged into tabs: Headers, Cookies, Query String, POST Data, Content. Although most web application frameworks will let you see the exact same data in debug mode, this tool can do that in production environment and even on other people's websites.

4. Header Spy

If HttpFox is too heavy-handed for you, you can use Header Spy. It's a tool that simply displays the bare minimum of information as a tooltip. It's most certainly not an industry strength debug tool, but it still gives you useful infromation.

Header Spy a toy for web geeks: It's not a debug tool, but it's fun to have around

One thing I like about this tool is it shows the server serving pages in the status bar. As you browse the web, you can see what page is served by what server. That's the kind of geek trivia I enjoy very much.

5. HeadingsMap

Headings must be one of the most brutally abused HTML elements in the history of HTML. Web developers abuse them like they get some sort of high from it. But you've got to admit, it's both tempting and easy to do. I can't remember the last time I didn't mix up the heading hierarchy. Now I've found a perfect tool to help me out.

HeadingsMap is your Headings' Map: It'll be quite difficult for you to break the hieararchy with HeadingsMap watching over your sholder

This tool does one thing and does it right: shows your headings. If it sees a wrong hierarchical order (e.g., h2 without h1), it will highlight the item in red. That's all it does, and that's all I need.

6. Web Developer toolbar

Now, a lot of people are praising this one, but I have never used the extension extensively. It's definitely feature packed, it definitely has lots and lots of useful features, but at the end of the day, I guess it's just overwhelming to me.

Web Developer toolbar: It's not just a toolbar, it's a toolbox!

This heavy artillery is what you end up using when you get stuck. But other than that, you'll be just fine using FireBug. It can also be fun to use when you're digging aroung other people's work to find out how they did it.

7. Server Swithcer

If you need to switch between your development and production environments often, Server Swticher might be something you want in your FireFox. It lets you define pairs of development and production servers, and when you hit either of them, you get a nice little icon in your address bar that will take you to the other URL.

Server Switcher configuration dialog: Small, neat, helpful. That's your ideal extension right there.

Can't get enough, eh?

This is enough for me. If you need more, go to the Web Development section of FireFox addons site. You'll find plenty of other web development gadgets there.