Как отправить весь вывод консоли в элемент DOM, чтобы его можно было просматривать без необходимости открывать какие-либо инструменты разработчика? Я бы хотел увидеть все выходные данные, такие как ошибки JS, вывод console.log()
и т.д.
Отправка всего содержимого консоли Javascript в элемент DOM
Ответ 1
Я нашел приемлемый ответ выше полезным, но у него есть пара вопросов, как указано в комментариях:
1) не работает в Chrome, потому что "бывший" не учитывает этот контекст, который не является консолью, исправление заключается в использовании метода применения 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/
Ответ 3
Простое переопределение console.log
без обработки ошибок:
const originalConsoleLog = console.log
console.log = (...args) => {
args.map(arg => document.querySelector("#mylog").innerHTML += arg + '<br>')
}
console.log = originalConsoleLog