创建另一个 javascript 控制台实例答案

【问题标题】：Creating another instance of the javascript console创建另一个 javascript 控制台实例
【发布时间】：2017-06-22 06:41:15
【问题描述】：

是否可以创建另一个 javascript 控制台实例并自行决定使用它，例如将提交到 console.log() 的内容放在您页面上的 div 中）？

【问题讨论】：

标签： javascript console console.log

【解决方案1】：

您可以覆盖console.log。像这样的：

console.log = function(objToLog) {
  var myLog = document.getElementById('myLog');
  var str = '';
  if (typeof objToLog === 'string') {
    str = objToLog;
  } else if (typeof objToLog === 'object') { //includes array print
    str = JSON.stringify(objToLog);
  }
  myLog.innerText = myLog.innerText + '\n> ' + str;
}


console.log('log this line');
console.log('log this other line');
console.log([1,2,3]);
console.log({ key: 'value' });

将打印到一个div：

> log this line
> log this other line
> [1,2,3]
> {"key":"value"}

小提琴：https://jsfiddle.net/mrlew/a08qL18d/

【讨论】：

【解决方案2】：

您可以覆盖它，但这不是一个好习惯。像这样：

console.log = function() {
    for(var i = 0; i < arguments.length; i++)
      document.getElementById("logs").textContent += JSON.stringify(arguments[i], null, 4) + '\n\n';
}


var object = {a: 45, b: "hh"};

console.log(object);

console.log("Hello world!");

console.log(45 + 5);

&lt;pre id="logs"&gt;&lt;/pre&gt;

注意 1： console.log 是一个很好的调试工具，它不应该被覆盖。我不建议您覆盖它，而是建议您创建一个函数（例如称为myConsoleLog）来满足您的需求。

注意 2： 我提供的示例只是让您深入了解的基本示例，您还需要很多其他的东西（例如对象和数组的折叠、函数的日志记录） ...)。

【讨论】：

【解决方案3】：

请参阅this answer，您可以通过获取堆栈的值并将其写入页面上的 div 来实现。

<div id="log"></div>

var logBackup = console.log;
var logMessages = [];

console.log = function() {
    logMessages.push.apply(logMessages, arguments);
    document.getElementById('log').innerHTML = "";
    for(var i = 0; i < logMessages.length; i++){
      var pre = document.createElement("pre");
      pre.innerHTML = logMessages[i];
      document.getElementById('log').appendChild(pre);
    }
    logBackup.apply(console, arguments);
};
console.log("My name is joe.")
console.log("My name is tom")

https://jsfiddle.net/yak613/7g6kchox/

【讨论】：

谢谢。你是第一位的，所以你的答案被接受了——请注意，尽管给出的答案都没有直接回答实际问题——是否可以创建另一个instance 控制台。然而，所提供的方法确实有效并且非常受欢迎。
你可能想看看console profiles。请注意，此参考仅适用于 Chrome。