Debug

In dieser Seite ist ein Script integriert, welches ein Array mit Zahlen durchläuft und überprüft, ob eine Zahl öfter vorkommt. Weitere Erklärungen zu dem Script siehe unten.

Mit den Devoloper Tools von Chrome hat man die Möglichkeit einen Debugger aufzurufen. Mit einem Debugger kann man ein Script Schritt für Schritt durchlaufen, indem man Haltepunkte setzt und dort die Variablenbelegung und Funktionsaufrufe überprüft.

Rufe diese Seite in Google-Chrome auf, drücke die Taste F12 oder Strg Shift I oder wähle im 3 Punkte Menü oben rechts: "Weitere Tools, Entwicklertools".

Im 3 Punkte Menü der Enwicklertools (rechts) kannst du die Auteilung der Seite verändern, so dass die Developeransicht horizontal unter der Seitenansicht liegt, wie in dem Screenshot.

  1. In der Leiste der Entwicklertools wähle "Quellcode" oder "Sources".
  2. Dann wähle rechts in der Leiste den Karteireiter "Seite".
  3. Dort findet man dann die Ordnerstruktur der Seite und auch die damit verknüpfte Javascript Datei, die hier debug.js heißt. Wähle diese aus und es erscheint der Code.
  4. In der Ansicht sieht man links die Zeilennummern. Wenn man dort eine Zeile auswählt, hat man einen Haltepunkt definiert.
  5. Wenn man nun die Datei neu läd, stoppt das Programm genau an dem Haltepunkt und man kann die Werte der Variablen rechts erkennen.
    Alternativ kann man auch im Quelltext einen Haltepunkt definieren mit dem Schlüsselwort:
    debugger;
    Rechts im Bereich Scope sieht man die Variablenbelegung.
  6. Durch Klicken auf die Pfeiltaste oben rechts im Debugger, wird das Programm fortgesetzt, bis zum nächsten Haltepunkt.
  7. Breche das Script ab, indem du den Aktualisieren-Button ganz oben links neben der Adresszeile des Browsers anklickst. Aus dem X-Symbol wird dann wieder der Kreispfeil.

Wählt man in diesem Beispiel die Zeile 7 sieht man die Variablenbelegung von nr1, n2, i, j

Beachte die Verschachtelung der beiden Schleifen. Würde die Variable j auch bei 0 starten, wäre der Code fehlerhaft, weil die zweite verschachtelte Schleife jedesmal alle Zahlen durchlaufen würde. So würde eine Zahl mit sich selbst verglichen und Zahlen würden mehrmals verglichen. Die verschachtelte Schleife startet also immer auf dem nächsten Index der ersten Schleife. j = i + 1;

Wenn man mit dem Pfeil-Button das Script fortsetzt, stoppt es wieder beim nächsten Haltepunkt. In diesem Beispiel wird beim zweiten Aufruf die verschachtelte Schleife wieder durchlaufen und es stoppt bei j=2; i = 0; nr1 und nr2 haben beide den Wert 5;

Man kann mehrere Haltepunkte setzen, auch über mehrere Dateien hinweg. Innerhalb von Bedingungen wird der Haltepunt nur dann ausgeführt wenn die Bedingung erfüllt ist. Setze dazu einen weiteren Haltepunkt in Zeile 14. Wenn dieser Haltepunkt aufgerufen wird, kann man rechts unter "Aufrufstack" die Funktionsreihenfolge sehen. Die oberste Funktion, ist diejenige, die gerade aufgerufen wurde, die darunterliegende ist die Funktion, welche die Funktion aufgerufen hat.

Im Debugger sind oben einige Steuerungselemente, deren Bedeutung beim Mouseover erscheint.

 

 

Javascript Tipps