Um mögliche Fehler in Ihren eigenen definierten JavaScripten zu finden, bietet es sich an, die Debugging-Funktion Ihres Browsers zu verwenden.
Wie dies mit den gängigen Browser funktioniert, erklären wir in den nachfolgenden Artikel.
Wichtig zu beachten ist, dass Änderungen, die Sie zur Laufzeit innerhalb des Debuggers vornehmen, nur Auswirkungen auf die aktuelle Browser-Session haben.
Nach aktualisieren der Seite oder Neustart der Laufzeit würden diese verloren gehen.
Es ist also wichtig, die Änderungen, die Sie gegebenenfalls direkt im Debugger vornehmen, im Anschluss in den Editor zu kopieren damit diese von Dauer sind.
Wann kann das Debugging hilfreich sein?
1. Wenn Sie zur Laufzeit eine Fehlermeldung „Error in user Javascript:“ erhalten, deutet dies immer auf einen Fehler hin, der innerhalb einer benutzerdefinierten Funktion ausgelöst wurde. Die Fehlermeldung enthält zum Einen die Beschreibung des aufgetretenen Fehler hier „textVariable is not defined“ und zum Anderen den Namen der Funktion, welche aufgerufen wurde, bevor der Fehler auftrat.
Wenn Ihr Script nicht so funktioniert, wie Sie es erwarten. Wenn falsche Werte geschrieben oder gelesen werden.
2. In diesem Fall hilft es, den Code zu debuggen, um dem Fehler schneller auf die Schliche zu kommen.
Folgende Themen zum JavaScript Debugging werden in diesem Kapitel behandelt:
| JavaScript Debugging in Google Chrome |
| JavaScript Debugging in Firefox |
| JavaScript Debugging im Microsoft Internet Explorer |
| JavaScript Debugging in Microsoft Edge |
| JavaScript Debugging in Opera |
JavaScript Debugging in Google Chrome
Die folgende Anleitung ist auf die Version 83.0.4103.61 von Google Chrome bezogen.
Für künftige Versionen kann dieser Vorgang möglicherweise abweichen.
Um ein JavaScript Debugging vorzunehmen, müssen Sie die „Entwicklertools“ des Browsers aufrufen.
Dies erfolgt in Google Chrome ganz einfach mit „F12“ oder über die Browser-Einstellungen:
Das Entwicklertool öffnet sich und zeigt jedes JavaScript, das angelegt wurde, in einer .ujs Datei (User JavaScript) in der obersten Ebene im Klartext an.
Der Name der Datei entspricht dabei dem Namen, unter dem der im Editor angelegte JavaScript-Block gespeichert wurde.
In diesem Beispiel also „Main“. Für jeden gespeicherten JavaScript-Block würde dementsprechend eine eigene Datei angelegt werden.
Von hier aus kann das Debugging nun erfolgen. Haltepunkte können gesetzt und Fehler behoben werden.
In diesem einfachen Beispiel erkennt man schon durch das Hervorheben, dass etwas nicht passt und korrigiert werden muss.
Das Debugging selbst kann von Browser zu Browser variieren.
JavaScript Debugging in Firefox
Die folgende Anleitung ist auf die Version 76.0.1 von Firefox bezogen. Für künftige Versionen kann dieser Vorgang möglicherweise abweichen.
Um ein JavaScript Debugging vorzunehmen, müssen Sie die „Entwicklertools“ des Browsers aufrufen. Dies erfolgt in Firefox ganz einfach mit „F12“ oder über die Browser-Einstellungen:
Das Entwicklertool öffnet sich und zeigt jedes JavaScript, das angelegt wurde, in einer .ujs Datei (User JavaScript) in der obersten Ebene im Klartext an.
Der Name der Datei entspricht dabei dem Namen, unter dem der im Editor angelegte JavaScript-Block gespeichert wurde.
In diesem Beispiel also „Main“. Für jeden gespeicherten JavaScript-Block würde dementsprechend eine eigene Datei angelegt werden.
Von hier aus kann das Debugging nun erfolgen. Haltepunkte können gesetzt und Fehler behoben werden.
In diesem einfachen Beispiel erkennt man schon durch das Hervorheben, dass etwas nicht passt und korrigiert werden muss.
Das Debugging selbst kann von Browser zu Browser variieren.
JavaScript Debugging im Microsoft Internet Explorer
Die folgende Anleitung ist auf die Version 11 des Microsoft Internet Explorers bezogen.
Um ein JavaScript Debugging vorzunehmen, müssen Sie die „Entwicklertools“ des Browsers aufrufen.
Dies erfolgt im Internet Explorer ganz einfach mit „F12“ oder über die Browser-Einstellungen:
Das Entwicklertool öffnet sich und zeigt jedes JavaScript, das angelegt wurde, in einer .ujs Datei (User JavaScript) in der obersten Ebene im Klartext an.
Der Name der Datei entspricht dabei dem Namen, unter dem der im Editor angelegte JavaScript-Block gespeichert wurde. In diesem Beispiel also „Main“.
Für jeden gespeicherten JavaScript-Block würde dementsprechend eine eigene Datei angelegt werden.
Von hier aus kann das Debugging nun erfolgen. Haltepunkte können gesetzt und Fehler behoben werden.
In diesem einfachen Beispiel erkennt man schon durch das Hervorheben, dass etwas nicht passt und korrigiert werden muss.
Das Debugging selbst kann von Browser zu Browser variieren.
JavaScript Debugging in Microsoft Edge
Die folgende Anleitung ist auf die Version 81.0.416.77 von Microsoft Edge bezogen.
Für künftige Versionen kann dieser Vorgang möglicherweise abweichen.
Um ein JavaScript Debugging vorzunehmen, müssen Sie die „Entwicklertools“ des Browsers aufrufen.
Dies erfolgt in MS Edge ganz einfach mit „F12“ oder über die Browser-Einstellungen:
Das Entwicklertool öffnet sich und zeigt jedes JavaScript, das angelegt wurde, in einer .ujs Datei (User JavaScript) in der obersten Ebene im Klartext an.
Der Name der Datei entspricht dabei dem Namen, unter dem der im Editor angelegte JavaScript-Block gespeichert wurde.
In diesem Beispiel also „Main“. Für jeden gespeicherten JavaScript-Block würde dementsprechend eine eigene Datei angelegt werden.
Von hier aus kann das Debugging nun erfolgen. Haltepunkte können gesetzt und Fehler behoben werden.
In diesem einfachen Beispiel erkennt man schon durch das Hervorheben, dass etwas nicht passt und korrigiert werden muss.
Das Debugging selbst kann von Browser zu Browser variieren.
JavaScript Debugging in Opera
Die folgende Anleitung ist auf die Version 68.0.3618.125 von Opera bezogen.
Für künftige Versionen kann dieser Vorgang möglicherweise abweichen.
Um ein JavaScript Debugging vorzunehmen, müssen Sie die „Entwicklertools“ des Browsers aufrufen.
Dies erfolgt in Opera ganz einfach über die Tastenkombination „Strg + Shift + i“.
Das Entwicklertool öffnet sich und zeigt jedes JavaScript, das angelegt wurde, in einer .ujs Datei (User JavaScript) in der obersten Ebene im Klartext an.
Der Name der Datei entspricht dabei dem Namen, unter dem der im Editor angelegte JavaScript-Block gespeichert wurde. In diesem Beispiel also „Main“.
Für jeden gespeicherten JavaScript-Block würde dementsprechend eine eigene Datei angelegt werden.
Von hier aus kann das Debugging nun erfolgen. Haltepunkte können gesetzt und Fehler behoben werden.
In diesem einfachen Beispiel erkennt man schon durch das Hervorheben, dass etwas nicht passt und korrigiert werden muss.
Das Debugging selbst kann von Browser zu Browser variieren.
