I have recently adopted a new practice to handle debugging before the DOM is fully loaded:
(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)
Furthermore, I include the following script after the DOM has finished loading (to be placed 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 setup allows basic logging functionalities, with the ability to toggle the actual console display on and off using the ?debug querystring (which can be positioned anywhere in the querystring). To enhance aesthetics, it is recommended to incorporate the provided CSS styles:
#_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;
}