Edit: I found the code that Stack Overflow uses:

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=".3.1/jquery.min.js"></script>
<ul class="messages"></ul>

Edit: I found the code that Stack Overflow uses: https://github./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="messages"></ul>

• javascript
• browser
• console.log

Share Improve this question Follow edited Jun 17, 2020 at 5:48 jxxe asked Jun 17, 2020 at 5:36 jxxejxxe 27311 gold badge44 silver badges1313 bronze badges 2

• Why don't you look at how stack snippets does it? – Barmar Commented Jun 17, 2020 at 5:37
• I was having trouble reading the unminified minified code, but it looks like they open sourced it: github./gh-canon/stack-snippet-console – jxxe Commented Jun 17, 2020 at 5:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>messages</h3>
<ul class="messages"></ul>

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");
});

I do not remend you modify the original function, you can create a new one, and that can show the message on both ^{console and your node}.

Blow is pure javascript code.

Example 1

function decorator(wrap, func) {
  return (...para) => {
    func(para)
    return wrap(para)
  }
}

const mylog = decorator(window.console.log, (...para)=>{
  const ul = document.querySelector(`ul[class=msg]`)
  const range = document.createRange()
  const frag = range.createContextualFragment(`<li>${para}</li>`)
  ul.append(frag)
})

mylog("Hello world!")

<h3>messages</h3>
<ul class="msg"></ul>

Example 2

window.onload = () => {
    const decoratorFunc = (methodName, msg) => {
      const symbol = methodName === "info" ? "

                                发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744790996a4593915.html