JavaScript/Tutorials/Debuggen für Anfänger

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Programmieren beinhaltet immer auch die Suche nach Fehlern. Neben Syntaxfehlern existieren auch logische Fehler. In JavaScript erzeugen Fehler oft keinen Abbruch oder eine Fehlermeldung und sorgen erst viel später für Probleme, deren Ursache dann durch Debuggen herausgefunden werden muss.

In diesem Tutorial lernen Sie, wie Sie Scripte auf Programmierfehler überprüfen und debuggen können. Als wichtiges Entwicklungswerkzeug, das die JavaScript-Programmierung entscheidend erleichtert, verwenden wir die eingebaute Konsole (bei Chrome, Firefox, Internet Explorer und Opera), bzw. das Add-on Firebug für Firefox.[1]

Damit können Sie ...

und

bisherige Vorgehensweise[Bearbeiten]

In einem ersten Schritt können Sie zum Testen einfach Blöcke auskommentieren und so Schritt für Schritt überprüfen, welche Zeilen/ Blöcke im Code nicht funktionieren.

Kontrollausgabe mit alert()[Bearbeiten]

Sie können Variablen mit Hilfe von window.alert ausgeben. Wurde ein alert ausgeführt, wusste man, dass der Code bis dahin funktionierte. Nachteile dieser Methode waren, dass ein alert das Programm anhielt und erst nach einer Bestätigung des Nutzers weiterlaufen ließ. Mehrere alerts überlasteten schnell den Speicher.

Eventuell ist der Fehler nicht in dieser Zeile, sondern schon in einer der vorhergehenden zu finden. Versuchen Sie nachzuvollziehen, warum es in dieser Zeile zu dem Fehler kommt.

Fehlerbehandlung mit try ..catch[Bearbeiten]

Weiterhin können Sie die Fehlermeldung mit try ... catch ermitteln.


Kontrollausgabe mit der Konsole[Bearbeiten]

Die Console API[2] ist ein windows.object mit Methoden, die das Analysieren der Codes ermöglichen. Fehler werden mit Datei- und Zeilenangabe angezeigt; ein Klick auf die Meldung bringt Sie in den JavaScript-Code, den sie live verändern können, um so direkt Alternativen ausprobieren zu können!

Wir stellen ihnen hier einige der am häufigsten verwendeten Methoden vor; weitere Methoden können Sie im firebug Wiki finden.[3]

Beachten Sie: Für die Console API gibt es keinen verbindlichen Standard. Das Verhalten der Konsole in den einzelnen Browsern weicht stark voneinander ab, sodass Sie auf einen ständigen Einsatz in fertigen Webseiten verzichten sollten.


Die Konsole öffnen[Bearbeiten]

Die Konsole öffnet sich unterschiedlich, je nach Browser. Das kann zum einen über die jeweiligen Menüs, über die Funktionstaste F12, oder aber durch eine der folgenden Tastenkombinationen geöffnet werden:

  • Mozilla Firefox: unter Windows und Linux mit Strg + Umschalt + I, unter Mac mit Cmd + Opt + I
  • Google Chrome: unter Windows und Linux mit Strg + Umschalt + J, unter Mac mit Cmd + Opt + J
  • Microsoft Edge und Internet Explorer: F12 anschließend Strg + 2

Screenshot

(Ansicht der Firebug-Konsole im Firefox Version 40)

console.log()[Bearbeiten]

Die häufigste Methode ist console.log, die Meldungen in der Konsole ausgibt.

Sie kann folgende Parameter enthalten:

  • eine Variable oder Zeichenkette
  • eine kommagetrennte Liste aus Variablen oder Zeichenketten
Beispiel ansehen …
a = 2;
console.log(a);
b = 3;
console.log(b);
c = a*a + b*b;
console.log(c);
Die Variablen werden mit console.log unten in der Konsole mit Zeilenangabe ausgegeben. Sie können Sie ebenfalls unter Skripte und rechts unter Überwachen sehen.

String Substitution[Bearbeiten]

Sie können anstelle Ihrer auszugebenden Werte auch einen Platzhalter in die Zeichenkette einfügen. Die Variablen werden dann anschließend in einer kommagetrennten Liste angehängt:

Platzhalter Beschreibung
 %o fügt einem JavaScript Objekt einen Link hinzu. Anklicken öffnet einen Inspektor.
