I have taken to the practice of the following before DOM load:
(function(window, undefined){
var debug_print = (location.search.indexOf('debug') != -1);
if(window['console'] == undefined){
var _logs = [];
var _console = {
log : function(){
_logs.push({'msg':Array.prototype.slice.call(arguments, 0), 'type':null});
this._out();
},
warn : function(){
_logs.push({'msg':Array.prototype.slice.call(arguments, 0), 'type':'warn'});
this._out();
},
error : function(){
_logs.push({'msg':Array.prototype.slice.call(arguments, 0), 'type':'error'});
this._out();
},
_out : function(){
if(debug_print && typeof this['write'] == 'function'){
this.write(_logs.pop());
}
},
_print : function(){return debug_print;},
_q : function(){return _logs.length;},
_flush : function(){
if(typeof this['write'] == 'function'){
_logs.reverse();
for(var entry; entry = _logs.pop();){
this.write(entry);
}
}
}
}
window['console'] = _console;
}
})(window)
and this after domload (place it at the end of the body tag):
(function(window, undefined){
if(window['console']){
if(console['_print']){
var console_pane = document.createElement('div');
console_pane.id = '_debug_console';
document.body.appendChild(console_pane);
console.write = function(log){
var msg = [new Date(), log.msg].join("$/> ");
var entry_pane = document.createElement('div');
if(log.type !== undefined){
entry_pane.className = log.type;
};
console_pane.appendChild(entry_pane);
entry_pane.innerHTML = msg;
};
console._flush();
};
}
})(window)
This allows you to do all the basics and turn the actual console display mechanism off and on with the ?debug querystring (it can be placed anywhere in the querystring). To make it look less atrocious you might also want to bundle in the following css:
#_debug_console{
background : #ffffff;
margin: 0px;
position: fixed;
bottom: 0;
width: 100%;
height: 20%;
font-family: Arial;
font-size: 10px;
border-top: solid 5px #ddd;
}
#_debug_console .error{
color: #FF0000;
}
#_debug_console .warn{
color: #DDDD00;
}
