console

from http://goo.gl/Sf7QM

by dirkk0

HTML

<div id="debug"></div>

CSS

#debug {
    position: absolute;
    top: 0px;
    left: 0px;
    width:98%;
    overflow:auto;
    color: #000;
    background:#888;
    outline:1px solid #000;
    font-size:12px;
    padding: 10px;
    height:180px;
}

JavaScript

// You probably want to outsource this to "debug.js" or whatever.
    Debug = {};
 
    Debug.log = function (text) {
        var div = $('#debug');
        div.html(div.html() + text + "<br />");
        $('#debug').scrollTop($('#debug')[0].scrollHeight);
    }
 
    Debug.toggle = function () {
        $('#debug').slideToggle('normal', function() {
            Debug.log('toggled console...');
        });
    }
 
    // That's similiar to what's usually "main()"
    $(document).ready(function() {
        $(window).keyup(function(pEvent) {
            switch(pEvent.keyCode) {
                case 32: //spacebar
                    Debug.toggle();
                default:
                    Debug.log('Key #'+ pEvent.keyCode +' was pressed.');
              }
        });
    });