%d or %i gibt eine Ganzzahl heraus, (keine Formatierung möglich)
%s gibt eine Zeichenkette heraus.
%f gibt einen Fließkommawert (Dezimalzahl) heraus (keine Formatierung möglich)
Beispiel ansehen …
var name = prompt('Bitte geben Sie Ihren Namen ein!', '');
for (var i=0; i<9; i++) {
  console.log("Hallo, %s. Das ist der %d. Schleifendurchlauf.", name, i+1);
}
console.log("%cAnzahl Durchläufe :", "background: blue; color: yellow; font-weight: bold", i);
Bei jedem Durchlauf wird eine Meldung in der Konsole ausgegeben. Die Meldung besteht aus einer Zeichenkette, in der Platzhalter für den Namen des Benutzers und die Anzahl des Durchlaufs sind.

Styling von Meldungen[Bearbeiten]

Ist Ihnen aufgefallen, das die letzte Meldung im oberen Beispiel anders gestaltet war?

Sie können mittels des Platzhalters eine CSS-Angabe an ihre Meldung anfügen.

Beispiel ansehen …
console.log("%cAnzahl Durchläufe :", "background: blue; color: yellow; font-weight: bold", i);
Beachten Sie: Diese Möglichkeit ist auf das Styling von Zeichenketten beschränkt. Die Formatierung von Ganz- und Dezimalzahlen ist (noch) nicht möglich.


console.info()[Bearbeiten]

Mit console.info() können Sie auch einen besonderen Hinweis ausgeben. Es gelten die gleichen Regeln wie für console.log():

Beispiel ansehen …
a = 2;
b = 3;
console.info('Variable a =', a ,' Variable b =', b );
c = a*a + b*b;
console.log(c);

Screenshot


console.error()[Bearbeiten]

Fehlermeldungen werden wie console.error() besonders gekennzeichnet. Neben der Zeilenangabe gibt die Konsole die Art des Fehlers aus, was das Debuggen erleichert.

Beispiel ansehen …
a = 2;
console.log(a);
b = 3;
console.log(b);
c = a*a + b*b;
console.log(c);
window.alert(ergebnis);
In diesem Beispiel sollte das Ergebnis ausgegeben werden. Allerdings wurde die Variable ergebnis nicht deklariert. Anstelle eines unerklärlichen Abbruchs gibt die Konsole die Art des Fehlers (reference error) und die nicht deklarierte Variable (ergebnis) aus.

Screenshot

Debuggen mit Haltepunkten[Bearbeiten]

Durch die oben aufgeführten Kontrollausgaben können Sie den Ablauf eines Scriptes nachvollziehen und Variablen ausgeben, um deren Werte zu prüfen.

Ist Ihnen rechts neben der Konsole der Debugger (Überwachen) aufgefallen? Er ist ein vielseitiges und mächtiges Werkzeug, mit dem Sie die Funktionsweise eines Scriptes komfortabler untersuchen können, denn Sie müssen nicht nach jeder Anweisung eine Kontrollausgabe einfügen. Ein JavaScript-Debugger bietet im Allgemeinen folgende Möglichkeiten:

Setzen von Haltepunkten[Bearbeiten]

Sie können Haltepunkte (englisch Breakpoints) setzen, indem sie in der Konsole im Quelltext erst oben links auf das Symbol klicken und dann die einzelnen Zeilennummern markieren. Die Ausführung des JavaScripts wird an dieser Stelle unterbrochen und Sie können alle Variablen und Objekte rechts im Debugger sehen und überprüfen.

Screenshot

Mit einem Klick auf den aktuellen Haltepunkt, der nun ein Play-Symbol beinhaltet, können Sie das Script von dieser Code-Zeile aus wieder zum Laufen bringen und die folgenden Anweisungen nun Schritt für Schritt ausführen, Anweisungen überspringen und aus aufgerufenen Funktionen herausspringen. Bei dieser schrittweisen Ausführung können Sie überprüfen, welche Werte bestimmte Objekte und Variablen an dieser Stelle im Script haben.


Call Stack[Bearbeiten]

