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

Question

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

我找到了一堆说明如何将控制台输出到网页的答案，但我正在努力使消息也记录到控制台。具有讽刺意味的是，如果您运行在 Stack Overflow 上摘录，他们会做我想做的事情。

// 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

我认为您只需要缓存原始的 console 方法并从缓存中调用它们——您现在使用它的方式调用存根 log，这会导致无限递归（因此计算器溢出）：

$(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

您可以创建一个包装函数，它接受一个函数并输出您修改后的函数。

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

Answer 3

我不建议你修改原来的功能，你可以创建一个新的，它可以在^{控制台和你的节点上显示消息}。

吹纯javascript码.

示例 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>

示例 2

window.onload = () => {
    const decoratorFunc = (methodName, msg) => {
      const symbol = methodName === "info" ? "" :
        methodName === "error" ? "❌" :
          methodName === "warn" ? "⚠" : ""

      const ul = document.querySelector(`ul[class=msg]`)
      const range = document.createRange()
      const frag = range.createContextualFragment(`<li>${symbol} ${msg}</li>`)
      ul.append(frag)
    }
    const myConsole = new MethodDecorator(window.console, decoratorFunc)
    myConsole.Apply(["log", "info", "error", "warn", // those will run {decoratorFunc + ``window.console.xxx``}
      "others" //  I created, it doesn't belong method of window.console so it only run ``decoratorFunc``
    ])
    myConsole.log("log test")
    myConsole.info("info test")
    console.info("not influenced") // not influenced
    myConsole.error("error test")
    myConsole.warn("warn test")
    myConsole.others("others test")
    myConsole.Reset()
    // myConsole.warn("warn test") // error
}

class MethodDecorator {
  constructor(obj, func) {
    this.obj = obj
    this.func = func
  }

  Apply(nameArray) {
    const orgMethodNameArray = Object.getOwnPropertyNames(this.obj)
    for (const methodName of nameArray) {
      const orgMethodName = orgMethodNameArray.find(e => e === methodName) // if not found return undefined
      const prop = {}
      prop[methodName] = {
        "configurable": true,
        "value": (...args) => {
          this.func(methodName, args) // decorator function
          if (orgMethodName) {
            this.obj[orgMethodName](args) // for example, console.log(args)
          }
        }
      }
      Object.defineProperties(this, prop)
    }
  }

  Reset() {
    const extraMethodNameArray = Object.getOwnPropertyNames(this).filter(name => name !== "obj" || name !== "func")
    for (const extraMethodName of extraMethodNameArray) {
      const prop = {}
      prop[extraMethodName] = {
        value: undefined
      }
      Object.defineProperties(this, prop)
    }
  }
}

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

运行代码段 的控制台将阻止某些内容。单击运行代码段查看所有内容后，单击整页。

参考

window.console

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

Display browser console in HTML page

javascript

browser

console.log

示例 1

示例 2

参考