Exemplarische Vorgehensweise: Debuggen von Webseiten in Visual Web Developer

  • Artikel

Aktualisiert: November 2007

Visual Web Explorer stellt Ihnen Tools zur Verfügung, mit denen Sie Fehler auf Ihren ASP.Net-Webseiten ermitteln können. In dieser exemplarischen Vorgehensweise verwenden Sie den Debugger, mit dem Sie die Codezeilen der Seite zeilenweise durchlaufen und die Werte der Variablen prüfen können.

In der exemplarischen Vorgehensweise erstellen Sie eine Webseite, die einen einfachen Rechner zum Quadrieren von Zahlen enthält. Nach dem Erstellen der Seite (auf der absichtlich ein Fehler eingefügt wurde) prüfen Sie die Seite mit dem Debugger, während sie ausgeführt wird.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

  • Festlegen von Haltepunkten.

  • Aufrufen des Debuggers über eine Web Form-Seite auf einer Dateisystem-Website.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

  • Visual Web Developer und .NET Framework.

Sie sollten außerdem über allgemeine Kenntnisse in Visual Web Developer verfügen. Eine Einführung in Visual Web Developer finden Sie unter Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer.

Erstellen der Website und der Seite

Im ersten Teil der exemplarischen Vorgehensweise erstellen Sie eine Seite, die Sie debuggen können.

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (beispielsweise beim Durcharbeiten des Themas Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und mit dem Abschnitt "Hinzufügen von Steuerelementen zum Debuggen" unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

  1. Öffnen Sie Visual Web Developer.

  2. Klicken Sie im Menü Datei auf Neue Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  4. Klicken Sie im Feld Speicherort auf Dateisystem, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie z. B. den Ordnernamen C:\WebSites ein.

  5. Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.

    Die Programmiersprache, die Sie auswählen, ist die Standardeinstellung für die Website. Sie können jedoch auch mehrere Sprachen in der gleichen Webanwendung verwenden, indem Sie Seiten und Komponenten in unterschiedlichen Programmiersprachen erstellen. Informationen zum Erstellen von Komponenten mit unterschiedlichen Sprachen finden Sie unter Ordner für freigegebenen Code in ASP.NET-Websites.

  6. Klicken Sie auf OK.

    Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Erstellen einer Seite zum Debuggen

Sie beginnen mit dem Erstellen einer neuen Seite. In dieser exemplarischen Vorgehensweise ist es von Bedeutung, dass Sie eine neue Seite mit im Folgenden beschriebenen Verfahren erstellen.

So fügen Sie der Website eine Seite hinzu

  1. Schließen Sie die Seite Default.aspx.

  2. Klicken Sie Im Projektmappen-Explorer mit der rechten Maustaste auf Ihre Website (z. B. C:\WebSite), und wählen Sie Neues Element hinzufügen aus.

  3. Wählen Sie unter Von Visual Studio installierte Vorlagen die Option Web Form aus.

  4. Geben Sie im Feld Name die Zeichenfolge DebugPage.aspx ein.

  5. Wählen Sie in der Liste Sprache die Programmiersprache aus, die Sie verwenden möchten.

  6. Stellen Sie sicher, dass das Kontrollkästchen Code in eigener Datei platzieren deaktiviert ist.

    In dieser exemplarischen Vorgehensweise erstellen Sie eine aus einer Datei bestehende Seite, bei der sich Code und HTML-Code auf der gleichen Seite befinden. Der Code für die ASP.NET-Seiten kann sich auf der Seite oder in einer eigenen Klassendatei befinden. Weitere Informationen zum Speichern des Codes in einer eigenen Datei finden Sie unter Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite mit Codetrennung in Visual Web Developer.

  7. Klicken Sie auf Hinzufügen.

    Visual Web Developer erstellt die neue Seite und öffnet sie in der Quellansicht.

Sie können nun Steuerelemente und danach Code hinzufügen. Der Code ist einfach, es ist jedoch möglich, später Haltepunkte hinzuzufügen.

So fügen Sie Steuerelemente und Code zum Debuggen hinzu

  1. Wechseln Sie zur Entwurfsansicht. Ziehen Sie dann in der Toolbox aus dem Ordner Standard die folgenden Steuerelemente auf die Seite, und legen Sie ihre Eigenschaften wie folgt fest:

    Steuerelement

    Eigenschaften

    Label

    ID: CaptionLabel

    Text: (leer)

    TextBox

    ID: NumberTextBox

    Text: (leer)

    Button

    ID: SquareButton

    Text: Square

    Label

    ID: ResultLabel

    Text: (leer)
    Hinweis:

    Für diese exemplarische Vorgehensweise ist das Layout der Seite nicht wichtig.

  2. Doppelklicken Sie auf das Button-Steuerelement, um einen Click-Handler für das Steuerelement zu erstellen.

  3. Fügen Sie dem Click-Handler Logik hinzu, um eine als Square bezeichnete Funktion aufzurufen. Diese Funktion quadriert die vom Benutzer eingegebene Zahl. Der Handler könnte wie im folgenden Beispiel dargestellt aussehen.

    Hinweis:

    Das Codebeispiel enthält absichtlich keine Fehlerprüfung.

    		 
    Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

    protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

  4. Erstellen Sie die Funktion, die die Zahl quadriert. Fügen Sie einen Fehler im Code ein, durch den die Zahl nicht mit sich selbst multipliziert, sondern addiert wird. Der Code könnte dann wie im folgenden Beispiel dargestellt aussehen.

    Function Square(number As Integer) As Integer
    Square = number + number
End Function

    int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}

