JavaScript - Fehlersuche - Debugging zur Laufzeit Teil 1
1. Die Abschnitte
- Überblick
- Tools
- Firebug
- Ausgaben an der Konsole Teil 1
- Ausgaben an der Konsole Teil 2
- Feintuning der Konsole
- Debugging zur Laufzeit Teil 1
- Debugging zur Laufzeit Teil 2
2. Stop and go
Heute ist ja alles in Deutschland irgendwie "go". Coffee to go, Cut and go (welcher Friseur ist nur auf den Schwachsinn gekommen),
Pommes to go und was weiß ich nicht noch für einen Humbug. Nun denn. "stop and go" steht ja ursprünglich für zäh fließenden Verkehr.
Also das, was jeden Morgen und Abend auf dem Kölner Ring los ist. Fahren, anhalten, fahren, anhalten. Gut auf der Straße nervt das
tierisch, aber beim Laufzeit-Debugging ist das eine wunderbare Sache. Und um euch das zu zeigen, nehmen wir uns die
laufzeit_debugging.htm vor. Dort wird die Datei laufzeit_1.js eingebunden. Die laufzeit_2.js
ist erst mal auskommentiert. Die benötigen wir später.
3. Das Prinzip
Um nun JavaScript Stück für Stück zu untersuchen, geht man so vor. Zuerst wählt man im Firebug den Punkt "Scripts" aus. Dann gibt
es einfach gesagt zwei Möglichkeiten. Entweder befindet sich euer Code in einer HTML-Datei oder er wurde über eine oder mehrere
Dateien per <script>-Tag eingebunden. Im letzteren Fall könnt ihr euch dann eine entsprechende Datei aussuchen.
4. Der Haltepunkt
Den benötigt man, um Firebug mitzuteilen, an welcher Stelle er anzuhalten hat. Ohne den läuft das Script einfach durch.
Der Code
var arr_1 = new Array(1, 4, 12, 7);
var arr_2 = new Array(5, 9, 2, 19);
for (var i = 0; i < 5; i++)
{
var res = arr_1[i] + arr_2[i];
}
Das hier ist ein ziemlich simples Beispiel. Wir haben zwei Arrays und wollen einfach die jeweiligen Werte des identischen Indexes addieren. Um nun deren Werte zu überprüfen, setzen wir in der Schleife den Haltepunkt, indem wir einfach links neben die entsprechende Zeile klicken. Wenn ihr dann einen roten Punkt seht, ist alles in Ordnung.
5. Debugging starten
Wenn ihr jetzt die Seite zum Beispiel mit "F5" aktualisiert, so ändern sich in der Anzeige zwei Dinge. Ich habe sie für die Blinden unter euch mal rot markiert.
6. Nudel, nudel
Wenn ihr euch jetzt mal die Tableiste im Firefox anseht, so werdet ihr feststellen, dass der "loading"-Kreisel sich dreht und dreht und dreht. Das liegt daran, dass das Script noch nicht abgearbeitet worden ist, weil wir einen Haltepunkt gesetzt haben. Bevor wir uns jetzt da durchhangeln, werfen wir erst mal einen Blick auf den rechten Kasten.
Die Zählvariable i steht auf 0 und res auf undefined. i ist ja soweit
klar, aber was soll das mit res? Nun, ganz einfach. Das hängt mit der Verarbeitung zusammen. Denn der Wert wir erst
gesetzt, wenn der jeweilige Abschnitt komplett durchlaufen ist.
Einen Schritt vor
Da klickt ihr einfach auf den blauen Pfeil. Und achtet bitte in rechten Box auf die Werte von i und res.
Begriffen, wie das funktioniert? Sobald der blaue Pfeil nicht mehr blau ist, wurde der Code komplett abgearbeitet.
So schwer war das nun nicht. Aber es gibt noch mehr Möglichkeiten.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt