The more information you can get about what is going on under the hood, the faster you are likely to find the problem that is causing you to spin your wheels. I love information and there is nothing more satisfying than seeing the bytes, words and requests that you created with your code flowing beautifully from client to server and back again. The modern web tools allow single stepping JavaScript, css changes on the fly and fully transparent HTTP request debugging.

Many of my favourite tools are plugins to Firefox, which just makes sense. You are using Firefox, right? Of course I understand if you are using anything else, as long as it isn’t Internet Explorer. If you are Firefox-adverse, you might consider installing it just for these plugins.

First up - HttpFox. This plugin will show you the flow of requests between your computer and the server. Every time you hit a page or load an image in a page, every time you click in a form, even when your browser auto-completes a Google search you will see a request in HttpFox. You can see all the headers that were sent and the headers that were received and gain some insight into what is going on under the hood. I found this really useful when I was first learning how to send data to the server inside of a post request. If you want even more low-level insight into the traffic between you and the web server, I suggest WireShark. This is a standalone GNU tool that will expose all the communications between your computer and the outside world - dns resolutions and all!

Okay, so your web server has sent you a page… If only you could quickly change something on the page, or debug your javascript that should be modifying that paragraph. You can very easily do this with FireBug. With Firebug, you can see the current html, javascript and css files. You can also edit these files and view the in-memory version that javascript has modified. The Javascript windows feature breakpoints and other powerful debugging tools - at least more powerful that lots of alert(“hey, I got here”) statements!

For getting your css looking just right, I recommend Stylizer - it makes it possible to play with css, rather than getting frustrated. As as programmer who is always in a hurry, I don’t have time to do css unless I can get a lot done quickly. Its interface shows the current webpage and immediately reflects any updates that I decide to make to the styling. It treats simultaneously treats the css like a text file, while providing a very rich interface to interact with it.

Overall, having the right tools can turn web development from being a totally frustrating experience to the wonderful, interactive and rewarding activity that you expect.