console.log to HTML

index.html

        <style>
            #log {
                position: fixed;
                z-index: 9999999999999999999999;
                bottom: 5px;
                right: 5px;
                left: 5px;
                padding: 10px;
                box-shadow: 0 0 3px rgba(0, 0,0, .2);
                background: #333;
                color: #fff;
                font: 13px/16px source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
                max-height: 50%;
                overflow-y: auto;
                word-break: break-word;
                white-space: pre;
            }
            
            #log div {
                border-top: 1px solid #444;
                padding-top: 10px;
                margin-top: 10px;
            }
            
            #log div:first-child {
                margin-top: 0;
                padding-top: 0;
                border-top: 0;
            }
        </style>
        <div id="log"></div>
        <script>
            var old = console.log;
            var logger = document.getElementById('log');
            console.log = function (message) {
                if (typeof message == 'object') {
                    logger.innerHTML += '<div>' + (JSON.stringify(message, ' ', 4)).replace(/>/g, '&gt;').replace(/</g, '&lt;') + '</div>';
                } else {
                    logger.innerHTML += '<div>' + message + '</div>';
                }
            }
        </script>