js & css to send window.console calls to the web page

console.css

ul.console {
  font-size           : 0.85em;
  color               : #FFF;
  text-shadow         : 0 1px #000;
  position            : fixed;
  top                 : 70%;
  right               : 10px;
  z-index             : 10000;
  width               : 200px;
  height              : 25%;
  list-style          : none;
  overflow            : auto;
  padding             : 4px 10px;
  background          : rgba(99,99,99,0.75);
  border-radius       : 3px;
  box-shadow          : 0px 0px 5px #000;
}

ul.console li {
  margin              : 0 0 0 10px;
  padding             : 0;
}

ul.console li.warn {
  color               : #FFB;
}

ul.console li.error {
  color               : #F99;
}

ul.console li::before {
  content             : ' > ';
  margin-left         : -15px;
}

console.js

(function($) {
  // in case console.log statements (and siblings) are left in.
  if(window.console) {
    var c = window.console;
    c.original_log   = c.log;
    c.original_info  = c.info;
    c.original_warn  = c.warn;
    c.original_error = c.error;

    function handler(type) {
      return (function() {
        var out  = $('ul.console');
        var args = $.makeArray(arguments);
        var data = args;

        try {
          data = JSON.stringify(data);
        }
        catch(e) {}

        this['original_' +type].apply(c, args);

        if(0 === out.length) {
          out = $('<ul class="console" />').appendTo('body');
        }

        out.append('<li class="' + type + '">' + data + '</li>');
        // comment out if jquery.scrollTo is not installed.
        out.scrollTo('max', { duration : 500 });
      });
    }

    c.log   = handler('log');
    c.info  = handler('info');
    c.warn  = handler('warn');
    c.error = handler('error');
  }
})(jQuery);