Bei komplerexen Programmen mit mehreren Funktionen, die sich gegenseitig aufrufen, hilft Ihnen ein Debugger, die Übersicht über das Aufrufen und Abarbeiten von Funktionen zu behalten. In der Einzelschritt-Ausführung haben Sie den sogenannten Call Stack (englisch für Aufruf-Stapel) im Blick. Das ist die Verschachtelung der Funktionen, die gerade abgearbeitet werden. Wenn beispeilsweise die Funktion a die Funktion b aufruft und diese wiederum die Funktion c, so ist der Stapel a > b > c. Die Funktion c, die gerade ausgeführt wird, liegt sozusagen oben auf dem Stapel. Nach dessen Ausführung wird c vom Stapel genommen und in die Funktion b zurückgekehrt - und so weiter.


Fallen und Fehlerquellen[Bearbeiten]

runde oder geschweifte Klammern[Bearbeiten]

Alle Klammern die geöffnet werden, müssen auch wieder geschlossen werden!
Ist eine Klammer zuviel im Script-Code?

Hochkommata um Strings[Bearbeiten]

Fehlt ein schließendes Hochkomma oder wird ein doppeltes Hochkomma durch ein einfaches Hochkomma geschlossen?

Bindestrich im Variablennamen?[Bearbeiten]

Wenn Sie eine Variable mit einem Bindestrich schreiben, wird aus ihrem Namen eine Zuweisung, da JavaScript den Bindestrich als Rechenoperator ansieht und versucht die beiden Teile der Variablen zu substrahieren.

Groß- und Kleinschreibung[Bearbeiten]

Javascript ist case-sensitive, das heißt, dass nameVorname und namevorname unterschiedliche Variablen sind. Sie geben in der Konsole im strengen Modus eine Fehlermeldung.

Empfehlung: Verwenden Sie das so genannte CamelCase, in dem jeweils der erste Buchstabe der einzelnen Bestandteile des Namens groß geschrieben wird.
Beispiel:
DiesIstEineVariable.

Schreibfehler in einer der DOM-Methoden? Vor allem Methoden wie getElementById werden oft falsch geschrieben. Hier hilft ein Web-Editor mit autocomplete, der Methoden und mehrmals verwendete Variablen automatisch vorschlägt.

oktale Syntax[Bearbeiten]

Besonders im Bereich der Datumsberechnung werden häufig Zahlen mit führender Null benutzt. Einfache Aufgaben wie alert(08 * 60) liefern dann scheinbar falsche Ergebnisse oder gar Fehlermeldungen.

Des Rätsels Lösung dafür ist, dass JavaScript Zahlen mit führender 0 als Oktalzahlen interpretiert, nicht als Dezimalzahlen. Die Notation von Oktalzahlen mit einer führenden Null ist eine in vielen Programmiersprachen verbreitete Konvention, die ursprünglich von C kommt.

Mit einer Anweisung wie parseInt("08", 10) können Sie das Problem vermeiden und erzwingen, dass der Wert dezimal interpretiert wird.

Empfehlung: Verwenden Sie den strict mode, um die Interpretation als Oktalzahlen auszuschließen.

siehe auch[Bearbeiten]


Quellen[Bearbeiten]

  1. getfirebug.com
  2. MDN: console API
  3. Firebug Wiki: Console API

ToDo (weitere ToDos)

Ist Ihnen aufgefallen, dass alle Beispiel in diesem Artikel funktionieren?

Besser wäre es, die Methoden der Console API in einen eigenen Artikel auszulagern und stattdessen fehlerhafte Skripte vorzustellen, die der Leser selbst debuggen muss.

Beispiel
var a = 23;
var b = 42;
if (a = b) {
  alert('23 ist 42, q.e.d.');
}

Oft sind es die kleinen Fehler, die man übersieht, auch wenn man sich den Code dreimal anschaut. Zumindest könnte man mit einem console.log(a) vor der if-Abfrage bemerken, dass der Inhalt von a noch stimmt, innerhalb dann aber den Inhalt von b angenommen hat, was nicht beabsichtigt war. Und so muss der Fehler zwischen den beiden console.log() sitzen.

Beispiel
var a = 23;
var b = 42;
console.log(a, b);
if (a = b) {
  console.log(a, b);
  alert('23 ist 42, q.e.d.');
}

Self-Forum: Wiki: Tutorial Grundlagen von Strings und Arrays vom 20.04.2017

--Matthias Scharwies (Diskussion) 06:28, 21. Apr. 2017 (CEST)

Weblinks[Bearbeiten]