Übersicht über das Debuggen und die Ablaufverfolgung von AJAX-Anwendungen

  • Artikel

Aktualisiert: November 2007

AJAX-fähige ASP.NET-Anwendungen enthalten eine Mischung aus Server- und Clientcode. Der Browser kann weitere Daten auch asynchron anfordern. Das Debuggen von AJAX-fähigen Webanwendungen kann hierdurch problematisch sein. In dieser Übersicht werden einige Techniken und Tools erläutert, die Ihnen das Debuggen des Codes erleichtern.

Hinweis:

Mit Ausnahme von Visual Studio und Internet Explorer sind die in diesem Thema erwähnten Programme Tools von Drittanbietern. Microsoft bietet für diese Tools keinen Support. Lizenzierungs- und Supportinformationen finden Sie auf der Website des jeweiligen Tools.

Dieses Thema enthält folgende Abschnitte:

  • Szenarien

  • Hintergrund

  • Klassenreferenz

Szenarien

Sie können eine AJAX-fähige ASP.NET-Anwendung in den verschiedenen Entwicklungsphasen mit den folgenden Ansätzen debuggen:

  • Aktivieren Sie das Debuggen in der Konfigurationsdatei.

  • Verwenden Sie die Ablaufverfolgung auf dem Server.

  • Verwenden Sie die Methoden der Sys.Debug-Klasse, um Haltepunkte festzulegen und Ablaufverfolgungsausgaben zu verarbeiten.

  • Aktivieren Sie das Debuggen im Browser.

  • Hängen Sie den Visual Studio 2008-Debugger an die Internet Explorer-Instanz an, oder verwenden Sie zum Debuggen externe Tools in anderen Browsern.

  • Zeichnen Sie den HTTP-Datenverkehr mit externen Tools auf.

Zurück nach oben

Hintergrund

Die ASP.NET-AJAX-Architektur stellt ein Modell für den Release- und den Debugmodus bereit. Der Releasemodus stellt bei minimiertem Skriptumfang eine Fehlerüberprüfung und eine Ausnahmebehandlung bereit, die in Hinsicht auf die Leistung optimiert ist. Der Debugmodus bietet robustere Debugfeatures, z. B. Typ- und Argumentüberprüfung. Wenn Sie Debugversionen von Clientskriptdateien oder Skriptressourcen erstellen und sich die Anwendung im Debugmodus befindet, werden von ASP.NET die Debugversionen ausgeführt. Dies ermöglicht Ihnen das Auslösen von Ausnahmen in Debugskripts, während der Releasecode möglichst klein bleibt.

Die Debughilfsklasse Sys.Debug stellt Methoden bereit, um am Ende einer Webseite Objekte in lesbarer Form anzuzeigen. Außerdem können Sie mithilfe dieser Klasse Verfolgungsmeldungen anzeigen, Assertions verwenden und den Debugger beeinflussen. Eine erweiterte Error-Objekt-API stellt hilfreiche Ausnahmedetails mit Unterstützung für Release- und Debugmodus bereit.

In den folgenden Abschnitten werden Details zu den Techniken und Tools bereitgestellt, die Sie zum Debuggen und zur Ablaufverfolgung verwenden können.

Konfigurieren der Anwendung für das Debuggen

Um das Debuggen zu aktivieren, fügen Sie der Datei Web.config im Stamm der Site ein compilation-Element hinzu und legen dessen debug-Attribut anschließend auf true fest. Weitere Informationen finden Sie unter compilation-Element (ASP.NET-Einstellungsschema).

Das folgende Beispiel enthält einen Abschnitt einer Web.config-Datei, in der das debug-Attribut für das Debuggen festgelegt ist.

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

Bei aktiviertem Debuggen werden von ASP.NET eine Debugversion der Microsoft AJAX Library und die Debugversionen der benutzerdefinierten Clientskriptdateien verwendet, sofern solche verfügbar sind.

Wechseln der Anwendung vom Debugmodus in den Releasemodus für die Bereitstellung

