Debug without alerts or window.console.log

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>&nbsp;&nbsp;&nbsp;' + window._answer___);

} catch(e) {

alert(e);

}

evt.preventDefault();

return false;

}, false);

function log(text) {

debuglog.innerHTML += (new Date().getTime()) + ': ' + text + '<br>';

}