I've been doing some mobile development involving WebViews and I miss having window.console.log. So I typically end up creating a div that I can put my logging statements in. Here is an example:
var debugdiv;
function log(text) {
window.console && window.console.log(text); // In case it exists.
if (!debugdiv) {
// Create the DOM element.
debugdiv = document.createElement('div');
debugdiv.id = 'debugdiv';
debugdiv.style.position = 'absolute';
debugdiv.style.background = 'white';
debugdiv.style.padding = '3px';
debugdiv.style.top = '0px';
debugdiv.style.left = '50%';
debugdiv.style.width = '50%';
debugdiv.style.zIndex = '100000';
debugdiv.innerHTML = '';
document.body.appendChild(debugdiv);
}
// To append at the end:
debugdiv.innerHTML += (new Date().getTime()) + ': ' + text + '<br>';
// To put in front:
// debugdiv.innerHTML = (new Date().getTime()) + ': ' + text + '<br>' + debugdiv.innerHTML;
}
Since it's logging I'm assuming no escaping needed.
But as I'm writing this I realized I should just give myself an input box I can write code in:
// Create the DOM element.
var debugdiv = document.createElement('div');
debugdiv.id = 'debugdiv';
debugdiv.style.position = 'absolute';
debugdiv.style.background = 'white';
debugdiv.style.padding = '3px';
debugdiv.style.top = '0px';
debugdiv.style.left = '50%';
debugdiv.style.width = '50%';
debugdiv.style.zIndex = '100000';
debugdiv.innerHTML = '<form name="logjavascript"><input name="j" ' +
'style="width: 90%;" type="text" /></form><div id="debuglog"></div>';
document.body.appendChild(debugdiv);
var debuglog = document.getElementById('debuglog');
// Add an event listener to the form when its submitted to run the code in
// the input box.
document.logjavascript.addEventListener('submit', function(evt){
try{
window._answer___ = undefined; // We'll store the answer here.
var original = document.logjavascript.j.value;
var debugscript = document.createElement('script');
// We'll remove the var keyword.
var value = 'try{window._answer___ = ' + original.replace(/var /g,'window.') + ';}catch(debuge){window._answer___=debuge}';
debugscript.textContent = value;
document.body.appendChild(debugscript);
window.setTimeout(function() {
document.body.removeChild(debugscript);
}, 0);
document.logjavascript.j.value = '';
log('"' + original + '"<br> ' + window._answer___);
} catch(e) {
alert(e);
}
evt.preventDefault();
return false;
}, false);
function log(text) {
debuglog.innerHTML += (new Date().getTime()) + ': ' + text + '<br>';
}