index.html

<!DOCTYPE html>

<html>
<head>
    <title>Conzole</title>
	<style>
		body {
			background: #f0f0f0;
			font-family: Helvetica, sans-serif;
            padding: 0 1em;
		}
        a {
            text-decoration: none;
            color: #900; font-weight: bold;
        }
        a:hover {
            text-decoration: underline;
        }
		button {
			font-family: Consolas, monospace;
			border: 1px solid #aaa;
			border-radius: 5px;
			padding: .35em 1em;
			border-bottom-width: 3px;
			cursor: pointer;
			font-size: 14px;
			margin: 0 1em .3em 1em;
		}
        button:hover {
            background-color: #d0d0d0;
        }
        header {
            background: #444;
            color: #fc0; font-family: Consolas, monospace;
            width: 30%;
            min-width: 5em;
            font-size: 32px;
            margin: 1em 0 1em -1em; border-radius: 11px;
        }
        header h1, header h2 {
            padding: 10px 32px; margin: 0;
        }
        header h1 {
            font-size: 32px;
            margin-bottom: 0; padding-bottom: 0;
        }
        header h2 {
            font-size: 12px; font-family: Helvetica, Arial, sans-serif;
            margin-top: 0; padding-top: 0; font-weight: normal;
        }
        header span.author {
            color: #AA9;
        }
		hr {
			border: none; background: none; height: 0; visibility: hidden; clear: both;
		}
        p {
            margin-right: 400px;
        }
        pre, span.pre {
            background: #e0e0e0; font-size: 12px; font-family: Consolas, monospace;
            padding: 1em; border: 1px solid #ccc;
        }
        pre em {
            color: #777;
        }
        span.pre {
            display: inline; padding: .3em .8em;
        }
        ul {
            list-style: none; padding: 0; margin: 1em;
        }
        li {
            border-bottom: 1px solid #ccc;
            padding: .3em .8em;
        }
        .downloads {
            margin: 0; padding: 0;
        }
        .downloads li {
            float: left; border: none; border-right: 1px solid #999;
        }
        .downloads li.last {border: none;}
	</style>
	<script type="text/javascript">
		window.onload=function() {

			var b00=document.getElementById('b00');
			var b01=document.getElementById('b01');
			var b02=document.getElementById('b02');
			var b03=document.getElementById('b03');
            listen('click', b00, function() {conzole.open();});
            listen('click', b01, function() {conzole.close();});
            listen('click', b02, function() {conzole.toggle();});
            listen('click', b03, function() {conzole.setWidth(parseInt(Math.random()*1000))});

			var b10=document.getElementById('b10');
			var b10b=document.getElementById('b10b');
			var b11=document.getElementById('b11');
			var b12=document.getElementById('b12');
			var b13=document.getElementById('b13');

			listen('click', b10, function() {console.log('a log');});
			listen('click', b10b, function() {console.debug('a log');});
			listen('click', b11, function() {console.info('an info');});
			listen('click', b12, function() {console.warn('a warn');});
			listen('click', b13, function() {console.error('an error');});
            listen('click', b14, function() {console.log(3, ' multiplied by ', 2, 'equals', 6);});

			var b20=document.getElementById('b20');
			var b21=document.getElementById('b21');

			listen('click', b20, function() {console.time('timer1');});
			listen('click', b21, function() {console.timeEnd('timer1');});

			var b30=document.getElementById('b30');
			var b31=document.getElementById('b31');

			listen('click', b30, function() {console.time('timer2');});
			listen('click', b31, function() {console.timeEnd('timer2');});

			var b40=document.getElementById('b40');
			var b41=document.getElementById('b41');
			var b42=document.getElementById('b42');

			listen('click', b40, function() {conzole.watching.foo=Math.random();});
			listen('click', b41, function() {conzole.watching.foo=null});
			listen('click', b42, function() {delete conzole.watching.foo;});

            var a=Math.random()*100;
            var o={foo:5, bar:100, baz:'boo', caz:true};
			var interval=setInterval(function() {
				a=parseInt(Math.random()*100);
				o.foo=parseInt(Math.random()*9);
				o.bar=Math.round(Math.random()*10000)/10000;

			}, 50);
            conzole.watching.SomeVariable=a;
			conzole.watching.SomeObject=o;

			console.log('Welcome to Conzole. This is my first console log.');
			conzole.open();
		}
		function listen(e, el, f) {
			if (el.addEventListener) el.addEventListener(e,f,false);
			else if (el.attachEvent) return el.attachEvent('on'+e,f);
			else alert('Cannot listen events.');
		}
	</script>
