Showing console errors and alerts in a div inside the page

Question

I'm building a debugging tool for my web app and I need to show console errors in a div. I know I can use my own made console like object and use it, but for future use I need to send all console errors to window. Actually I want to catch console events.

Answer 1

Here's a way using closure, containing the old console log function in the scope of the new one.

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 2

To keep the console working:

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