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

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

50 голосов
/ 07 июля 2011

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

Ответы [ 6 ]

60 голосов
/ 07 июля 2011

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

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
28 голосов
/ 10 августа 2013

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

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")));
10 голосов
/ 09 января 2014

Иначе, если вы были заинтересованы в том, чтобы 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.

8 голосов
/ 07 июля 2011

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

console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');};
console.error = console.debug = console.info =  console.log
7 голосов
/ 01 мая 2017

Ни один из ответов здесь не касается консольных сообщений, которые передаются по нескольким параметрам.Например, 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).

0 голосов
/ 06 апреля 2019 
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...