A guide to efficient Internet Explorer testing

Posted: September 13, 2011 by yanenrogne in Programmation
Tags: , , , , , , , ,

Everyone in the web industry has one common enemy when building websites : Internet Explorer.
As new versions came out, most problems were solved but there are still many compatibility issues with previous versions of IE. We’re not here to bury our heads in the sand and ignore a vast user base coming from Microsoft’s official browser, the browser is installed by default with Windows and most people won’t bother upgrading/installing other browsers. We all know it’s a pain to test our websites on IE, since every single version isn’t acting like the others and they all have their particularities,. I hereby present you this guide that give you tips, ticks and tools to help you face that beast.

1. Testing in IE
First of all, if you have Internet Explorer installed on your computer, you should know that you can only have one version installed at once (must unsinstall 8 to use 7, or use a virtual machine). Fortunately I found out today one useful tool in Internet Explorer 8 (and newer versions) that you can use to switch the browser rendering to a IE7 one. This can be reached at Tools->Developping Tools (F12). In the toolbar, you can either switch the document mode or browser mode.

  • Browser mode:
    Renders the page as if a user would visit your website with the selected browser (IE7 for example).
  • Document mode: 
    Renders the pages with the default behavior of the selected browser of the current doctype of your page (IE7 not supporting HTML5 for example). Shortcuts for switching to another document mode are Alt + IE version (Alt+8 for IE8).
  • note: I’m using IE8 and in Browser mode I have “IE8 Compatibility view”, that means it will render the page with IE7 in browser mode and in document mode but will send a token to the browser that tells you’re still using IE8 (so it will ignore “if IE8” css conditions).

If you try to use a different browser and document, you might get awkward results, as it is not natural for a browser to do so, you may move along. It might also be the reason why people get different results on the same browser, my IE8 was set to a IE7 document mode by default, for some reason, I had to revert it back.

Source :  Microsoft’s official website

2. Testing in Firefox or Chrome

As a personal preference, I prefer using Firefox for developing websites because I have all these plug-ins and tools to help debugging. Chrome has also grown big in those plug-ins over time and has become pretty efficient. I want to introduce you to a plug-in called “IE Tab”, available for both Firefox and Google Chrome. The plug-in itself allows you to make a tab in your browser that will emulate IE’s page renderer so you can test whenever you want, with any IE version, directly inside your favorite browser (assuming it’s either FF/GC).

Download links:
IE Tab V2 for Firefox 3.5+
IE Tab for older versions of Firefox 
IE Tab for Google Chrome (seems like it doesn’t work on Some Linux-based systems though)

That’s it for now, I hope this little guide taught you something new and will help you to get a smaller headache when debugging for IE!

Share, comment, like, hug me if you think this was useful! Thanks for spreading the word! 

Edit : Typos, etc. 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s