Invaluable IE Addon Tools

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.

kick it on DotNetKicks.com


Comments

Steve McCoole | Nov 20th, 2006, 9:04 PM

I'd add the following to your already great list:

ieHttpHeaders - displays headers live as they are sent and received. http://www.blunck.se/iehttpheaders/iehttpheaders.html

ieDocMon - see event sinks and sources as they fire. http://www.cheztabor.com/IEDocMon/index.htm

fullsource - displays the complete source from the IE dom model so you can see the result of DOM manipulation by Jscript, etc. Good if you need the whole page as the browser currently sees it. http://www.thundermain.com/FullSource.html

EuGeNe | Nov 21st, 2006, 8:26 AM

Thanks for mentioning Inline Search on your blog. You seem to be very much into web development tools integrated to IE. Maybe you'll be interested in our latest add-on Companion.JS [http://www.ieforge.com/CompanionJS] a simple yet powerful JavaScript tool for IE users.

Mark S. Rasmussen | Nov 21st, 2006, 9:20 AM

Thanks for the suggestions!

@Steve
I've decided not to include ieDocMon as I believe the IE DevToolbar contains this functionality as well as a lot more, so I'd rather prefer to have just one of the tools. The other two seems like great addons!

@EuGeNe
Thanks for dropping by, and kudos for offering Inline Search for free, it's a great tool! I see great potential for CompanionJS, though what I would really like to see in a tool like this was for it to simply show the complete markup, coloring/marking the exact location of the error together with an error description. Currently it gives you a stack trace which is nice, but if my problem warrants a stack trace, I'll probably use Visual Studio / Script Debugger. My primary pain is when there's an error in some weird line in the middle of my page and I have to browse around the markup to find that one line with the error. I'm not only interested in the failing script itself, usually I'll want to see the surrounding markup as well. I'll be following the future development :)

Jen | Apr 22nd, 2007, 8:15 AM

Wow, lots of tools I wasn't aware of. Thank you so much for sharing, I'll give them a try!

wojtek | May 11th, 2007, 1:04 AM

great job

Another http traffic analyzer | Oct 16th, 2008, 8:49 PM

The price for HttpWatch starts from $395, there are some other good http analyzers. For example http debugger ($50) http://www.httpdebugger.com or fiddler (free) www.fiddlertool.org.

Deenanath | Mar 7th, 2009, 2:35 PM

we don't any Addons for javascript tracking something like Firefox error console.
If found please let me know... :)

Thanx in advance

vijay | Jul 13th, 2009, 9:02 PM

Do you know of any addons that I can use to set the httpheaders. Like firefox has "Modify headers" which I can use to set the headers.

thanks

Add comment

After you have posted a comment, an email will be sent to the provided email address. Before your comment is activated, you will have to click the confirmation link within the email.

Name:

Email (only used for validation):

Website (optional):

Message:

Notify me when new comments are added:

Please type the following letters into the box below:  

Post!