It’s quite hard these days to figure out what’s wrong with your site at run-time. Things don’t render as you expect them, or something is wrong with headers etc. And the browser’s "View Source" usually just doesn’t do the job. So I thought I make a list of tools that are useful during web development.

  1. IE Developer Toolbar This is an awesome tool to use. you can fully inspect the DOM, view/modify CSS properties or even outline div elements, images and more. The toolbar works on IE 6 & 7. There is no support for IE 8 since this is already included and enhanced!!
  2. Visual Web Developer Express 2008 Not only will it let you develop web sites, but will also help with JavaScript intellisense and debugging.
  3. Fiddler This tool plugs as a proxy in your system settings. It can change your user agent string and display raw HTTP and markup from requests/responses.
  4. Last and my most favourite: IE8! yes, that’s right IE8 can be used as a development tool. It includes an integrated JavaScript debugger. This is part of the enhanced IE dev toolbar included. The toolbar will have all the existing IE7 version features and lots more although beta 1 is a bit poor. The current implementation also supports visual illustration of the selected elements positioning and lots of others. Although IE 8 renders in standards mode by default, it can emulate IE7 and IE5 as well. End-users can emulate IE7 using the "Emulate IE7" button (duh) but developers can force the browser to emulate a specific version through headers. More info in my next post.

The good thing is that they are all free. I hope these will do for now.