Отображение ошибок консоли и предупреждений в div внутри страницы

Я создаю инструмент отладки для своего веб-приложения, и мне нужно показать ошибки консоли в div. Я знаю, что могу использовать свой собственный консольный объект и использовать его, но для будущего использования мне нужно отправить все консольные ошибки в окно. На самом деле я хочу поймать консольные события.

Ответ 1

Чтобы консоль работала:

if (typeof console  != "undefined") 
    if (typeof console.log != 'undefined')
        console.olog = console.log;
    else
        console.olog = function() {};

console.log = function(message) {
    console.olog(message);
    $('#debugDiv').append('<p>' + message + '</p>');
};
console.error = console.debug = console.info =  console.log

Ответ 2

Здесь можно использовать закрытие, содержащее старую консольную функцию журнала в области новой.

console.log = (function (old_function, div_log) { 
    return function (text) {
        old_function(text);
        div_log.value += text;
    };
} (console.log.bind(console), document.getElementById("error-log")));

Ответ 3

Иначе, если бы вы были обеспокоены тем, что log, warn и error отделены друг от друга, вы можете сделать что-то вроде этого (адаптировано из ответа MST):

var log = document.querySelector('#log');

['log','warn','error'].forEach(function (verb) {
    console[verb] = (function (method, verb, log) {
        return function (text) {
            method(text);
            // handle distinguishing between methods any way you'd like
            var msg = document.createElement('code');
            msg.classList.add(verb);
            msg.textContent = verb + ': ' + text;
            log.appendChild(msg);
        };
    })(console[verb].bind(console), verb, log);
});

где #log - ваш HTML-элемент. Переменная verb является одной из 'log', 'warn' или 'error'. Затем вы можете использовать CSS для стильного текста. Обратите внимание, что многие из этого кода несовместимы со старыми версиями IE.

Ответ 4

Как насчет чего-то простого:

console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');};
console.error = console.debug = console.info =  console.log

Ответ 5

Ни один из ответов здесь не рассматривает сообщения консоли, которые передают несколько параметров. Например. console.log("Error:", "error details")).

Функция, которая заменяет функцию журнала по умолчанию, лучше относится ко всем аргументам функции (например, с помощью объекта arguments). Вот пример:

console.log = function() {
  log.textContent += Array.prototype.slice.call(arguments).join(' ');
}

(Array.prototype.slice.call(...) просто преобразует объект arguments в массив, поэтому его можно легко конкатенировать с помощью join().)

Если необходимо сохранить исходный журнал:

console.log = (function (old_log, log) { 
    return function () {
        log.textContent += Array.prototype.slice.call(arguments).join(' ');
        old_log.apply(console, arguments);
    };
} (console.log.bind(console), document.querySelector('#log')));

Полное решение:

var log = document.querySelector('#log');
['log','debug','info','warn','error'].forEach(function (verb) {
    console[verb] = (function (method, verb, log) {
        return function () {
            method.apply(console, arguments);
            var msg = document.createElement('div');
            msg.classList.add(verb);
            msg.textContent = verb + ': ' + Array.prototype.slice.call(arguments).join(' ');
            log.appendChild(msg);
        };
    })(console[verb], verb, log);
});

(Пример структуры, которая испускает сообщения с несколькими параметрами, - Video.js, но, безусловно, есть много других.)

Изменить: Другое использование нескольких параметров - это возможности форматирования консоли (например, console.log("Status code: %d", code).

Ответ 6

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div id="logger" class="web_console"></div>

    <script type="text/javascript">

        // Overriding console object
        var console = {};

        // Getting div to insert logs
        var logger = document.getElementById("logger");

        // Adding log method from our console object
        console.log = function(text)
        {
            var element = document.createElement("div");
            var txt = document.createTextNode(text);

            element.appendChild(txt);
            logger.appendChild(element);
        }

        // testing
        console.log("Hello World...");
        console.log("WOW");

        /**
            console.log prints the message in the page instead browser console, useful to programming and debugging JS using a Android phone

        */
    </script>
</body>
</html>