SO - 20256760

HTML

<div class="log_wrap">
  <div id="log" class="log"></div>
</div>

CSS

.log_wrap {
  position: relative;
  overflow: hidden;
}
.log {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* styling */
.log_wrap {
  position: relative;
  overflow: hidden;
  width: 80%;
  height: 300px;
  margin: 30px auto;
  color: #fff;
  background: #111;
  border: #333;
  line-height: 1.3;
  font-family: monospace;
}
.log {
  padding: 20px;
}

JavaScript

(function () {
    if (!console) {
        console = {};
    }
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
})();

console.log('test');
console.log({
    test: 2
});
console.log([1, 2, 3]);
console.log([{
    test: 1
}, {
    test: 2
}]);

window.setInterval(function(){
	console.log(Math.floor(Math.random() * 999999999999));
}, 500);