Отправка всего содержимого консоли 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