Sie können der Seite auch Code hinzufügen, der den Text der Beschriftung abhängig davon ändert, ob die Seite zum ersten Mal ausgeführt wird.

So ändern Sie das Label-Steuerelement

  1. Doppelklicken Sie in der Entwurfsansicht auf die Entwurfsoberfläche (kein Steuerelement), um einen Page_Load-Ereignishandler zu erstellen.

  2. Legen Sie den Text des Caption Label-Steuerelements auf Enter a number: fest, wenn die Seite zum ersten Mal ausgeführt wird. Legen Sie andernfalls Enter another number: fest. Der Handler könnte wie im folgenden Codebeispiel dargestellt aussehen.

    Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub

    if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}

Testen der Seite

Um die Funktionsfähigkeit der Seite sicherzustellen, führen Sie sie im aktuellen Zustand aus.

So führen Sie die Seite aus

  1. Speichern Sie die Seite.

  2. Drücken Sie STRG+F5, um die Seite auszuführen.

  3. Geben Sie die Zahl 3 ein, und klicken Sie auf die Schaltfläche Square.

    Beachten Sie, dass das Ergebnis falsch ist, da das Programm einen Fehler enthält. Das richtige Ergebnis ist 9.

  4. Schließen Sie den Browser.

Debuggen der Seite

In diesem Teil der exemplarischen Vorgehensweise prüfen Sie den Code der Seite mit dem Debugger zeilenweise, während die Seite ausgeführt wird. Außerdem fügen Sie Haltepunkte in den Code ein und führen die Seite dann im Debugmodus aus.

Sie beginnen mit dem Festlegen von Haltepunkten im Code. Ein Haltepunkt ist eine Zeile im Code, an dem die Ausführung angehalten und der Debugger aufgerufen wird.

So legen Sie Haltepunkte fest

  1. Wechseln Sie zur Quellansicht.

  2. Klicken Sie mit der rechten Maustaste auf die folgende Zeile, wählen Sie Haltepunkt und anschließend Haltepunkt einfügen aus.

    Hinweis:

    Durch Drücken von F9 können Sie Haltepunkte aktivieren bzw. deaktivieren.

    		 
    If Page.IsPostBack = False Then

    if(Page.IsPostBack == false)

  3. Legen Sie in der folgenden Zeile des SquareButton_Click-Handlers einen weiteren Haltepunkt fest:

    result = Square(number)

    result = Square(number);
    Hinweis:

    In einer Anweisung, die eine Variable deklariert, können Sie keinen Haltepunkt festlegen.

Wenn mindestens ein Haltepunkt festgelegt ist, können Sie den Debugger ausführen.

