Exceptions und Debugging

Nachdem wir nun schon die wichtigsten Grundlagen von JavaScript kennengelernt haben, wollen wir uns vorerst mit dem Thema Exceptions und Debugging beschäftigen, bevor wir uns den fortgeschrittenen Themen widmen.

Als Exceptions (engl. für Ausnahmen) werden Fehler bezeichnet, die während dem Ausführen des JavaScript-Codes auftreten. Zu diesen Fehlern zählen z. B. nicht existierende Variablen oder Funktionen. Tritt eine Exception auf, welche nicht abgefangen wurde, so wird die Ausführung des Skripts beendet und eine Fehlermeldung in der Konsole der Webentwickler-Tools ausgegeben.

Unter Debugging versteht man im Allgemeinen die Behebung von Fehlern in einem Skript oder Programm. Um diese Fehler zu finden, wird der sogenannte Debugger verwendet. Der Debugger ist ein Tool, welches zumeist in einer Entwicklungsumgebung integriert ist. Er erlaubt es, das Skript zeilenweise durchzugehen, um festzustellen, an welcher Stelle der Fehler auftritt. Zusätzlich können währenddessen die aktuellen Werte von Variablen angezeigt werden. Da der Programmcode von JavaScript über einen Interpreter im Browser ausgeführt wird und somit dem Browser als Quelltext vorliegt, wird JavaScript-Code üblicherweise, über den in den meisten Browsern integrierten Debugger, gedebuggt.

Konsole

Die Konsole ist ein Ausgabe-Fenster, welches sich innerhalb der sogenannten Webentwickler-Tools im Browser wiederfindet. Die Webentwickler-Tools können entweder über das Menü oder meistens auch mittels der Taste F12 aufgerufen werden. In den meisten Browsern (u. a. Microsoft Internet Explorer, Mozilla Firefox und Google Chrome) werden die Webentwickler-Tools als eigenständiges oder als angedocktes Fenster mit Registerkarten (Tabs) dargestellt. Unter diesen Registerkarten sollte sich auch eine mit der Aufschrift „Konsole“ oder „Console“ befinden. Dort werden dann z. B. JavaScript-Fehler (sowohl Laufzeitfehler, als auch Syntaxfehler) angezeigt. Für Entwicklungs-Zwecke ist es manchmal ganz praktisch, eine Ausgabe durchzuführen, ohne dabei den Seiteninhalt der Webseite zu verändern. Genau hierfür ist es auch möglich, dass wir über unser JavaScript-Programm eine Ausgabe in diesen Konsolen-Fenster durchführen. Hierfür kann die Funktion console.log() verwendet werden. Des Weiteren kann innerhalb des Konsole-Fensters JS-Programmcode manuell ausgeführt werden. Dadurch können wir z. B. auch eine Funktion unseres Programms aktiv aufrufen.

console.log("Glückwunsch! Sie haben die Konsole gefunden.");

Debugger

Der Debugger ist, wie bereits oben schon erwähnt, ein Tool, mit welchem wir unseren Code analysieren können, um somit im Programm enthaltene Fehler zu beheben. Gefunden werden kann der Debugger ebenfalls in den Webentwickler-Tools.

Im Debugger können wir mit Hilfe eines Klicks auf die Zeilennummer einen sogenannten Breakpoint setzen. Bei einem Breakpoint (engl. für Haltepunkt) hält der Interpreter die Ausführung des Codes an. Dadurch ist es nun möglich, ab dem gewählten Punkt den Code zu debuggen. Wird der Code den Sie debuggen wollen beim Laden automatisch ausgeführt, müssen Sie nach dem Setzen des Breakpoints die Seite neu laden. Die Breakpoints bleiben dabei erhalten. Innerhalb des Debugger-Fensters wird zudem der Wert von aktuell verwendeten Variablen angezeigt. Weitere Variablen können jedoch zur „Überwachung“ ohne weiteres manuell hinzugefügt werden. Für die einfache Ausgabe eines Variablenwerts (ohne das Skript dabei debuggen zu wollen), können Sie einfach den Variablennamen in der Eingabezeile im Konsolen-Fenster eingeben. Sie erhalten dann als Rückgabe den Wert der Variable.

Exceptions abfangen

