Wyświetlanie błędów konsoli i alertów w dziale div na stronie

Question

Buduję narzędzie do debugowania dla mojej aplikacji internetowej i muszę wyświetlać błędy konsoli w pliku div. Wiem, że mogę użyć własnego, stworzonego na konsolę obiektu i użyć go, ale do przyszłego użycia muszę wysłać wszystkie błędy konsoli do okna. Właściwie chcę przechwytywać zdarzenia konsoli.

Answer 1

Aby utrzymać pracę konsoli:

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 

Answer 2

Jak o coś tak prostego jak:

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

Answer 3

oto sposób za pomocą zamknięcia, zawierający funkcję starego dziennika konsola w zakresie nowego .

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"))); 

Answer 4

Inaczej, jeśli były zainteresowane w utrzymaniu log, warn i error oddzielone od siebie, można zrobić coś takiego (na podstawie odpowiedzi MST'S):

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); 
}); 

gdzie #log to HTML element. Zmienna verb jest jedną z następujących: 'log', , lub 'error'. Następnie możesz użyć CSS do stylizowania tekstu w wyróżniający sposób. Zauważ, że duża część tego kodu nie jest zgodna ze starszymi wersjami IE.

Answer 5

Żadna z odpowiedzi tutaj nie uwzględnia komunikatów konsoli, które przekazują wiele parametrów. Na przykład. console.log("Error:", "error details")).

Funkcja, która zastępuje domyślną funkcję rejestru, lepiej uwzględnia wszystkie argumenty funkcji (np. Za pomocą obiektu arguments). Oto przykład:

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

(Array.prototype.slice.call(...) prostu konwertuje obiekt do tablicy arguments, więc to może być łączone z łatwością join().)

Gdy oryginał dziennika powinny być przechowywane pracy, a także:

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'))); 

kompletne rozwiązania

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); 
}); 

(Przykładem frameworka emitującego wiadomości o wielu parametrach jest Video.js. Ale jest na pewno wiele innych)

Edycja:... Innym zastosowaniem wielu parametrów ma możliwości formatowania konsoli (np console.log("Status code: %d", code)