Legen Sie für die Anwendung den Releasemodus fest, wenn Sie eine Releaseversion einer AJAX-fähigen ASP.NET-Anwendung bereitstellen. Dadurch wird sichergestellt, dass ASP.NET die leistungsoptimierte Releaseversion der AJAX-Bibliotheken verwendet. Wenn Sie von Ihren benutzerdefinierten Skriptdateien und Skriptressourcen Debug- und Releaseversionen erstellt haben, werden von ASP.NET auch die Releaseversionen verwendet. Gehen Sie folgendermaßen vor, um für die Anwendung den Releasemodus festzulegen:

  • Wenn in der Datei Web.config das compilation-Element ein debug-Attribut enthält, stellen Sie sicher, dass das debug-Attribut auf false festgelegt ist.

  • Stellen Sie sicher, dass bei jeder Webseite, die ein ScriptManager-Steuerelement enthält, dessen ScriptMode-Eigenschaft auf Release festgelegt ist.

Das debug-Attribut der @ Page-Direktive wirkt sich auf ASP.NET-AJAX-Anwendungen nicht aus. Das ScriptManager-Steuerelement verwendet nur die Einstellungen in der Web.config-Datei sowie in den IsDebuggingEnabled- und ScriptMode-Eigenschaften, um festzustellen, ob Debugskripts gerendert werden sollen.

Ablaufverfolgung auf dem Server

Wenn Sie die Ablaufverfolgung auf dem Server verwenden, um Webseiten mit aktiviertem Teilrendering von Seiten zu debuggen, sollten Sie die Ablaufverfolgungsausgaben mit dem Ablaufverfolgungs-Viewer (Trace.axd) anzeigen. Sie können die Ablaufverfolgungsausgaben am Ende der Seite anfügen, und sie werden angezeigt, wenn die Seite zum ersten Mal gerendert wird. Allerdings wird die Ablaufverfolgungsanzeige bei asynchronen Postbacks nicht aktualisiert, da nur die Inhalte von UpdatePanel-Steuerelementen geändert werden, die aktualisiert werden müssen. Weitere Informationen über die Verwendung des Ablaufverfolgungs-Viewers finden Sie unter Übersicht über die ASP.NET-Ablaufverfolgung.

Hinweis:

Das Teilrendering von Seiten ist aktiviert, wenn die Seite ein ScriptManager-Steuerelement enthält, dessen EnablePartialRendering-Eigenschaft auf true festgelegt ist. Außerdem muss die Seite mindestens ein UpdatePanel-Steuerelement enthalten.

Debug-Hilfsklasse

ASP.NET stellt zum Debuggen von Clientanwendungen die Sys.Debug-Klasse bereit. Durch Aufrufen der Methoden der Sys.Debug-Klasse können Sie Objekte am Ende der Seite in lesbarer Form anzeigen, Ablaufverfolgungsmeldungen anzeigen, Assertionen verwenden und den Debugger beeinflussen.

Wenn Sie Visual Studio und Internet Explorer verwenden, können Sie den Visual Studio-Debugger an den Browser anhängen und die Ablaufverfolgungsmeldungen des Debuggers im Fenster Ausgabe anzeigen. Wenn Sie nicht Visual Studio verwenden, können Sie die Ablaufverfolgungsmeldungen des Debuggers in Internet Explorer anzeigen, indem Sie auf der Seite ein textarea-Element erstellen und dessen ID auf TraceConsole festlegen. In Mozilla Firefox können Sie die Ablaufverfolgungsmeldungen des Debuggers mithilfe von Tools anzeigen, die als Erweiterungen verfügbar sind. In den Browsern Apple Safari und Opera werden die Ablaufverfolgungsmeldungen jeweils in der Debugkonsole angezeigt.

In der folgenden Tabelle sind die Methoden der Sys.Debug-Klasse aufgelistet.

Im folgenden Beispiel wird veranschaulicht, wie Sie die Methoden der Sys.Debug-Klasse aufrufen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

Konfigurieren von Internet Explorer für das Debuggen

In der Standardeinstellung werden von Internet Explorer auftretende JavaScript-Probleme ignoriert. Sie können das Debuggen mit dem folgenden Verfahren aktivieren.