In einigen Fällen lassen sich bestimmte Laufzeitfehler nicht vermeiden, da diese z. B. durch eine „externe Funktion“ einer fremden Funktion (z. B. einer Library) ausgelöst wird. Um solche Fehler abzufangen, ohne dabei den kompletten Programmablauf zu stoppen, gibt es in JavaScript die sogenannte try-catch-Anweisung.

Der Syntax ist wie folgt: Wir notieren das Schlüsselwort try gefolgt von einem Block mit Code. Nun folgt das Schlüsselwort catch, welches wieder einen Block mit sich bringt. Nach dem Schlüsselwort catch muss noch ein rundes Klammernpaar notiert werden, in welchem ein frei verfügbarer Variablenname angegeben werden muss. Über diese Variable können wir innerhalb des catch-Blocks die Meldung des Fehlers abrufen, welche bisher sonst immer in der Konsole angezeigt wurde.

Der Ablauf ist wie folgt: Wird innerhalb des Codes im try-Block eine Exception ausgelöst, so wird nicht etwa das Skript gestoppt, sondern lediglich die Ausführung des Codes im try-Block. Anschließend erfolgt ein Sprung in den catch-Block. Der Code im catch-Block kann nun zur Fehlerbehandlung genutzt werden. Dies kann z. B. so aussehen, dass wir auf unserer Seite eine Fehlermeldung ausgeben. Vorteil dieser Variante ist, dass weiterer Code (außerhalb dieses try-Blocks) ausgeführt werden kann. Zudem gilt die Verwendung von try-catch als „saubere Lösung“ zum Abfangen und Behandeln von Fehlerfällen.

try
{
	// Funktion existiert nicht!
	document.writeText("Hallo!");
}
catch (err)
{
	document.write("Ein Fehler ist aufgetreten: " + err);
}

Die try-catch-Anweisung kann am Ende um einen finally-Block erweitert werden. Der Code im finally-Block wird nach vollständiger Ausführung des try-Blocks oder nach Ausführung des catch-Blocks ausgeführt. Der finally-Block ist optional und kann somit ohne weiteres weggelassen werden, wenn dieser nicht benötigt wird.

try
{
	// Funktion existiert nicht
	document.writeText("Hallo!<br />");
}
catch (err)
{
	document.write("Ein Fehler ist aufgetreten: " + err + "<br />");
}
finally
{
	document.write("Code 1 ausgeführt!<br />");
}

document.write("<br />");

try
{
	// Funktion existiert
	document.write("Hallo!<br />");
}
catch (err)
{
	document.write("Ein Fehler ist aufgetreten: " + err + "<br />");
}
finally
{
	document.write("Code 2 ausgeführt!<br />");
}

Exceptions auslösen

Exceptions können nicht nur vom Interpreter ausgelöst werden, sondern auch direkt vom JavaScript-Code und somit von unserem eigenen Code. Hierfür notieren wir das Schlüsselwort throw gefolgt von einem Wert, welcher dem catch-Block übergeben werden soll. Dies ist oftmals eine Zeichenkette (siehe Beispiel).

Natürlich ist es nur sinnvoll, Exceptions selbst auszulösen, wenn diese dann auch wieder abgefangen werden. Dies klingt im ersten Moment vielleicht etwas verwirrend, doch gerade bei größeren Projekten ist dieses Verfahren sinnvoll.

var a = 7;
var b = 0;

try
{
	if (b == 0)
		throw "Variable b darf nicht 0 sein!";
	
	document.write("Ergebnis: " + (a / b));
}
catch (err)
{
	document.write("Ein Fehler ist aufgetreten: " + err + "<br />");
}

Übrigens: In fast allen Webentwickler-Tools lässt sich auch noch ein sogenannter Inspektor finden, mit welchem es möglich ist, die Baumstruktur eines HTML-Dokuments durchzugehen und auch das HTML-Dokument zu verändern. Auch das Ändern von CSS-Eigenschaften für einzelne Elemente, alle Elemente oder für Klassen und IDs ist möglich.

Wichtig: Die Erklärung zu den Webentwickler-Tools, zum Debugger und zur Konsole ist allgemein gehalten und kann sich von Browser zu Browser im konkreten Ablauf und der Beschriftung unterscheiden. Wir empfehlen Ihnen die Verwendung von Mozilla Firefox oder Google Chrome zum Debuggen von JavaScript-Code. Bei Bedarf lesen Sie sich ggf. die Hilfe der Browser zum Thema Webentwickler-Tools durch.