在HTML页面中显示浏览器控制台

Question

编辑：我找到了Stack Overflow使用的代码：https://github.com/gh-canon/stack-snippet-console

我已经找到了很多答案，这些答案显示了如何将控制台输出到网页，但是我正在设法使其能够将消息记录在控制台中。具有讽刺意味的是，如果您在Stack Overflow上运行代码片段，它们将执行我正在尝试的操作。

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

// This works, I just want it to also log to the console
window.console = {
    log: function(message){
        $('ul.messages').append('<li>Log: ' + message + '</li>');
    },
    error: function(message){
        $('ul.messages').append('<li>Error: ' + message + '</li>');
    },
    warn: function(message){
        $('ul.messages').append('<li>Warn: ' + message + '</li>');
    }
}

// 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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul class="messages"></ul>

我已经找到了很多答案，这些答案显示了如何将控制台输出到网页，但是我正在尝试使其能够将消息也记录到控制台。具有讽刺意味的是，如果您在堆栈上运行摘要...

Answer 1

我认为您只需要缓存原始的console.log并分别调用-现在，它的方式将调用存根日志，这将导致无限递归/堆栈溢出：