So aktivieren Sie das Debuggen in Internet Explorer

  1. Klicken Sie im Menü Extras auf Internetoptionen.

  2. Deaktivieren Sie auf der Registerkarte Erweitert die Kontrollkästchen Skriptdebugging deaktivieren (Internet Explorer) und Skriptdebugging deaktivieren (Andere).

  3. Aktivieren Sie das Kontrollkästchen zum Anzeigen von Benachrichtigungen für alle Skriptfehler.

  4. Um "kurze" Fehlermeldungen auszuschalten, deaktivieren Sie das Kontrollkästchen Kurze HTTP-Fehlermeldungen anzeigen.

    Bei aktivierten "kurzen" Fehlermeldungen wird der Inhalt von Internet Explorer maskiert, wenn eine HTTP-500-Fehlermeldung vom Server kürzer als 513 Byte ist. Statt der für Entwickler vorgesehenen Fehlermeldung wird von Internet Explorer eine Meldung für Endbenutzer angezeigt.

Anhängen des Visual Studio-Debuggers an Internet Explorer

Um Clientskripts zu debuggen, müssen Sie an Internet Explorer einen Debugger anhängen. Wenn Sie eine Anwendung in Visual Studio zum Debuggen starten (durch Drücken von F5 oder mit dem Befehl Debuggen starten im Menü Debuggen), wird der Debugger automatisch angefügt.

Sie können den Visual Studio-Debugger auch an Internet Explorer anfügen, wenn die Anwendung bereits ausgeführt wird. Klicken Sie hierfür im Menü Debuggen auf An den Prozess anhängen.... Wählen Sie im Dialogfeld An den Prozess anhängen die Instanz von Internet Explorer (iexplore.exe) aus, an die Sie den Debugger anhängen möchten.

Hinweis:

Wenn Internet Explorer für das Debuggen konfiguriert ist, wird in der Spalte Typ für die entsprechende Instanz von Internet Explorer Script, x86 angezeigt. Wenn in der Spalte Typ nur x86 angezeigt wird, stellen Sie sicher, dass Internet Explorer für das Debuggen konfiguriert ist.

Wenn Internet Explorer für das Debuggen von Skripts konfiguriert, jedoch gerade mit keinem Debugger verbunden ist, werden Sie beim Auftreten eines Skriptfehlers vom Browser aufgefordert, einen Debugger auszuwählen. Sie können entweder ohne Debuggen fortfahren oder einen Debugger anhängen und den Code schrittweise durchlaufen.

Bekannte Internet Explorer-Debugprobleme und Problemumgehungen

Beachten Sie beim Debuggen von ASP.NET-AJAX-Anwendungen, die Internet Explorer verwenden, die folgenden Probleme und Problemumgehungen:

  • Nach dem Anhängen des Visual Studio-Debuggers an Internet Explorer wird im Fenster Skript-Explorer eine Liste der Skripts angezeigt, die gerade gedebuggt werden. (Um dieses Fenster anzuzeigen, klicken Sie im Menü Debuggen auf Fenster, und klicken Sie dann auf Skript-Explorer). Die ASP.NET-AJAX-Clientbibliothek wird als mit ScriptResource.axd?... beginnende Ressource angezeigt, die vom Server dynamisch aus der ASP.NET-AJAX-Assembly generiert wird. Möglicherweise kann die Datei aufgrund eines bekannten Problem in Visual Studio nicht geöffnet werden. Wenn von Visual Studio eine entsprechende Fehlermeldung angezeigt oder das Klicken auf den Dateinamen ignoriert wird, schließen Sie alle geöffneten Skriptdateien. Anschließend können Sie die Seite öffnen und die Skriptdateien auswählen, die Sie debuggen möchten.

  • Sie können im JavaScript-Code in script-Elementen auf einer ASP.NET-Seite erst Haltepunkte festlegen, wenn der Debugger den JavaScript-Code auf dieser Seite im Einzelschrittmodus ausführt. Legen Sie den Haltepunkt zur Umgehung dieses Problems auf die aufrufende Funktion fest, und wechseln Sie so im Einzelschrittmodus in den Code auf der ASP.NET-Webseite. Sie können die Haltepunkte wie gewohnt festlegen, wenn der Debugger auf einer JavaScript-Codezeile auf der Seite angehalten hat. Sie können auch festlegen, dass vom Debugger Skripts auf einer ASP.NET-Seite erkannt werden, indem Sie in der Datei der ASP.NET-Seite eine Methode erstellen, die die Sys.Debug.fail-Methode aufruft. Wenn Sie diese Methode verwenden, hält der Debugger beim Aufruf von Sys.Debug.fail an, und Sie können beliebige Haltepunkte festlegen. Eine dritte Möglichkeit besteht darin, den gesamten benutzerdefinierten Code in externen JavaScript-Dateien zu speichern.

  • In Visual Studio können Sie einen Haltepunkt auf die erste Zeile einer normalen JavaScript-Funktion festlegen, jedoch nicht auf die erste Zeile anonymer Methoden, wie sie ASP.NET in AJAX-Bibliotheken verwendet. Wenn eine anonyme Methode nur eine Codezeile enthält, oder wenn Sie einen Haltepunkt auf die erste Zeile einer anonymen Methode festlegen müssen, fügen Sie eine Dummycodezeile ein. Anschließend können Sie den Haltepunkt auf die zweite Zeile der Methode festlegen.

