Debugging JavaScript mit Visual Studio 2013

JavaScript oder auch kurz JS genannt, ist eine Skriptsprache, die ursprünglich entwickelt wurde, um dynamische Webseiten erstellen zu können. Obgleich heute (2014) die Möglichkeit besteht, JavaScript als serverseitige Skriptsprache zu verwenden, ist der Hauptanwendungsfall doch eher am Client. Sprich JavaScript wird in den meisten Fällen von einem Webbrowser interpretiert. Diese Tatsache führt zu einem Umdenken im Debugging von JavaScript-lastigen Anwendungen speziell für C# Entwickler.

Prinzipiell gibt es zwei verschiedene Möglichkeiten, um JavaScript zu debuggen. Erstens, sehr komfortabel mit Visual Studio 2013, oder zweitens, wenn Sie Visual Studio nicht zur Verfügung haben, auf eine etwas rustikalere Weise: mit dem Browser Ihres Vertrauens. Das kann beispielsweise der Internet Explorer 11 sein. In diesem Blogpost zeigen wir das Debuggen von JavaScript mit Visual Studio. Näheres zum Thema Debugging im Browser erfahren Sie in einem weiteren Blogpost.

Analysieren wir also kurz das folgende Skript mit Visual Studio 2013. Erstellen Sie zunächst eine Default.html-Seite in einem leeren Webprojekt und fügen Sie den untenstehenden Inhalt ein.

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Javascript mit Visual Studio 2013</title>
</head>
<body>
    <p><button id="btnStart">Start</button></p>
    <div id="lblAusgabe"></div>

    <script type="text/javascript">

    window.onload = function () {

        var ergebnis = document.getElementById("lblAusgabe");

        document.getElementById('btnStart').addEventListener("click", function () {

            var a = "blog.ppedv.de";
            //debugger;
            funktionZwei(a);

            function funktionZwei(a) {
                alert(a);
            }
        }, false);
    }
    </script>
</body>
</html>

 

Zur Erklärung: hier wird durch einen Button-Klick im Browserfenster eine Textnachricht als Alert-Box ausgegeben. Als ersten Schritt wird der Kommentar // vor debugger; gelöscht. Diese Anweisung gilt als programmierter Breakpoint. Ein Breakpoint hält das Skript an einer bestimmten Stelle an. Der Breakpoint kann aber auch manuell ohne Programmierung gesetzt werden. Dazu rechte Maus –> Kontextmenü in der gewünschten Zeile, und Breakpoint –> Insert Breakpoint wählen.

Als Nächstes muss der Internet Explorer als ausführender Browser in der Menüleiste aktiviert sein.

Start im Browser

Die Anwendung kann gestartet werden! Nach einem Klick auf den Button Start stoppt die Anwendung.

Breakpoint

In Visual Studio kann nun debuggt werden.

image

Im Fenster links unten ‘Locals’, können Sie die Variablen verfolgen. Wir sehen in der Variable ‘a’ steht der Wert “blog.ppedv.de”.

image

Mit den folgenden Schaltflächen kann über die Anwendung iteriert werden.

image

Einen Einzelschritt können Sie auch mit der Taste F11 ausführen. Mit der besagten Schaltfläche in der Menüleiste kann schließlich das Skript fertig ausgeführt werden:

image

Im Internet Explorer taucht nun ein Pop-Up mit dem Wert aus Variable ‘a’ auf.

image

Als Fazit kann angeführt werden, dass Microsoft Visual Studio eine ausgesprochen komfortable Lösung bietet, um u.a. clientseitiges JavaScript zu debuggen. In einem weiteren Blogbeitrag werden wir das Debuggen von Javascript mit Internet Explorer 11 vorstellen.

Kommentare sind geschlossen