Archive

Archive for August, 2012

Why does my javascript fail in Internet Explorer?

August 14th, 2012

If you’re like me, you use Firefox or Chrome as your browser of choice for development. They’re both pretty web-standards compliant and they have nice developer tools. So, your javascript code is working perfectly and you test it in some other browsers…

It silently crashes in Internet Explorer! If you are using IE9, you hit F12 to look at the developer tools and track down the error, but it suddenly starts working perfectly! No Errors! You close the developer tools and it fails again. Huh?!

This is a common IE issue. Internet Explorer does not have a javascript console by default, so any calls made to the console will throw an error and crash the program. If you open the developer tools, then the console works and it stops throwing the errors. There are 2 basic solutions to this issue:

1) Comb through your code and remove all calls to the javascript console. Usually the problem is some random console.log() statement you added for debugging and forgot to remove.

2) The more elegant solution is to add some code that will stop the console from throwing errors in IE. Here is a snippet of code I often include at the top of my projects to fix the problem:

<script type="text/javascript">
  try {
    console //does the console exist?
  }
  catch(e) { //if not...
    console = {}; //create a console object for IE
    console.log = function() {}; //add a log method to the new console object
    //add other console methods here if you need them
  }
</script>

Note that this code only fixes console.log() calls. The javascript console has other methods that may need to be added to this script too. If you do some Googling around, you can probably find a nice little polyfill* that you can include in all of your projects that will take care of all the console functions.

*If you don’t know what a polyfill is, don’t feel bad. It’s basically a piece of code that inserts non-native functionality into javascript. In this case, the polyfill doesn’t actually do anything except prevent IE from throwing errors.

Disclaimer: there are some other javascript peculiarities to IE, so this may not be your problem, but ruling it out is a good place to start.

Top