debugging 将所有JavaScript控制台输出发送到DOM元素

igsr9ssn  于 2023-06-23  发布在  Java
关注(0)|答案(4)|浏览(132)

如何将所有控制台输出发送到DOM元素中,以便无需打开任何开发人员工具就可以查看它?我希望看到所有的输出,比如JS错误,console.log()输出,等等。

cygmwpex

cygmwpex1#

我发现上面接受的答案很有帮助,但它确实有一些问题,如评论中所指出的:
1)在Chrome中不起作用,因为“前者”没有考虑this上下文不再是控制台,修复方法是使用JavaScript apply方法。
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/

hc8w905p

hc8w905p2#

这是一种快速解决方案:

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/

cbeh67ev

cbeh67ev3#

简单的console.log重定义,无需错误处理:

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

相关问题