Question

是否可以创建另一个javascript控制台实例并自行决定使用它，例如将内容存档到console.log()页面上的div？< / p>

Answer 1

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

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 2

请参阅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 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"}

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

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

3 个答案: