Debugging
Was ist Debugging?
Das englische Wort „Bug“ steht für Fehler in Computerprogrammen. Ein Debugger ist ein Werkzeug zum Finden und Analysierung von Fehlern in Computerprogrammen. Debugging ist schließlich das kontrollierte und analysierende Durchlaufen von Computerprogrammen zum Finden von Bugs. Dazu kann im Debugger das Computerprogramm schrittweise durchlaufen werden und dabei der Zustand der Variablen angezeigt und überwacht werden.
Fast alle Entwicklungsumgebungen enthalten auch Debugger, mit denen der erstellte Programmcode debuggt werden kann. Aber auch alle gängigen Browser enthalten Debugger, mit denen nach Bugs im JavaScript-Code gesucht werden kann.
Chrome-Entwicklertools
Die Chrome-Entwicklertools können über das Menü mit „Weitere Tools“ und „Entwicklertools“ geöffnet werden:
Um das Debuggen zu starten muss zunächst im oberen Menüband „Sources“ gewählt und mit Doppelklick auf die entsprechende Quelle der Code in das Debugging-Fenster geladen werden:
Danach können im Debugging-Fenster durch Klick auf eine Zeilennummer sog. Haltepunkte (engl. Breakpoints) gesetzt werden, an denen der Debugger stehenbleibt. Mit den Symbolen unten links kann die Ausführung auf verschiedene Arten fortgesetzt werden. Im Fenster „Scope“ kann der Zustand der Variablen überwacht werden:
Firefox-Entwicklertools
Die Firefox-Entwicklertools können über das Menü mit „Entwickler-Werkzeuge“ und „Werkzeuge ein- / au...“ geöffnet werden:
Danach können im Debugging-Fenster durch Klick auf eine Zeilennummer sog. Haltepunkte (engl. Breakpoints) gesetzt werden, an denen der Debugger stehenbleibt. Mit den Symbolen unten links kann die Ausführung auf verschiedene Arten fortgesetzt werden. Im Fenster „Variablen“ kann der Zustand der Variablen überwacht werden:
Schlüsselwort „debugger“
Mit dem Schlüsselwort „debugger“ kann die Ausführung des JavaScript-Codes ebenfalls, wie mit Haltepunkten, unterbrochen werden. Dabei müssen jedoch die Entwicklertools bereits geöffnet sein. Sind die Entwicklertools nicht geöffnet, hat das Schlüsselwort keinen Einfluss auf die Ausführung:
HTML-Datei:
Ergebnis im Browser:
Methode „console.log()“
Mit der Methode „console.log()“ können Informationen im Bereich „Console“ der Entwickler-tools ausgegeben werden:
HTML-Datei:
Ergebnis im Browser:
