As a programmer we strive to make our everyday lives easier. The very engine behind all innovation is lazyness, after all, if it weren’t for us being lazy, why would we use - and by that, have a need - for things like automobiles, computers and so forth?
I often meet people who aren’t aware of the many great tools that aid developers when debugging websites in Internet Explorer. I’ll mention a few of the most valuable ones that I use here.
If you know of any great tools that I’ve failed to mention, please let me know!
Internet Explorer Developer Toolbar
The IE developer toolbar places itself in the Internet Explorer toolbar area.
- Easily traverse the web page DOM.
- Quickly disable features like javascript, cookies, popup blocker, etc.
- Outline tables, cells, divs, images and so forth to easily be able to tell where your elements are on the webpage.
- Quick links for validation of HTML, CSS and various other parts of your website through the W3 validator.
- Resize your browser window to common resolutions.
- Easily clear the cache, cookies or even your session - so you won’t have to restart IE.
These are just some of the features the developer toolbar has, see a full list of features at the download page.
Fiddler
Fiddler enables you to catch incoming and outgoing HTTP requests and debug them before they’re sent or received. This enables you to follow the HTTP stream and debug possible problems. You can even set debug points and modify the requests and respones before they arrive at their destination. This is especially great if you’re developing applications that make requests behind-the-scene, like for instance, Flash applications that make HTTP requests themselves.
HttpWatch
HttpWatch is a more user friendly version of Fiddler. HttpWatch doesn’t have nearly as many features, you can’t set debug points or modify the requests/responses. What HttpWatch does have to offer is a much more slick and fast user interface, and direct integration into IE. Unless I have to use debug points I much prefer to use HttpWatch during my daily work. HttpWatch however is not free.
ieHttpHeaders
Suggested by Steve McCoole. ieHttpHeaders fall into the same category as Fiddler and HttpWatch, it gives a live display of the HTTP requests/responses. ieHttpHeaders only shows the headers, although both HttpWatch and Fiddler does this too, ieHttpHeaders is free (beats HttpWatch) and it’s neatly integrated into IE itself (beats Fiddler), so it definitely has value.
IE Powertoys for WebDevs
Don’t worry, although it says Internet Explorer 5, it works great in both IE6 and IE7. This WebDev powertoy enables a great feature in the IE context menu, “View partial source”. How many times have you not looked through a webpages source in Notepad, searching for a specific section? With the partial source view function you can simply highlight any part of the website and select “view partial source” and a window will open up, showing only that part of the webpages source, neat!
Inline Search
This tools mimics Firefox’s inline search function to near perfection. I for one love Firefox’s search function as it’s very quick to use and it doesn’t use a bulky modal dialog. This tool gives the exact same functionality in IE, it simply overwrites the usual search dialog.
FullSource
Suggested by Steve McCoole. FullSource enables you to view the actual current source code of the page you’re viewing. That is, not the source code that was originally served to IE, but the source code that IE is currently rendering, including any DOM manipulations caused by JavaScript, XSL transformations etc.
Non IE addons
Although the next two tools are not IE specific, I simply have to mention them as I use them to a great extent.
ColorPic
This is by far the best color picker tool that I’ve come across. It makes it a snap to pick colors with pixel precision, no matter if it’s from a webpage, application or windows itself.
JRuler
JRuler is exactly what the name implies, an onscreen ruler that can be used anywhere. It has great support for measuring in various units. Although there is a builtin ruler in the IE developer toolbar, this one also works outside IE.