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