jQuery Debugger

Beim Entwickeln von Prgrammcode ist ein tieferer Blick in die Objektstruktur oft unabdingbar. Ein guter Debugger kann einem stundenlanges suchen nach Fehlern ersparen. Deshalb will ich kurz einen jQuery Debugger vorstellen. Downloaden könnt ihr ihn euch als jQuery Plugin auf: jQuery Debugger
Nachdem das Plugin eingebunden ist (ganz normal mit script-Tag und src-Attribut), könnt ihr es mit folgendem Code aufrufen:

1
2
3

var debuggen = new jQuery.debug();
// ...
debuggen.dump(Object);

Nun noch ein kleines Beispiel dazu:

1

<input name="LieferName"  value="" class="validate['required','length[6,-1]']" type="text" id="LieferName" />

Der Code um sich das Objekt näher anzuschauen kann wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12

debug = new jQuery.debug({
	posTo : { x:'right', y:'bottom' },
	width: '480px',
	height: '50%',
	itemDivider : '<hr>',
	listDOM : [ 'tagName','id', 'innerText', 'href','value' ]
	});
 
function showMeDebug(){
  var input = $('LieferName');
  debug.dump(input);
}

Hier würde jetzt nach Aufruf der Funktion showMeDebug auf der unteren rechten Seite des Bildschirms eine Box, in der alle alle Attribute des “listDOM” für das Objekt “input” stehen, angezeigt.
Für ein Formularfeld ist diese Funktion nur teilweise interessant. Sinnvoller ist der Einsatz des Debuggers für komplexe Objekte vor allem natürlich Klasseninstanzen.

Zu beachten ist, dass vor “debug = new jQuery.debug” u. U. die “var” Deklaration von JavaScript stehen und “jQuery” durch $ ersetzt werden muss. Obiges Skript wurde im noConflict Mode von jQuery ausgeführt.