Display browser console in HTML page

Question

Edit: I found the code that Stack Overflow uses: https://github.com/gh-canon/stack-snippet-console

I've found a bunch of answers that show how to output the console to a webpage, but I'm trying to make it so that the messages are also logged to the console. Ironically, if you run snippets on Stack Overflow, they do what I'm trying to.

// This causes a stack overflow
var native = window;
native.console = {
    log: function(message){
        $('ul.messages').append('<li>Log: ' + message + '</li>');
        console.log(message);
    },
    error: function(message){
        $('ul.messages').append('<li>Error: ' + message + '</li>');
        console.error(message);
    },
    warn: function(message){
        $('ul.messages').append('<li>Warn: ' + message + '</li>');
        console.warn(message);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="messages"></ul>

Answer 1

I think you just need to cache the original console methods and call them from the cache-- the way you have it now calls your stubbed log, which causes infinite recursion (and thus a stackoverflow):

$(document).ready(function(){
    console.log('You should know...');
    console.error('Something went wrong...');
    console.warn('Look out for this...');
})


// This should work
var native = window;
var originalConsole = native.console;
native.console = {
    log: function(message){
        $('ul.messages').append('<li>Log: ' + message + '</li>');
        originalConsole.log(message);
    },
    error: function(message){
        $('ul.messages').append('<li>Error: ' + message + '</li>');
        originalConsole.error(message);
    },
    warn: function(message){
        $('ul.messages').append('<li>Warn: ' + message + '</li>');
        originalConsole.warn(message);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>messages</h3>
<ul class="messages"></ul>

Answer 2

You can create a wrapper function that takes in a function and outputs your modified function.

const wrapper = (fn, name) => {
  return function(msg) {
    $('ul.messages').append(`<li>${name}: ${msg}</li>`);
    fn(msg);
  };
}

$(document).ready(() => {
  window.console.log = wrapper(console.log, "Log");
  window.console.warn = wrapper(console.warn, "Warn");
  window.console.error = wrapper(console.error, "Error");
});