</head>
<body>
<script type="text/javascript" src="conzole.js"></script>
<header>
    <h1>Conzole</h1>
    <h2>v0.1.0 <span class="author">by Pierluigi Pesenti</span></h2>
</header>
<ul class="downloads">
    <li><a href="https://github.com/Oaxoa/Conzole/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a></li>
    <li><a href="https://github.com/Oaxoa/Conzole/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a></li>
    <li class="last"><a href="https://github.com/Oaxoa/Conzole" id="view-on-github" class="button"><span>View on GitHub</span></a></li>
</ul>
<hr />
<p>
Conzole is a debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page.
Include it once and see it the same every time you open up the page, in every browser, on mobile etc.
</p><p>It also adds some unique functions as the &ldquo;watching&rdquo; list. It let you watch variables as many browsers debug console does. But setting up the watches via javascript is much easier, can be conditional and you don't have to do it every time you launch the browser.

</p>
<div>
    <h2>Usage</h2>
    <p>Include the script just after the <span class="pre">&lt;body&gt;</span> open tag:</p>
    <pre>
    &lt;/head&gt;
    &lt;body&gt;
        <strong>&lt;script type="text/javascript" src="conzole.js"&gt;&lt;/script&gt;</strong>
        <em>&lt;!-- rest of body content --&gt;</em>
    </pre>
    <p>By default panel is closed. In this demo <span class="pre">conzole.open()</span> is being called.</p>
</div>
<div>
	<h2>Panel managment</h2>
    <p>Drag left edge to resize panel.</p>
    <p>Press bound keys to accomplish the following tasks (active when focus is not isnide a input item).</p>
    <p>Keyboard bindings:</p>
    <ul>
        <li>'z' toggle panel;</li>
        <li>'c' clear panel content;</li>
        <li>'u' toggle panel active/paused;</li>
        <li>'t' show alternate timings (current time/time elapsed from previous message)</li>
    </ul>
    <p>Test keypress while focusing an input field will not trigger conzole methods: </p>
    <p><input /></p>
    <p><input type="password" /></p>
    <p><textarea></textarea></p>


    <p>Otherwise call specific methods via javascript:</p>
	<button id="b00">conzole.open()</button><br />
	<button id="b01">conzole.close()</button><br />
	<button id="b02">conzole.toggle()</button><br />
	<button id="b03">conzole.setWidth(parseInt(Math.random()*1000))</button>
</div>
<div>
	<h2>Basic</h2>
    <p>Notice the javascript native "console" is called. </p>
	<button id="b10">console.log('a log')</button> or <button id="b10b">console.debug('a log')</button><br />
	<button id="b11">console.info('an info')</button><br />
	<button id="b12">console.warn('a warn')</button><br />
	<button id="b13">console.error('an error')</button>

    <p>You can pass multiple arguments to the functions having them concatenated by spaces</p>
    <button id="b14">console.log(3, 'multiplied by', 2, 'equals', 6);</button>
</div>
<div>
	<h2>Timers</h2>
    <p>Notice the javascript native "console" is called. </p>
	<button id="b20">console.time('timer1')</button><br />
	<button id="b21">console.timeEnd('timer1')</button>
	<hr />
	<button id="b30">console.time('timer2')</button><br />
	<button id="b31">console.timeEnd('timer2')</button>
</div>
<div>
	<h2>Watch</h2>
    <p>Primitive variable types (integer, string) are passed by value. Update of the values must be explicitly called every time by re-setting the watching variable.<br />
    Object and array variables are passed by reference. conzole.watching variable will refer to the original object and display changes.</p>
	<button id="b40">conzole.watching.foo=Math.random()</button><br />
	<button id="b41">conzole.watching.foo=null</button><br />
	<button id="b42">delete conzole.watching.foo</button>
</div>

</body>
</html>