Debugging and Testing in Internet Explorer Made Easy5th of Mar 2010 - Samuli Hakoniemi

It’s somewhat usual to leave the testing with Internet Explorer until the end of the project. This is quite acceptable when you’re dealing mainly with layout issues. But when you’re building a web application with loads of features, there are several issues to struggle with: constant debugging, client-side performance, proprietary bugs and so on. However, getting your hands dirty with IE doesn’t always feel as comfortable as with other browsers. In this article, I’m going to list and review different set of tools, which will help you and make your debugging and testing process in Internet Explorer much more enjoyable.
This article is a general overview of different tools and resources that are available for IE. Unfortunately it’s not providing any detailed information on how to use these tools properly. But I still hope this article offers you a good start. This article is split into following topics:
  1. Browser Packages – different IE browser packages
  2. General Debugging Tools – most common debugging tools
  3. Performance Testing Tools – excellent tools for performance testing
  4. Other Resources – additional resources worth of checking

Browser Packages

Browser Packages The first step is to install all the common versions of Internet Explorer (IE6, IE7, IE8). There are several options available and I’ll review four of them.

Utilu IE Collection

My personal recommendation is Utilu IE Collection. Don’t be scared, it’s very reliable (despite the appearance of website). Utilu IE Collection contains multiple IE versions, which are standalone so they can be used at the same time. The main reason I recommend this package is because the browsers it provides are very stable. Utilu IE Collection also includes the Internet Explorer Developer Toolbar.

BrowserSeal.BrowserPack

If you’re in need of older versions of other browsers, I recommend installing BrowserSeal.BrowserPack. It uses the Internet Explorer Collection mentioned above, but in addition it allows to install browsers like Safari 3 and Opera 9. Browsers provided in BrowserSeal.BrowserPack are very stable and I haven’t encountered any problems.

IETester

IETester contains several advantages compared to other packages, like opening different versions of IE into tabs. IETester is provided by DebugBar and they’re also responsible for providing excellent debugging tools like DebugBar and Companion.js (both reviewed later in this article). However, IETester still (v0.4.2) feels quite unstable and I’ve encountered some contradictions while debugging. But I’m quite convinced these kind of issues gets fixed sooner or later and therefore keep IETester in my armament.

Microsoft Expression Web SuperPreview

Microsoft Expression Web SuperPreview is a stand-alone application and part of Microsoft Expression Web 3 product. Mainly, it can be used for viewing the pages side by side on IE6, IE7 and IE8. In my opinion, this application doesn’t provide any value for debugging and testing. It’s targetted for web design, offering the possibility for swift visual overviews and comparing layouts between different IE versions.

General debugging tools

General Debugging I’m quite certain you’re using Firebug on Firefox. And maybe you’re aware of Firebug Lite and already using it. Still, there’s a good chance that you’re wondering how to debug in Internet Explorer.

Firebug Lite

You might be already aware of Firebug Lite. If not, read further. Firebug Lite is a JavaScript file you can insert into your pages to simulate some Firebug features in other browser than Firefox. It doesn’t affect or interfere with HTML elements that aren’t created by itself. I have to say I’m not that big fan of Firebug Lite. First of all, many core features of console are already implemented in other browsers. Second, it’s not always working properly. I’ve personally encountered some problems especially with IE and therefore I never count solely on it. Still, it’s a must. Go ahead and start using it, if you still haven’t.

IE Developer Toolbar

You may be familiar with Developer Tools for IE8. Well, IE Developer Toolbar is practically the same tool for IE6 and IE7. And it’s provided together with IE Collection by default. IE Developer Toolbar is easy to use and offers a broad set of options for general debugging. It can be compared to Web Developer add-on for Firefox.

DebugBar

All the features you’re missing from Developer Toolbar, can be found in DebugBar. In most cases, when you need to find something out of the document, this can be done with DebugBar. It’s very fast and reliable. If I had to describe DebugBar in three words, I would definitely say “it just works!”.

CompanionJS

Companion.js integrates with IE and it can be briefly described as a simplified version of Firebug. Like I mentioned before, I’m not that favor for Firebug Lite on IE, and Companion.js feels much more comfortable for basic-level console logging and error reporting. However, there are two clear disadvantages in Companion.js: 1) it doesn’t support methods like console.dir() yet, and 2) it causes occasional breakdowns with other development tools for IE.

Performance Testing Tools

Performance Testing Client-side performance testing and optimization is a practice that hasn’t “existed” very long in Web Development. I mean it hasn’t been getting a lot of attention until recently. As you might know, Internet Explorer (especially IE6) doesn’t perform as good as many other browsers. I was actually quite surprised when I started testing performance with IE that even very small things can really affect on performance. I’m reviewing couple of performance testing tools that are also possible to implement in any browser, not just in Internet Explorer.

dynaTrace AJAX

If you’re using Speed Tracer on Google Chrome, then you’re going to love dynaTrace AJAX. Like the name says, it’s meant for diagnosing and tracking AJAX and client-side scripting perfomance issues. But in addition, it offers valid tools for tracking rendering (painting) issues and network load in general. dynaTrace AJAX isn’t the easiest tool to take in proper use. I was bit troubled on how to demonstrate this tool or prove the capabilities in it. Fortunately, my colleague posted a link to an article, which solved the problem: How to Speed Up sites like vancouver2010.com by more than 50% in 5 minutes. dynaTrace’s blog contains many more resources how to use this powerful tool. Read them, install dynaTrace AJAX and tackle all those nasty perfomance issues that freezes up your Internet Explorer :)

MySpace’s Perfomance Tracker

