将所有 Javascript 控制台输出发送到 DOM 元素答案

【问题标题】：Sending all Javascript console output into a DOM element将所有 Javascript 控制台输出发送到 DOM 元素
【发布时间】：2013-05-13 01:48:10
【问题描述】：

如何将所有控制台输出发送到 DOM 元素中，以便无需打开任何开发人员工具即可查看它？我想查看所有输出，例如 JS 错误、console.log() 输出等。

【问题讨论】：

getfirebug.com/firebuglite
要获取错误消息（或至少解析错误），您可以使用window.onerror。请注意，这不会出现与加载内容（图像、脚本、Ajax 等）相关的错误。此外，它可能未被广泛支持；我真的不知道。

标签： javascript debugging console

【解决方案1】：

我发现上面接受的答案很有帮助，但它确实存在一些问题，如 cmets 所示：

1) 在 Chrome 中不起作用，因为“former”没有考虑 this 上下文不再是控制台，解决方法是使用 JavaScript 应用方法。

2) 它不考虑传递给 console.log 的多个参数

我还希望它在没有 jQuery 的情况下也能工作。

    var baseLogFunction = console.log;
    console.log = function(){
        baseLogFunction.apply(console, arguments);

        var args = Array.prototype.slice.call(arguments);
        for(var i=0;i<args.length;i++){
            var node = createLogNode(args[i]);
            document.querySelector("#mylog").appendChild(node);
        }

    }

    function createLogNode(message){
        var node = document.createElement("div");
        var textNode = document.createTextNode(message);
        node.appendChild(textNode);
        return node;
    }

    window.onerror = function(message, url, linenumber) {
        console.log("JavaScript error: " + message + " on line " +
            linenumber + " for " + url);
    }

这是一个带有这些更改的更新工作示例。 http://jsfiddle.net/eca7gcLz/

【讨论】：

【解决方案2】：

这是一种快速解决方案：

Javascript

var former = console.log;
console.log = function(msg){
    former(msg);  //maintains existing logging via the console.
    $("#mylog").append("<div>" + msg + "</div>");
}

window.onerror = function(message, url, linenumber) {
    console.log("JavaScript error: " + message + " on line " + 
            linenumber + " for " + url);
}

HTML

<div id="mylog"></div>

工作示例 http://jsfiddle.net/pUaYn/2/

【讨论】：

感谢您的回答。使用 Chrome 时，我在您的小提琴中收到 Uncaught TypeError: Illegal invocation 错误。有什么想法吗？
@John 因为它包含以下行：va 我想抛出一个错误来告诉你它被捕获了。
在 Chrome 中我得到了这些错误，输出中没有任何内容。但在 Firefox 中它工作正常。我将不得不研究控制台的不同之处。谢谢！
那么行号呢？有机会拿到吗？
值得注意的是，这在 console.log 有多个参数的情况下不起作用：console.log("string", [ "array" ], { object: true }); 让工作做former.apply(console, arguments);

【解决方案3】：

简单的console.log重定义，没有错误处理：

  const originalConsoleLog = console.log
  console.log = (...args) => {
    args.map(arg => document.querySelector("#mylog").innerHTML += arg + '<br>')
  }
  console.log = originalConsoleLog

【讨论】：