console.log() for Internet Explorer with Faux Console
Nearly every modern browser supports the console.log() command to print out data during debugging without having to resort to alert() and pressing enter until you go nuts. Of course Microsoft Internet Explorer does not, which is why I found myself getting false error reports from collegues when sending them code to check out (I naturally use Firefox with Firebug).
To change this situation I wrote a small JavaScript that simulates a console only when your browser does not support it. This means that you can use console.log() safely and even MSIE will show you the output in a small dynamically generated DIV on the page.
P.S. Robert, should I have called this “The only simulated debugging console you will ever need?”
February 14th, 2007 at 1:16 am
You can grab Firebug Lite (sorry, it’s hard to publish a link here) getfirebug dot com / lite.html It aims to fake the firebug console for browsers that don’t use this awesome extension.
February 14th, 2007 at 7:17 pm
Actually, I was just wondering if your script does anything that Firebug lite doesn’t do?
April 22nd, 2007 at 7:28 pm
Yes, his script IS useful over firebugLight… if you allow your clients to view your code as it’s being developed, nothing is more embarrassing than having to say “Oh, I forgot to take out some debug code, and you don’t have the extensions, so let me run back to the office and do that…”
Include this script and it will save you that headache.
April 24th, 2008 at 1:09 am
I wrote a post on redefining console.log() for browsers without Firebug (http://www.thetruetribe.com/2008/04/redefining-consolelog-for-browsers.html) but it is by no means as full-fledged as the solution presented here. Still, it follows the same general idea of creating a div element to present logging messages to the user. I also discuss the possibility of setting a “development_mode” flag for when you deploy code to production, in case you want to leave the logging statements in.
July 28th, 2008 at 3:50 pm
@codeninja,
You obviously haven’t used Firebug Lite – your response makes no sense whatsoever. Firebug Lite is a script that is included on the page and would not leave you in the situation you’ve described.
Maybe next time let the author answer his own questions?
October 22nd, 2008 at 1:24 pm
How come only this works
Testing
and not a simple
console.log(‘XXX’);
in the javascript tags?
October 22nd, 2008 at 1:25 pm
How come only this works
Testing
and not a simple
console.log(‘XXX’);
in the javascript tags?
November 16th, 2008 at 10:27 pm
The reason console.log(“xxx”) does not work is that this script doesn’t fully install the console until after the page is finished loading. I’ve created a variant that stores up the messages and outputs them once the page is loaded.
if(!window.console){
/* Faux Console by Chris Heilmann http://wait-till-i.com */
afterload_console={
init:function(){console.d=document.createElement(‘div’);document.body.appendChild(console.d);var a=document.createElement(‘a’);a.href=’javascript:console.hide()’;a.innerHTML=’close’;console.d.appendChild(a);var a=document.createElement(‘a’);a.href=’javascript:console.clear();’;a.innerHTML=’clear’;console.d.appendChild(a);var id=’fauxconsole’;if(!document.getElementById(id)){console.d.id=id;}console.hide();},
hide:function(){console.d.style.display=’none’;},
show:function(){console.d.style.display=’block’;},
log:function(o){console.d.innerHTML+=”+o;console.show();},
clear:function(){console.d.parentNode.removeChild(console.d);console.init();console.show();},
};
//added by Paul Prescod
window.console = beforeload_console = {
messages: [],
log:function(o){console.messages.push(o)},
afterload: function(){
messages = console.messages
window.console=afterload_console;
window.console.init();
messages.map(function(o){window.console.log(o)});
},
/*Simon Willison rules*/
addLoadEvent:function(func){var oldonload=window.onload;if(typeof window.onload!=’function’){window.onload=func;}else{window.onload=function(){if(oldonload){oldonload();}func();}};}
};
console.addLoadEvent(console.afterload);
}
console.log(“foo”)
console.log(“bar”)
console.log(“baz”)
November 30th, 2008 at 6:21 pm
Chris,
Thanks for your reply to my previous query. Now let me expose my ignorance even more.
My goal is to write a client script which will manipulate a MS-Word document using the “Word Object Model”. The choice of the proper scripting language is influenced by the following factors:
1) My personal computer is a Macbook Pro, thus giving me an Apple bias (Safari, Firefox, javascript, Applescript)
2) My work computer is Windows/XP, thus giving me a Microsoft bias (InternetExplorer, Firefox, Jscript, VBScript, .NET)
3) The “Word Object Model” appears to be relevant only in an IE environment, and unavailable in the Apple environment (seemingly, this is the deciding factor)
4) As a programmer and open source advocate, I like javascript over VBScript as a language
5) I would like to write a script that will run on either Windows or Mac-OS (probably this is impossible, given the basic debugging tools (alert/log/writeln/…) themselves are system dependent)
6) I can run scripts several ways, a) via browser (3 or 4 of them), b) via script engine (wscript, cscript), which differs between Win vs Mac.
So, my question are,
1) Am I pursuing an unrealistic goal?
2) Should I just settle for Jscript and Windows and IE?
3) Ok, I will RTFM, but which ones?
June 27th, 2009 at 9:59 am
thanx… I have been working for the past half an hour on this issue in the IE. It was showing ‘console is undefined’. Now I comment that line and its working fine on IE.
October 22nd, 2009 at 5:16 pm
The certain and possible losses associated with unilateral and multi lateral political actions need to be examined. ,