So führen Sie den Debugger aus

  1. Wählen Sie im Menü Debuggen die Option Debuggen starten aus (oder drücken Sie F5), um die Seite im Debugmodus auszuführen.

    Wenn Sie den Debugger zum ersten Mal ausführen, ist die Anwendung wahrscheinlich nicht zur Unterstützung des Debuggens konfiguriert. Standardmäßig ist Debuggen in Anwendungen deaktiviert, um einen Leistungsabfall zu vermeiden (Seiten werden im Debugger langsamer ausgeführt) und Sicherheitsrisiken auszuschließen. Visual Web Developer zeigt eine Meldung an, die Anweisungen zum Aktivieren des Debuggens enthält.

    Der Schalter zum Aktivieren des Debuggens wird als Einstellung in der Datei Web.config gespeichert, die verschiedene sitespezifische Konfigurationsoptionen enthält. Wenn die Datei Web.config nicht vorhanden ist, erstellt Visual Web Developer die Datei und nimmt die entsprechende Debugger-Einstellung vor.

    Wenn die Datei Web.config bereits vorhanden, das Debuggen jedoch nicht aktiviert ist, wird eine leicht abweichende Meldung anzeigt. Diese Meldung gibt an, dass Visual Web Developer die Datei Web.config ändern wird.

  2. Wenn die Meldung angibt, dass das Debuggen nicht aktiviert ist, klicken Sie auf OK, um das Debuggen zu aktivieren.

    In Visual Web Developer wechselt der Designer in der Debugmodus und zeigt den Code für die Seite und einige Fenster für den Debugger an.

    Der Debugger führt die Seite zeilenweise aus. Wenn der Debugger die Zeile mit dem Haltepunkt erreicht, hält er an und hebt die Zeile hervor.

    Da sich der Haltepunkt im Page_Load-Handler befindet, hat die Seite die Verarbeitung noch nicht abgeschlossen. Der Browser ist geöffnet, die Seite wird jedoch noch nicht angezeigt.

  3. Klicken Sie im Menü Debuggen klicken Sie auf Fenster, anschließend auf Überwachung und dann auf Überwachen 1.

    Hinweis:

    Wenn Sie Visual Web Developer Express Edition verwenden, stellt der Debugger nur ein Überwachungsfenster bereit.

    Damit wird ein Überwachungsfenster geöffnet, in dem Sie die Werte angeben können, die Sie überwachen möchten.

  4. Klicken Sie im Editor mit der rechten Maustaste auf den IsPostBack-Abschnitt des Page.IsPostBack-Ausdrucks, und klicken Sie dann aufÜberwachung hinzufügen.

    Damit wird der Ausdruck dem Überwachungsfenster hinzugefügt, und der aktuelle Wert der Eigenschaft (false) wird in der Spalte Wert angezeigt. Sie können auch den Namen einer Variablen oder Eigenschaft im Überwachungsfenster in der Spalte Name eingeben, wenn Sie diese Vorgehensweise bevorzugen.

  5. Wählen Sie im Menü Debuggen die Option Weiter aus, um die Ausführung fortzusetzen, oder drücken Sie F5.

    Der Befehl Weiter weist den Debugger an fortzufahren, bis der nächste Haltepunkt erreicht wird. Der Page_Load-Ereignishandler beendet die Verarbeitung, und die Seite wird im Browser angezeigt.

  6. Geben Sie den Wert 2 im Textfeld ein, und klicken Sie auf die Schaltfläche Square.

    Der Debugger wird erneut angezeigt, der Haltepunkt befindet sich in der Zeile im Page_Load-Handler. Dieses Mal zeigt das Überwachungsfenster an, dass Page.IsPostBack den Wert true hat.

  7. Drücken Sie zum Fortfahren erneut F5.

    Der Debugger verarbeitet den Page_Load-Handler und wechselt in den SquareButton_Click-Handler. Dort hält er am zweiten, von Ihnen festgelegten Haltepunkt an.

  8. Klicken Sie im Menü Debuggen auf Fenster, und klicken Sie anschließend auf Lokal.

    Damit wird das Fenster Lokal geöffnet, in dem die Werte aller Variablen und Objekte angezeigt werden, die sich in der aktuell ausgeführten Zeile im Gültigkeitsbereich befinden. Das Fenster Lokal stellt einen Alternative zum Anzeigen dieser Werte dar. Es bietet den Vorteil, dass Sie nicht ausdrücklich eine Überwachung für diese Elemente festlegen müssen. Ein Nachteil ist jedoch, dass das Fenster mehr Informationen enthalten kann, als sie gleichzeitig sehen möchten.

    Im Fenster Lokal wird für number ein Wert von 2 angezeigt. Der Wert von result lautet 0.

    Hinweis:

    Sie können den Wert einer Variablen im Programm auch anzeigen, indem Sie den Mauszeiger auf ihr platzieren.

  9. Klicken Sie im Fenster Lokal in der Spalte Wert mit der rechten Maustaste auf die Zeile für die number-Variable, und wählen Sie Wert bearbeiten aus. Bearbeiten Sie den Wert der number-Variablen, und ändern Sie ihn in 5.

    Der Wert 2 für die number-Variable ist kein geeigneter Test für das Programm, da sowohl Addieren als auch Quadrieren von 2 als Ergebnis 4 haben. Daher können Sie den Wert dieser Variablen ändern, wenn das Programm ausgeführt wird.

  10. Wählen Sie im Menü Debuggen die Option Einzelschritt aus, um in die Square-Funktion zu wechseln, oder drücken Sie F11.

    Der Befehl Einzelschritt bewirkt, dass der Debugger eine Zeile ausführt und dann erneut anhält.

  11. Gehen Sie den Code durch Drücken von F11 weiter in Einzelschritten durch, bis die folgende Codezeile erreicht wird.

    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)

        ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();

    Der Debugger durchläuft den Code zeilenweise. Wenn der Debugger die Square-Funktion durchläuft, können Sie im Fenster Lokal die an die Funktion (number) übergebenen Daten und den Rückgabewert der Funktion (Square) überprüfen.

  12. Klicken Sie im Menü Debuggen auf Fenster und anschließend auf Direkt.

    Im Fenster Direkt können Sie Befehle ausführen. Mithilfe des Fensters können Sie Ausdrücke auswerten (z. B. den Wert einer Eigenschaft abrufen).

  13. Geben Sie im Fenster Direkt folgenden Ausdruck ein, und drücken Sie die EINGABETASTE.

    ? NumberTextBox.Text

    Das Fragezeichen (?) ist im Fenster Direkt ein Operator, der den danach folgenden Ausdruck auswertet. In diesem Beispiel werten Sie die Text-Eigenschaft des NumberTextBox-Steuerelements auf der Seite aus. Sie können alle Variablen, Objekteigenschaften oder Ausdrücke mit diesen Elementen auswerten und dabei die gleiche Syntax verwenden, die sie in Code verwenden würden.

  14. Geben Sie im Fenster Direkt Folgendes ein, und drücken Sie die EINGABETASTE:

    NumberTextBox.Text = "5"

    Im Fenster Direkt können Sie nicht nur Ausdrücke auswerten, sondern auch Variablen oder Eigenschaften ändern.

  15. Drücken Sie F5, um die Ausführung des Programms fortzusetzen.

    Wenn die Seite angezeigt wird, wird das Ergebnis der Übergabe von 5 an die Square-Funktion angezeigt. Darüber hinaus wurde Text im Textfeld in 5 geändert.

