Uniform javascript debug console.

By Hjalmar Snoep, SnoepGames.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<h1>UNIFORM JAVASCRIPT DEBUG CONSOLE</h1>
<p>This is an attempt to create a javascript debug console to enable a better communication with clients who are testing my code on diverse platforms. Too often the bug report was: doesn't work on .... Now I ask them to go through the debug iframe and copy and paste the debug info. Also a screenshot now gives me tons more information.</p>
<br>

<p> If you tap the debug area, you can stop the automatic scrolling and scroll through the statements using swiping. The automatic scrolldown works in Chrome and on the iPad. Not tested in this version on Android.</p>


<div id="debug_console" style="overflow: scroll; width: 100%; height: 25%; position:absolute; top: auto; bottom: 0px; text-align: left; background-color:#dddddd; color:#444444">Debug console..</div>

JavaScript

function debugmessage(mes)
{
	var d= $("#debug_console");
d.append("<br>"+mes);
if(debugfollowscroll)
	d.scrollTop(10000000);
}

 $(document).ready(function() {
     $("#debug_console").click(stopFollow)
     setInterval(debugSomething,1000);
});
var debugfollowscroll=true;
function stopFollow()
{
 debugfollowscroll=!debugfollowscroll;
 if(!debugfollowscroll)
{
     $("#debug_console").css("background-color","#ffcccc")
}else{
     $("#debug_console").css("background-color","#dddddd")
}
}
function debugSomething()
{
     var i;
    var str="";
    var r=Math.random()*25;
    for(i=0;i<r;i++) if(Math.random()<0.5) str+="0"; else str+="1";
     debugmessage(str);
}