将所有 Javascript 控制台输出发送到 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16616722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sending all Javascript console output into a DOM element
提问by John
How does one send all console output into a DOM element so it can be viewed without having to open any developer tools? I'd like to see all output, such as JS errors, console.log()output, etc.
如何将所有控制台输出发送到 DOM 元素中，以便无需打开任何开发人员工具即可查看？我想查看所有输出，例如 JS 错误、console.log()输出等。
回答by Craig McKeachie
I found the accepted answer above helpful but it does have a couple issues as indicated in the comments:
我发现上面接受的答案很有帮助，但它确实有一些问题，如评论中所示：
1) doesn't work in Chrome because "former" does not take into account the this context no long being the console, the fix is to use the JavaScript apply method.
1) 在 Chrome 中不起作用，因为“前者”没有考虑到不再是控制台的 this 上下文，修复方法是使用 JavaScript apply 方法。
2) It does not account for multiple arguments being passed to console.log
2) 它不考虑传递给 console.log 的多个参数
I also wanted this to work without jQuery.
我也希望它在没有 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);
}
Here is an updated working example with those changes. http://jsfiddle.net/eca7gcLz/
这是包含这些更改的更新工作示例。 http://jsfiddle.net/eca7gcLz/
回答by Kevin Bowersox
This is one approach for a quick solution:
这是一种快速解决方案的方法：
Javascript
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
HTML
<div id="mylog"></div>
Working Examplehttp://jsfiddle.net/pUaYn/2/
回答by Damjan Pavlica
Simple console.logredefinition, without error handling:
简单的console.log重新定义，没有错误处理：
const originalConsoleLog = console.log
console.log = (...args) => {
args.map(arg => document.querySelector("#mylog").innerHTML += arg + '<br>')
}
console.log = originalConsoleLog