Bekannte Probleme bei IIS 7.0

Wenn Sie ASP.NET-AJAX-fähige Seiten mit IIS 7.0 unter Windows Vista ausführen und der verwaltete Pipelinemodus auf den integrierten Modus festgelegt ist, werden die von der ScriptResourceHandler-Klasse verarbeiteten Skripts nicht zwischengespeichert. Die Skripts werden jedoch zwischengespeichert, wenn der verwaltete Pipelinemodus auf den klassischen Modus festgelegt ist.

Weitere Informationen über den verwalteten Pipelinemodus von IIS 7.0 finden Sie unter Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode.

Aufzeichnen von HTTP-Datenverkehr

Beim Entwickeln von Webanwendungen erweist es sich häufig als hilfreich, den HTTP-Datenverkehr zwischen dem Server und dem Client zu überwachen. Ein Tool zum Durchführen dieser Aufgabe ist Fiddler. Dieses Tool finden Sie auf der MSDN-Website unter Fiddler PowerToy. Das Fiddler-Tool wird als Proxy ausgeführt, von dem der gesamte HTTP-Datenverkehr protokolliert wird. Es unterstützt Internet Explorer und andere Browser. Mit dem Fiddler-Tool können Sie alle Anforderungen und Antworten untersuchen, einschließlich der Header, Cookies und Meldungsinhalte.

Debuggen in Mozilla Firefox

Mozilla Firefox ist im Visual Studio-Debugger nicht integriert. In Firefox ausgeführten Clientcode können Sie daher mit dem Visual Studio-Debugger nicht schrittweise durchlaufen. Firefox unterstützt allerdings verschiedene Debugfunktionen, z. B. eine JavaScript-Konsole. Außerdem können Sie die folgenden Erweiterungen installieren, die von Mozilla zur Verfügung gestellt werden, um die Debugfunktionen zu verbessern:

  • FireBug ermöglicht das schrittweise Durchlaufen von Clientskripts und die Überprüfung von HTML-DOM-Elementen. Außerdem werden eine Skriptkonsole, eine Befehlszeile und andere Tools bereitgestellt.

  • Der JavaScript Debugger (auch unter der Bezeichnung "Venkman" bekannt) stellt eine JavaScript-Debugumgebung bereit, zu der ein Quellcodebrowser und weitere Funktionen gehören.

  • Die Web Developer extension ermöglicht Ihnen, das DOM und die CSS-Stile zu untersuchen.

Das Fiddler-Tool wird auch von Firefox unterstützt. Sie müssen Firefox jedoch so konfigurieren, dass HTTP-Anforderungen über den Proxy weitergeleitet werden, der auf dem lokalen Computer auf Port 8888 ausgeführt wird. Weitere Informationen finden Sie auf der Fiddler-Website unter "Configuring Clients".

Zurück nach oben

Klassenreferenz

  • Sys.Debug-Klasse
    Stellt Methoden bereit, die Haltepunkte definieren und die Ablaufverfolgungsausgaben verarbeiten.

Zurück nach oben

Siehe auch

Aufgaben

Lokalisieren von Ressourcen für die Übersicht über Komponentenbibliotheken

Konzepte

Übersicht über ASP.NET-AJAX

Hinzufügen von AJAX- und Clientfunktionen