Hein Pragt Heinpragt.com
© Hein Pragt ( Facebook ,  Linkedin  )
  Taalfoutje melden! 
Waardeer deze site:
 
PAGINA MENU |Sitemap |Alles over liefde |Gastenboek |Download |Contact |Mijn blog |Links















 
Themapagina debuggen van javascript code
© 2006 Hein Pragt

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:   Voorbeeld van debugger uitvoer.

  Download een zip bestand met de broncode en een voorbeeld pagina.

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'));

Vriendelijke groet, Hein Pragt




Last update: 03-12-2009


Disclaimer.

Hoewel de heer Hein Pragt de informatie beschikbaar op deze pagina met grote zorg samenstelt, sluit de heer Pragt alle aansprakelijkheid uit met betrekking tot de informatie die, in welke vorm dan ook, via zijn site wordt aangeboden. Het opnemen van een afbeelding of verwijzing is uitsluitend bedoeld als een mogelijke bron van informatie voor de bezoeker en mag op generlei wijze als instemming, goedkeuring of afkeuring worden uitgelegd, noch kunnen daaraan rechten worden ontleend.
Op de artikelen van de heer Pragt op deze Internet Site rust auteursrecht. Overname van informatie (tekst en afbeeldingen) is uitsluitend toegestaan na voorafgaande schriftelijke toestemming van de rechthebbende. Voor vragen over copyright en het gebruik van de informatie op deze site kunt u contact opnemen met: (email: copyright@heinpragt.com)

Webdesign: © Hein Pragt
Fotografie: © Hein Pragt
Auteur: © Hein Pragt (Veenendaal - Utrecht - Nederland)

Privacy beleid

Wij maken gebruik van externe advertentiebedrijven om advertenties weer te geven wanneer u onze website bezoekt. Deze bedrijven gebruiken mogelijk informatie (niet uw naam, adres, e-mailadres of telefoonnummer) over uw bezoek aan deze of aan andere websites om advertenties weer te geven over goederen en services waarin u wellicht geïnteresseerd bent. Als u hierover meer informatie wenst of als u wilt voorkomen dat deze bedrijven deze informatie gebruiken, klikt u op deze link.