Show console.log output in the DOM

console-to-dom.js

(function () {
  var $consoleLog = $('<div id="console-log"></div>'),
  newLine = function(){return $('<p class="console-line"></p>'); },
  cssText = '.console-line{margin:10px;padding:10px;background-color:#ededed;border:1px solid #ccc;font-weight:700;font-family:monospace;color:#333;font-size:18px}.dir{background-color:#80e5a6}.info{background-color:#cff}.warn{background-color:#fdfd96}.error{background-color:#ff6961}',
  $style = $('<style>' + cssText + '</style>');
  
  //reminder: jQuery is a dependency!

  $('body').prepend($consoleLog);
  $('body').append($style);

  window.console = {
    log: function(text) {
      $consoleLog.append(newLine().html(text));
    },
    dir: function(text) {
      $consoleLog.append(newLine().addClass('dir').html(JSON.stringify(text)));
    },
    info: function(text) {
      $consoleLog.append(newLine().addClass('info').html(text));
    },
    warn: function(text) {
      $consoleLog.append(newLine().addClass('warn').html(text));
    },
    error: function(text) {
      $consoleLog.append(newLine().addClass('error').html(text));
    },
  };
})();