Sunday, September 28, 2008

Can't get Firebug Lite working on IE?

Update, 12/08/2010 6:55:19 PM. This page is defunct. Try this one instead: A better way to handle debug logging in IE.

Update, 23/12/2008 11:44:05 PM. Added code from my own comments.

For those times when I cannot get Firebug Lite working in I.E. (or Chrome.. haven't tried Safari or Opera), I re-route my debug messages in I.E. to a text area by always calling this debug() method for my messages.

function debug(message) {
   if (typeof(console) != "undefined" ||
         typeof(console.debug) != "undefined") {
      console.debug(message);
   } else {
      if (document.getElementById("debugConsole") == null) {
         var textConsole = document.createElement("textarea");
         textConsole.id = "debugConsole";
         textConsole.rows = 10;
         textConsole.cols = 100;
         textConsole.readOnly = true;
         document.body.appendChild(textConsole);
         document.body.appendChild(document.createElement("br"));
         document.body.appendChild(document.createElement("br"));
      }
      document.getElementById("debugConsole").value += "\n" + message
   }
}

(From my comments.) Here is another alternative that provides proxies for some of the standard logging calls.

if (!window.console) {
 var textConsole = document.createElement("textarea");
 textConsole.id = "debugConsole";
 textConsole.rows = 10;
 textConsole.cols = 100;
 textConsole.readOnly = true;
 document.body.insertBefore(textConsole, document.body.firstChild);
 window.console = {
  log: function(message) {
   document.getElementById("debugConsole").value += "\n" + message;
  },
  debug: function(message) {
   document.getElementById("debugConsole").value += "\n" + message;
  },
  info: function(message) {
   document.getElementById("debugConsole").value += "\n" + message;
  },
  warn: function(message) {
   document.getElementById("debugConsole").value += "\n" + message;
  },
  error: function(message) {
   document.getElementById("debugConsole").value += "\n" + message;
  }
 };
}