Mini-Javascript-Debugger
Einfacher Javascript-Debugger zum Anzeigen von Variablen-Inhalten
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>
Javascript-Debugger