Im Teil 2 der Reihe Debugging JavaScript beschreiben wir kurz die rustikale Herangehensweise mit dem Internet Explorer 11. Diese Form des JS-Debuggens ist besonders dann geeignet, wenn ein JavaScript am Client – also zum Beispiel im Browser - interpretiert wird. Um diese Tätigkeit auszuführen, bieten moderne Webbrowser sogenannte Development Tools. In diesem Artikel analysieren wir das Debuggen von JavaScript mit dem Internet Explorer 11 anhand des Beispiels aus diesem Blog Artikel.
Der Sourcecode kann in ein leeres Textdokument kopiert werden, das als index.html benannt wird und zum Beispiel am Desktop abgelegt wird. Der Sourcecode findet sich auch auf JS-Fiddle. Nach Aufruf der Datei index.html mit dem Internet Explorer können Sie die Development Tools mit der Taste F12 starten. Die Funktionalitäten der Development Tools sind mittlerweile ziemlich umfangreich, so kann neben dem Debuggen auch beispielsweise die Performance einer Webseite analysiert werden. In diesem Beitrag beschränken wir uns aber auf das Debuggen von JavaScript.
Wir befinden uns im Debugger der F12 Developer Tools. Ein Breakpoint kann mit Mausklick in die entsprechende Zeile gesetzt werden.
Sobald die Anwendung gestartet wird, kann mit den Menüpunkten auf der folgenden Grafik über die Anwendung iteriert werden.
Im Kasten rechts neben dem Sourcecode-Fenster können Sie die Variablen mitverfolgen.
Sobald die Anwendung fertig durchlaufen ist, können Sie im Menü links auf die Console wechseln.
Hier wird die Ausgabe der Variable ‘a’ angezeigt. Grund dafür ist die folgende Codezeile:
console.log(a);
Gutes Gelingen beim rustikalen Debuggen!