Das angezeigte Ergebnis – 10 – ist nicht korrekt, da 10 nicht das Quadrat von 5 ist Sie können jetzt das Problem beheben.

So beheben Sie das Problem und führen den Test erneut aus

  1. Wechseln Sie vom Browser zu Visual Web Developer.

    Hinweis:

    Schließen Sie das Browserfenster nicht.

  2. Ändern Sie in der Square-Funktion den Operator "+" in den Operator "*".

    Da der Code derzeit nicht ausgeführt wird (die Verarbeitung der Seite wurde beendet), befinden Sie sich im Bearbeitungsmodus und können dauerhafte Änderungen vornehmen.

  3. Drücken Sie STRG+S, um die Seite zu speichern.

  4. Wählen Sie im Menü Debuggen die Option Alle Haltepunkte löschen aus, damit die Seite nicht bei jedem Ausführen angehalten wird.

    Hinweis:

    Sie können Haltepunkte auch durch Drücken von STRG+UMSCHALTTASTE+F9 löschen.

  5. Wechseln Sie zum Browserfenster.

  6. Geben Sie im Textfeld 5, und klicken Sie auf die Schaltfläche.

    Wenn Sie nun die Seite ausführen und einen Wert eingeben, wird er korrekt quadriert. Die zuvor vorgenommenen temporären Änderungen, z B. das Ändern der Text-Eigenschaft des NumberTextBox-Steuerelements, wurden nicht beibehalten, da sie nur bei der letzten Ausführung der Seite galten.

  7. Schließen Sie den Browser, um den Debugger anzuhalten.

Nächste Schritte

Der Debugger umfasst zusätzliche Features, die Sie bei der Arbeit mit dem Code unterstützen. Möglicherweise benötigen Sie weitere Informationen zu Techniken für den Umgang mit Fehlerbedingungen und Möglichkeiten zum Überwachen der Seitenverarbeitung zur Laufzeit. Sie könnten sich z. B. mit der Ablaufverfolgung vertraut machen. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Verwenden von Ablaufverfolgung in Visual Web Developer zum Suchen von Webseitenfehlern.

Siehe auch

Weitere Ressourcen

Debuggen in Visual Studio