创建 javascript 控制台的另一个实例

Question

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

Answer 1

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

Answer 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);

<pre id="logs"></pre>

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

注意 2：我提供的示例只是一个基本示例，可以让您深入了解，您还需要很多其他东西（对象和数组的折叠，功能记录，例如...).

Answer 3

您可以覆盖 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"}

Fiddle: https://jsfiddle.net/mrlew/a08qL18d/

创建 javascript 控制台的另一个实例

Creating another instance of the javascript console

javascript

console

console.log