I’d say the name of this application is a bit distracting. But MySpace’s Perfomance Tracker, or “msfast” (project home) is a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages. It’s very efficient tool for tracking loading and rendering issues, and in addition, it provides the validation results either in YSlow or MySpace’s own ruleset. I had some problems when I tried to install Beta. But when I first installed the alpha version and afterwards upgraded it to the beta version, it started working properly.

JSLitmus

JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests. I really recommend JSLitmus for testing performance of your Javascript in general. JSLitumus really provides additional value in Internet Explorer. As generally known, there are surprising Javascript issues that really can cause performance hit in Internet Explorer. And by creating even simple testcases, you’ll probably find the actual troublemakers.

Fiddler2

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language. To be honest, I haven’t use Fiddler a lot. Mostly because performance issues I’ve encountered related to traffic on website has always been solved with another tool (in another browser). But Fiddler really provides a good and broad insight what’s actually happening between the browser and the server and offers a worthy set for tweaking details.

Other Resources

While writing this article I encountered a tool called IEInspector. It’s chargeable, but there’s a free trial version available. I didn’t have enough time to evaluate it, but you can always give it a try. There’s also a listing at Microsoft Window’s website called Internet Explorer 8 Readiness Toolkit, which is described as a list of convenient development and test tools to help test and modify applications to run on Internet Explorer 8. There are probably other tools and resources that I’m probably not aware of. If you know good tools or resources for debugging and testing in Internet Explorer, go ahead and leave a comment.

32 thoughts on “Debugging and Testing in Internet Explorer Made Easy

  1. Pingback: Debugging and Testing in Internet Explorer Made Easy | samuli … | Chrome OS Blog

  2. Great article! This will make my IE debugging certainly easier.

    I don’t have experience with Fiddler, but I use Charles practically every day (http://www.charlesproxy.com/). Wonderful features, It does not have performance problems. It might run out of memory if you keep it running for a long while, but then it notifies you and just stop recording.

  3. Pingback: designfloat.com

  4. Melvin on said:

    Nice overview, will give Browserseal browserpack a try

  5. Pingback: Debugging and Testing in Internet Explorer Made Easy | Dev Loom

  6. Hi – Great Article
    I am working for dynaTrace and I am in charge of the dynaTrace AJAX Community and am always looking for feedback in how to make our FREE tool better.
    Therfore I would be interested in learning more about your initial challenges. Learning from users helps us to make the tool better. Feel free to send me an email or provide your feedback on the dynaTrace Community Pages

    Thanks a lot!!

  7. Alexander on said:

    I tried Internet Explorer Collection, but sometimes its page rendering differed from original IEs. I had no time to figure out the reason and passed to IETester.

  8. Viljami on said:

    Great article, but one little glitch: I’d suggest using multiple virtual machines for testing (or similar setup) rather than that “IE Collection” because rendering can differ quite a lot in some situations between that setup and the original IE’s. (as Alexander above has previously pointed out)

  9. Melvin on said:

    Can you provide an example of such rendering inconsistencies between browsers from IE collection and “native” ones ?

    This is very strange as browsers from IE collections are exactly the same as the native ones (apart from some hacks, but these do not affect the rendering – they either work or they don’t).

    Personally, I never saw any such inconsistency and I hate using virtual machines – it is just so cumbersome and takes so much time, while with IE collection there are tools that can be used to automate the testing routine.

  10. Pingback: links for 2010-03-09 at DeStructUred Blog

  11. Pingback: Elsewhere, on March 10th - Once a nomad, always a nomad

  12. Pingback: Debugging and Testing in Internet Explorer Made Easy | samuli.hakoniemi.net « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  13. Pingback: Debugging and Testing in Internet Explorer Made Easy | samuli.hakoniemi.net : Popular Links : eConsultant

  14. Samuli Hakoniemi on said:

    Thank you everyone for feedback.

    It’s obvious that I should’ve mentioned virtual machines as a solution. That’s truly the way of getting most reliable results. However, I targetted my post for reviewing external tools and resources, and therefore “forgot” to mention VMs.

    Andreas – I’ll reply and send feedback to you personally as soon as possible.

  15. Pingback: Debugging and Testing in Internet Explorer Made Easy | samuli.hakoniemi.net » Web Design

  16. Great article. Thanks for writing this Samuli.

  17. Thank you for reviewing BrowserSeal!

    Please note that in addition to free BrowserPack package we have a commercial browser screenshot application that uses all these standalone versions and therefore has the advantage of speed, ease of use and well… price, compared to the competition.

    Please check it at http://www.browserseal.com

  18. Pingback: ASP.NET 3.5 Debugging Using Visual Web Developer Express 2008 | DevBlogr

  19. Pingback: links for 2010-03-11 « riverrun meaghn beta

  20. Pingback: delicious Links: 12. March 2010

  21. Pingback: 2010-03-06 유용한 링크 | We are connected

  22. Pingback: LUTs: Lists of Useful Things | In All Reality

  23. Pingback: Bookmarks vom 11.03.2010 bis zum 16.03.2010

  24. Pingback: CSS Chops » Debugging and Testing in Internet Explorer Made Easy

  25. Pingback: Różności o JS « Wiadomości o technologiach IT

  26. Pingback: Debug internetexplorer | Kiibouyanrunlu

  27. Tapan on said:

    Hi,
    There is mention that you had problems with MySpace’s Performance Tracker (Beta version) and then you downloaded alpha version. I am too having same problem with Beta version. Could you please provide the link for downloading Alpha version.

    Thanks in advance.

  28. Samuli Hakoniemi on said:

    I don’t think it’s available any more. Beta version is from three years back, so I’m not sure whether it’s either very valid option for performance tracking.

  29. joseph on said:

    Thanks for this post, i will try that.