Question

是否可以捕获console中发生的所有事件/错误/日志并将其显示在屏幕上的元素中？可以用JavaScript完成吗？

Answer 1

您始终可以覆盖console方法，也可以点按window的{{1}}事件。以下是覆盖的示例，包括侦听error事件。

error

DEMO： http://jsfiddle.net/HfPJ8/

Answer 2

您可以编写自己的日志记录框架或使用可用的日志框架，例如log4javascript，但我不认为其中任何一个都能够从控制台重定向输出，您必须使用{{ 3}}捕获错误或try..catch（在浏览器中不是很可靠），然后通过框架的方法记录它们。

Answer 3

将代码放在body标签顶部或html页面中的任意位置。

<ul id="console-container"></ul>
<script>
(function(){
    let printOnScreen = function (...args) { // adds <li> on "console-container"
        let node = document.createElement("LI");             
        let textnode = document.createTextNode("console: " + args.join(" - ") );         
        node.appendChild(textnode);                              
        window.document.getElementById("console-container").appendChild(node);    
    };
    let methods = Object.keys(console) //get all console methods
    for (i = 0, j = methods.length; i < j; i++) {
        console[methods[i]] = printOnScreen; //override all methods
    }
    window.onerror = function (...args) { // catch all unhandled exceptions
        printOnScreen(args) 
    }
})();
</script>

在屏幕上显示Web控制台？

3 个答案: