Home | Projekte | Javascript-Debugger | Delphi-Tipp(1) | Delphi(2) | Delphi(3) | Pascal → Javascript | Lazarus | Kontakt

Programmierung

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>			
 
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