The Problem
I use console.log() in javascript all the time for debugging. It's a great way to display errors without printing them on the screen. Sometimes I forget to delete them all before deploying live code. Come to find out that if even one console.log exists in your javascript, IE will stop dead when they see it and throw a small javascript error. They do not understand console.log unless the F12 developer tools are open.
One thing to keep in mind is that console.log will actually work if you have the IE developer tools window open, even if it's minimized to the bottom of the IE window. It will even work if you open the developer tools and completely close them. So everything will seem fine, but when a customer visits the site in IE7, they will run into errors. (IE7 does not include developer tools but they can be installed as an add-on) This is a huge problem!
The Solution
Fortunately solutions exist for this, courtesy of Arlo Carreon. You could of course remove all console.log method calls for production code, which you should do. But what if you forget one? That's where this solution comes in. Declare this function at the top of your JS:
var console = console || { log:function(){}, warn:function(){}, error:function(){} };
This will replace the console object in IE with empty methods for the usual console commands. No more javascript errors! I highly recommend you put this at the top of ALL of your custom javascript code. Now if only Microsoft would patch IE to allow for console.log() to fail silently if developer tools are not open!
Totally agree. Good post.