Webstammtisch Oldenburg

feat. PHP Usergroup | kostenloser, regelmässiger Treffpunkt zu Vorträgen und zum Erfahrungsaustausch für Internetagenturen und Freelancer.
0

Zusammenfassung Workshop "JavaScript-Debugging" vom 27.01.2012

Wer sich intensiver mit der Programmierung von Webanwendungen beschäftigen darf kommt über kurz oder lang zumeist nicht um den Einsatz von JavaScript herum. Sei es nun JavaScript in seiner Reinform oder als Framework wie ProtoType, jQuery, ExtJS ...

In diesem Workshop wurde gezeigt wie einfach es ist mit Hilfe vom Firebug JavaScript zu debuggen. Der Workshop kratzte nur an der Oberfläche und zeigte dem absoluten Neuling einen Einstieg in die Materie.

Firebug ist eine Erweiterung für den Firefox-Browser. Die Erweiterung ist kostenlos erhältlich. Ich gehe hier in diesem Artikel nicht auf die Beschaffung, Installation und den Aufruf von Firebug ein.

Welche Arten von Debuggen gibt es exemplarisch für JavaScript?

  • Ausgabe eines Wertes mit alert()
  • Ausgabe eines Wertes mit console.log()
  • Überwachung mit Firebug

Hier ein einfaches Beispiel fürs Debuggen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
 <script type="text/javascript" charset="utf-8">
 </script>
</head>
<body>
</body>
</html>

Im folgenden beschäftige ich mich nur mit dem Bereich der zwischen <script ...> und </script> steht. Die hier erwähnte Datei im Endformat kann gerne unter der Adresse http://www.webstammtisch-oldenburg.de/js-workshop/beispiel1.html heruntergeladen werden.

Um den Wert einer Variablen anzuzeigen mit dem alert() Befehl gebe ich z.B. ein:

<script ...>
var a=123;
alert(a);
</script>

Dies erzeugt einen modalen Dialog mit der Ausgabe des Wertes 123.

Um den Programmablauf nicht anzuhalten sondern Werte während der Ausführung zu "protokollieren" kann der Befehl console.log() eingesetzt werden. Wichtig hierbei ist zu beachten das keine Skripte an Kunden ausgeliefert werden dürfen bei denen noch ein console.log() - Befehl integriert ist. Firefox kann mit solchen Resten problemlos umgehen aber Browser wie z.B. der Safari stürzen beim Auffinden eines solchen Befehls leider ab.

<script ...>
var a=123;
console.log(a);
</script>

In diesem Beispiel wird der Wert 123 in der JavaScript-Konsole des Firefox ausgegeben sobald diese Zeile ausgeführt wird.

Ausgabe von console.log()

Dies ist schon alles recht hilfreich. Interessant wird es allerdings wenn es z.B. darum geht eine Programmlogik nachzuvollziehen. Hierbei können die beiden Möglichkeiten mit alert() bzw. console.log schnell an ihre Grenzen stoßen.

Firebug

Obiges Bild zeigte schon einen Teil vom Firebug. Firebug hat die Konsole integriert (sie ist aber auch ohne Firebug in Firefox integriert).

Ich erweitere das Scriptbeispiel um ein paar Zeilen um ein belastbareres Beispiel für den Debugger zu haben:

<script ...>
function berechne(a,b){
 var wert1 = parseInt(a);
 var wert2 = parseInt(b);
 var ergebnis = parseInt(wert1+wert2);
  document.getElementById('ergebnis').value=ergebnis;
 }
</script
</head>
<body>
<form >
 <label for="wert_1">Wert 1</label><input type="text" name="wert_1" value="" id="wert_1">
 <label for="wert_2">Wert 2</label><input type="text" name="wert_2" value="" id="wert_2">
 <label for="ergebnis">Ergebnis</label><input type="text" name="ergebnis" value="" id="ergebnis">
<p><input type="button" value="addiere" onClick="berechne(document.getElementById('wert_1').value,document.getElementById('wert_2').value)"></p>
</form>

In diesem Beispiel haben wir ein kleines Formular mit dem zwei Werte addiert werden und das Ergebnis im dritten Formularfeld ausgegeben wird.

Formular zur Dateneingabe

Nun kann im Firebug im Bereich Skript der Quelltext eingesehen werden.

Ansicht des Firebugs mit Quelltext aus unserem Beispiel

Wenn wir nun die Variable "wert1" überwachen wollen bzw. sehen wollen was hier passiert wenn das Skript abgearbeitet wird dann kann hier ein "Haltepunkt" gesetzt werden indem mit der Maus auf die Zeilennummer geklickt wird.

Haltepunkt gesetzt

Durch das setzen des Haltepunktes hält Firebug nun den Programmablauf in eben dieser Zeile an. Also laden wir die Seite einmal neu und klicken auf den Button "addiere".

Zeilenzeiger zeigt das in Zeile 11 der Haltepunkt erreicht worden ist.

 

Im rechten Bereich des Firebugs kann man nun sehen welche Variablen zu diesem Zeitpunkt wie gesetzt sind. Mit Hilfe der Ausführungsknöpfe kann nun das Programm Zeile für Zeile abgearbeitet werden. Dabei kann auf der rechten Seite beobachtet werden wie sich die Variablenwerte verändern.

 

 

Es ist auch möglich an einer Stelle nur dann anzuhalten wenn ein bestimmter Wert erreicht ist. Hierzu klickt man auf die nachfolgende Zeile von dort wo man z.B. den Wert setzt. Ich will z.B. das immer dann angehalten wird wenn der Variablen "wert1" der Wert 77 zugewiesen wird. Hierzu muss ich die Zeile 12 mit einem Haltepunkt versehen der auf diese Bedingung reagiert. Die kann über einen Klick auf die Zeilennummer 12 geschehen. Allerdings muss man in diesem Fall die rechte Maustaste benutzen. In dem kleinen "Ballonfenster" muss dann die Bedingung eingegeben werden: wert1==55

 

 

 

 

 

Soweit die kurze Zusammenfassung des 30 minütigem Workshops. Weitere Infos sind zu finden unter:

http://getfirebug.com/javascript

Bis zum nächsten Webstammtisch ...

Henning

 

Kategorien: Material

Tags: JavaScript-Debugging

Kommentare: bislang keine Kommentare

Post a comment