Der folgende Debugger läßt sich leicht in HTM- bzw. Javascript-Seiten einbauen und zeigt nach Wunsch die Inhalte von Variablen an. Dabei werden auch komplexe Array und Objekte mit angezeigt.
Dazu wird der folgende Quelltext als Datei „debug.js“ gespeichert:
/*** debug.js - Version vom 29.08.19 ***/
/*** Autor+Copyright: Jörg Siebrands ***/
if (debugOn == undefined) var debugOn = true; // debinieren und anschalten wenn noch nicht vorhanden
var debugWindow;
var debugText = '';
if (debugOn == true) debugWondow = window.open('debug.htm', "MyDebugWindow", "dependent=yes,width=800,height=600,left=50,top=200,toolbar=no,location=no,resizable=yes,scrollbars=yes");
function debug(v1, v2, v3) {
if (debugOn == false) return;
var i;
var s1, s2;
var vidx;
var vtype;
// alert("dbtp: " + typeof v1 + " --- " + typeof v2);
// set variables by arguments
switch (arguments.length) {
case 0:
alert("Pause");
return;
break;
case 1:
vidx = 0;
s1 = '';
s2 = '';
break;
case 2:
vidx = 1;
s1 = v1;
s2 = '';
break;
default:
alert('zuviele Parameter übergeben');
return;
break;
} // switch
switch (typeof arguments[vidx]) {
case "array":
case "string":
debugText += s1 + arguments[vidx] + '<br>';
break;
case "boolean":
debugText += s1 + ((arguments[vidx] == true) ? "true" : "false") + "<br>";
break;
case "number":
debugText += s1 + arguments[vidx] + "<br>";
break;
case "object":
if(arguments[vidx]instanceof Array) { // Array-Objekt
if (arguments[vidx].length == 0) { // keine Array-Elemente
if (s1 != undefined) { debug(s1 + "[]") }; // nur Text ausgeben
} else { // Array-Elemente vorhanden
for (i=0; i<arguments[vidx].length; i++) {
debug(s1 + "a", "[" + i + "] ");
debug(s1 + "+-- ", arguments[vidx][i]);
}
} // else (Array-Element vorhanden
} else { // kein Arry-Objekt
for (var property in arguments[vidx]) {
// hier ggfs. noch ändern (keine 2 Anweisungen?)
debug(s1 + "o[" + property + "] ", arguments[vidx][property]);
}
} // if (ist Array-Objekt)
break;
}
}
Nun benötigen wir noch die HTML-Datei für das Debug-Fenster dass wir unter „debug.htm“ speichern:
<html>
<head>
<meta charset="utf-8">
<title>Debug-Window</title>
</head>
<body>
<div id="content">
DEBUG:
</div>
<script type="text/javascript">
var i = 0; iTime = 200;
var aktiv = window.setInterval("show()", iTime);
function show () {
if (opener.debugText != document.getElementById('content').innerHTML) {
document.getElementById('content').innerHTML = opener.debugText;
}
}
</script>
</body>
</html>
In der HTML-Datei wird nun zunächst die Variable „debugOn“ angelegt. Mit dieser kann man den Debugger an- (true) oder ausschalten (false):
<script language="javascript">
var debugOn = true;
</script>
danach wird der Debugger eingebunden. Da die Variable im Debugger ausgewertet wird das Script nicht vor der Variablendefinition eingebunden werden!
<script type="text/javascript" src="debug.js"></script>
Nun können mit der Funktion debug() nach Belieben Variablen ausgegeben werden. Für die Ausgabe der Variablen wird ein neues Popup-Fenster geöffnet. debug() kann mit 1 oder 2 Parametern aufgerufen werden. Bei einem Parameter wird die zu untersuchende Variable übergeben, z. B. debug(i). Bei 2 Parametern gibt man einen String und die zu untersuchende Variable an, z. B. debug("Schleifenvariable i =", i). Der Text wird dann mit ausgegeben.
Gibt man keinen Parameter an bewirkt das eine Pause - ein Meldungsfenster erscheint. Klickt man hier ok geht es weiter. Dabei wird lediglich die alert-Funktion aufgerufen.
Die debug()-Funktion kann auch in eingebundenen Javascript-Dateien verwendet werden. Dabei ist jedoch darauf zu achten dass beim Aufruf von debug() die Datei debug.js bereits eingebunden sein muss.
In der folgenden HTML-Beispielseite werden einige Variablen angelegt und mit debug() ausgegeben:
<html>
<head>
<meta charset="utf-8">
<title>Debugger-Test</title>
</head>
<body>
<h1>Debugger-Test</h1>
<script language="javascript">
var debugOn = true;
</script>
<script type="text/javascript" src="debug.js"></script>
<script language="javascript">
var i=1;
debug("i: ", i);
var s="Hallo Welt!";
debug("s: ",s);
var a=["Apfel", "Banane", "Birne", "Kokosnuss"];
debug("a: ",a);
var o=new Object();
o["Deutschland"] = new Object();
o["Deutschland"]["Hauptstadt"] = "Berlin";
o["Deutschland"]["Einwohner"] = 83000000;
o["Deutschland"]["Fläche"] = 357386;
o["Österreich"] = new Object();
o["Österreich"]["Hauptstadt"] = "Wien";
o["Österreich"]["Einwohner"] = 8858775;
o["Österreich"]["Fläche"] = 83879;
o["Schweiz"] = new Object();
o["Schweiz"]["Hauptstadt"] = "Bern";
o["Schweiz"]["Einwohner"] = 8542300;
o["Schweiz"]["Fläche"] = 41285;
debug("o:", o);
</script>
</body>
</html>
Jörg Siebrands, Lünebuerger Schanze 1, 21614 Buxtehude