JavaScript Konsolenausgabe abfangen

Es kommt des Öfteren vor das man eine Konsolenausgabe “verpasst” meist ist dies ein Fehler, den irgendeine JavaScript Funktion wirft. Nun kann man natürlich die Konsole permanent offen halten oder aber man hängt sich in die Eventkette eines Konsoleneintrages mit ein.

In diesem Tutorial möchte ich gerne beschreiben wie ich die Konsolenausgaben abfange, Sie aber trotzdem an die Konsole weitergeleitet werden. Quasi hängen wir uns zwischen in die “Eventkette”.

Browserkompatibilität

Da der Microsoft Internet Explorer hier wieder eine Sonderbehandlung bedarf, nutze ich nicht nur jQuery, sondern auch das Plugin “jquery-browser.js“. Das Plugin wird benötigt, da jQuery ab der Version 1.9 den Support für die Browsererkennung eingestellt hat.

Ausgabe der Meldungen

Für die Ausgabe der späteren Meldungen (Log,Warning und Error) verwende ich das jQuery Plugin, “growl” von Kevin Sylvestre.
Dieses Plugin ermöglicht kleine Meldungen im Browser darzustellen, welche sich nach einer Zeit selbst entfernen.

Der JavaScript Code

Als Erstes müssen wir uns beim Seitenaufruf an den Eventhandler der Konsole hängen, dazu überschreiben wir die Funktionen log,warn und error. Hier ist auch die Abfrage nach dem Browser enthalten, da wie eingangs Beschrieben der Microsoft Internet Explorer eine Sonderbehandlung benötigt.

$(document).ready(function () {
    var original = window.console;
    window.console = {
        log: function () {
           log('notice', arguments[0]);
	   if ( $.browser.msie ) {
		var logging = Function.prototype.bind.call(console.log, console);
		logging.apply(console, arguments);
	   } else {
		original.log.apply(original, arguments)
	   }	
        }
        , warn: function () {
            log('warn', arguments[0]);
            if ( $.browser.msie ) {
		var logging = Function.prototype.bind.call(console.warn, console);
		logging.apply(console, arguments);
	    } else {
		original.warn.apply(original, arguments)
	    }
        }
        , error: function () {
            log('error', arguments[0]);
            if ( $.browser.msie ) {
		var logging = Function.prototype.bind.call(console.error, console);
		logging.apply(console, arguments);
	    } else {
		original.error.apply(original, arguments)
	    }
        }
    };
});

Hinweis:
In diesem Quellcode wird aus dem Parameter “argument” welches ein Array ist das erste Element gewählt. Dieses muss umgeschrieben werden, wenn alle Werte aus dem Array weitergeleitet werden sollen.

Nun noch die eigene Funktion für die Ausgabe der Meldung.

Funktion log

Die Funktion “log” erwartet 2 Parameter einmal die Fehlerschwere und einmal die Message. Natürlich kann man die Message auch in eine HTML Seite einbinden und mit CSS jeweils darstellen.

function log(style, message) {
   if(style=='notice'){
	$.growl.notice({ message: message });
   } else if(style=='warn'){
	$.growl.warning({ message: message});
   } else if(style=='error'){
	$.growl.error({ message: message });
   }
}