What's the correct way to write to the script

Question

I have this substitute for console.log defined in document.ready():

$(document).ready(function(){
  console.log("doc ready");
  if(typeof console === "undefined"){
    console = { log: function() { } };
  }
}

I thought IE was supposed to have this function available but, when I include the call above

  console.log("doc ready");

the output appears in the Firefox console but not in IE - in fact IE script execution breaks completely at this point.

What's the correct way to write to the console in IE?

Answer 1

console is for firebug.

You will have to install firebug lite to enable writing to console in IE.

Answer 2

IE6/7 doesn't have a console by default.

In fact, neither does Firefox -- it is provided by a plug-in called Firebug; if you use a copy of Firefox without Firebug installed, then you'll get errors trying to call console just the same as with IE.

IE8/9 do have a console.

Chrome and Safari do have a built-in console object, but don't count on it working in exactly the same way as Firebug or IE8.

Note that in all browsers, the console object may not be created unless the debug window is open. This means your code with a console.log call could fail in any browser, not just IE.

In your example, you are essentially creating a dummy console object if it doesn't exist, which is clearly intended to prevent browsers without a console from crashing if you call console.log(). But you're calling console.log() before that code is run, so those browsers without a console will crash on that line. You should therefore move your console.log("doc ready"); line down so it comes after the bit that detects whether console exists.

If you want the console to exist for IE, there is a version of Firebug called Firebug Lite, which can be run on any browser. If you run this, it will create the console object.

However, note that it can only be run after the page has loaded, so you'll never be able to get it to show console messages in the document ready function. Additionally, it may fail to create the console object if it already exists, so the code you have in document ready to create a dummy console object may prevent Firebug Lite from working correctly.

Finally, while using the console for is fantastic for debugging purposes, please make sure you never ship live code with calls to console.log, even if you plan to only use them for debugging purposes later. As you've seen already, they can cause a browser to stop executing the code if it doesn't have a console object, and there will be plenty of live users who don't have it, so beware of causing issues for live users: the best thing is to always ensure you've removed all your calls to the console before shipping your code.

Answer 3

The script-execution breaks because of wrong order of the instructions, this may be better:

$(document).ready(function(){

  if(typeof console === "undefined"){
    console = { log: function() { } };
  }
  console.log("doc ready");
}

If you first access the console before checking if it exists(and creating it if not), this results into an error.

Answer 4

Here's what I use to failover to firebug lite if there is no console available. This guarantees you'll get console of some description although they all work slightly differently so be wary.

function attachConsole(force) {
  if(force || typeof console === "undefined"){
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js';
    head.appendChild(script);
    return true;
  }
return false;
}