Ugrás a tartalomhoz

Fejlesztés, tanácsadás, tárhely, hoszting Fejlesztés, tanácsadás, tárhely, hoszting: Wish Internet Consulting

Firebug vs. Internet Explorer

While Firebug is a great extension for debugging JavaScript, developing an AJAX (web) application needs testing and profiling on Internet Explorer and other browsers, too. Here you are, the Firebug (compatible) console on Internet Explorer. Don't expect for a big thing, but it was so useful for me, that I decided to share it.

Prologue

Currently my main projects are AJAX development, so it's very important for me to collect as much useful developer tools, as I can. Firebug is best of them, and a really useful friend. Thanks Joe!

I think Firebug's main problem is that it's related to Firefox. It's very-very useful for debugging JavaScript code, but impossible to debug it on Internet Explorer. I have a nice AJAX project (a special kind of search engine for the man in the street - coming soon), and it was a challenge to optimise the code on Explorer, because unfortunately it was 20x slower than on Firefox. Firebug's console.time and console.timeEnd functions are a great idea, and I used them a lot on Firefox, so I decided to trying to convert it to an includable JavaScript "library".

The code

So, here it is: the code that tries to imitate Firebug if there's no Firebug or it is disabled. Not tested, but it should work on other common browsers, too. 

if (!window.console) {
  window.console = {
    timers: {},
    openwin: function() {
      window.top.debugWindow =
          window.open("",
                      "Debug",
                      "left=0,top=0,width=300,height=700,scrollbars=yes,"
                      +"status=yes,resizable=yes");
      window.top.debugWindow.opener = self;
      window.top.debugWindow.document.open();
      window.top.debugWindow.document.write('<html><head><title>debug window</title></head><body><hr /><pre>');
    },

    log: function(entry) {
      window.top.debugWindow.document.write(entry+"\n");
    },

    time: function(title) {
      window.console.timers[title] = new Date().getTime();
    },

    timeEnd: function(title) {
      var time = new Date().getTime() - window.console.timers[title];
      console.log(['<strong>', title, '</strong>: ', time, 'ms'].join(''));
    }

  }

  if (!window.top.debugWindow) { console.openwin(); }
}

Just save it to a .js file, include it into your project, and you won't have problems with logging anymore. It's not just useful because you can log with it on Explorer, but you don't have to check if the console object is available, it will be there.

Currently, it doesn't give you the full power of Firebug of course, but I really recommend it, if you're not developing your JS code just for Firefox.

This code is public domain, but I'll say thanks for mentioning me and this site, if you use/change/like it.

András Bártházi
Wish Internet Consulting