Javascript debug | Een pagina over het debuggen van javascript code.

Voor het debuggen van javascript code bestaan goede oplossingen in de vorm van Microsoft script debugger. Voor mozilla en firefox bestaan ook een paar debuggers die zeer handig werken. Maar vaak willen we alleen even een paar debug teksten naar een extra window schrijven om even te controleren wat er mis gaat of de flow van een programma te controleren. Speciaal hiervoor heb ik een debug div control gemaakt. Door dit kleine stukje code op te nemen tijdens de ontwikkeling van uw javascript bent u in staat om waar u wilt een berichtje of de inhoud van een variabele even af te drukken in een klein debug venster. Als voorbeeld heb ik een kleine routine gebruikt die de dom tree afdrukt. Leuk detail is dat de table in internet explorer automatisch een tbody heeft meegekregen. Dit script werkt zowel in Internet Explorer als mozilla en firefox.

Voorbeeld HTML voor de debug javascipt code.

<HTML>
<HEAD>
<TITLE>Debug demo.</TITLE>
</HEAD>
<BODY>

    <DIV id="test">
      <TABLE BORDER='1'>
        <TR>
           <TD>This is table cell 1
           </TD>
        </TR> 
        <TR>
           <TD>This is table cell 2
           </TD>
        </TR> 
      </TABLE>
    </DIV>
		
<script type="text/javascript" src="debug.js"></script>

</BODY>
</HTML>

De javascript code van de debug routines.

// -----------------------------------------------
// Debug control (c) H.M. Pragt  2006
// -----------------------------------------------


var debug = true;	  // set to false to stop debugging

// --------------------------------
// Write a string to the debug div
// --------------------------------

function WriteDebug(s) {
  if (debug) { 
    document.getElementById("debug").innerHTML += s + "<br\/>";
  }
}

// --------------------------------
// Create and init the debug div
// --------------------------------

function DebugInit() {
   var Ddiv = document.createElement('div');
   Ddiv.id = 'debug';
   document.getElementsByTagName('body')[0].appendChild(Ddiv);
   if (debug) { 
     Ddiv.style.display = "block";
     Ddiv.style.position = "absolute";
     Ddiv.style.top = "10px";
     Ddiv.style.right= "10px";
     Ddiv.style.padding = "10px";
     Ddiv.style.width = "300px";
     Ddiv.style.background = "#404040";
     Ddiv.style.color = "white";
     Ddiv.style.border = "solid 1px red";
   } 
   else {
     Ddiv.style.display = "none";	 
   }
}


// -----------------------------------
// Walk the dom tree and display
// -----------------------------------

function WalkDOMTree(currentElement)
{
  if (currentElement) {
    var tagName = currentElement.tagName;
    if (tagName) { // Open tag
      WriteDebug("&lt;"+currentElement.tagName+"&gt;");
    }
    var i=0;
    var currentElementChild = currentElement.childNodes[i];
    while (currentElementChild) {
      WalkDOMTree(currentElementChild);
      i++;
      currentElementChild = currentElement.childNodes[i];
    }
    if (tagName) { // End tag
      WriteDebug("&lt;/"+tagName+"&gt;");
    }
  }
}

// ------------------------------------
// Execute javascript
// ------------------------------------

DebugInit();
WalkDOMTree(document.getElementById('test'));

Voorbeeld HTML voor de debug javascipt code.

De javascript code van de debug routines.

Internet techniek

Disclaimer.