调试和跟踪 AJAX 应用程序概述

项目
10/22/2014

更新：2007 年 11 月

支持 AJAX 的 ASP.NET 应用程序包含服务器代码和客户端代码的组合。浏览器也可以异步请求其他数据。这会使支持 AJAX 的 Web 应用程序难以调试。本概述讨论一些可帮助您更轻松地调试代码的方法和工具。

说明：
除 Visual Studio 和 Internet Explorer 外，本主题中提到的程序均为第三方工具，Microsoft 不提供相应支持。有关许可和支持的信息，请访问这些工具对应的网站。

本主题包括：

方案
背景
类参考

方案

在开发的不同阶段，可使用下面的方法来调试支持 AJAX 的 ASP.NET 应用程序：

在配置文件中启用调试。
在服务器上使用跟踪。
使用 Sys.Debug 类的方法设置断点并处理跟踪输出。
在浏览器中启用调试。
将 Visual Studio 2008 调试器附加到 Internet Explorer 实例，或使用外部工具在其他浏览器中进行调试。
使用外部工具捕获 HTTP 通信。

返回页首

背景

ASP.NET AJAX 结构提供一种用于发布模式和调试模式的模型。发布模式提供错误检查和异常处理，并针对性能进行了优化，同时使用最少量的脚本。调试模式提供更可靠的调试功能，如类型和参数检查。如果创建客户端脚本文件或脚本资源的调试版本，则 ASP.NET 将在应用程序处于调试模式时运行调试版本。这样一来，您可以在调试脚本中引发异常，但仍可以将发布代码的大小保持在最小。

Sys.Debug 是一个调试帮助器类，可提供用于在网页结尾以可读形式显示对象的方法。该类还显示跟踪消息，允许您使用断言并中断至调试器。一个扩展的 Error 对象 API 将提供有用的异常详细信息，并支持发布和调试模式。

以下各节提供有关可用于调试和跟踪的方法和工具的详细信息。

针对调试配置应用程序

若要启用调试，请将 compilation 元素添加到网站的根 Web.config 文件，然后将其 debug 属性设置为 true。有关更多信息，请参见 compilation 元素（ASP.NET 设置架构）。

下面的示例演示 Web.config 文件的一部分，其中已设置 debug 属性来进行调试。

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

启用调试时，ASP.NET 将使用 Microsoft AJAX Library 的调试版本和自定义客户端脚本文件的调试版本（如果可用）。

将应用程序从调试模式设置为发布模式以便进行部署

当部属支持 AJAX 的 ASP.NET 应用程序的发布版本时，请将应用程序设置为发布模式。这将确保 ASP.NET 使用的是 AJAX 库的性能优化的发布版本。如果已创建自定义脚本文件和脚本资源的调试版本和发布版本，则 ASP.NET 也使用这些发布版本。若要将应用程序设置为发布模式，请执行以下操作：

在 Web.config 文件中，如果 compilation 元素包含 debug 属性，请确保将 debug 属性设置为 false。
确保任何包含 ScriptManager 控件的网页的 ScriptMode 属性设置为 Release。

@ Page 指令的 debug 属性不会影响 ASP.NET AJAX 应用程序。ScriptManager 控件仅使用 Web.config 文件及其 IsDebuggingEnabled 和 ScriptMode 属性中的设置来确定是否呈现调试脚本。

在服务器上进行跟踪

如果在服务器上使用跟踪来调试已启用部分页呈现的网页，则应使用跟踪查看器 (Trace.axd) 来显示跟踪输出。可以将跟踪输出追加到页的结尾，此输出将在页第一次呈现时显示。但是，异步回发不会导致更新跟踪显示，因为只有需要刷新的 UpdatePanel 控件的内容才会发生更改。有关如何使用跟踪查看器的更多信息，请参见 ASP.NET 跟踪概述。

说明：
当页包含 ScriptManager 控件并且其 EnablePartialRendering 属性设置为 true 时，将启用部分页呈现。该页还必须包含一个或多个 UpdatePanel 控件。

调试帮助器类

ASP.NET 提供用于调试客户端应用程序的 Sys.Debug 类。通过调用 Sys.Debug 类的方法，可以以可读形式在页的末尾显示对象，显示跟踪消息，使用断言以及中断至启动调试器。

如果使用的是 Visual Studio 和 Internet Explorer，可以将 Visual Studio 调试器附加到浏览器，然后在**“输出”**窗口中查看调试器跟踪消息。如果未使用 Visual Studio，可以在页面上创建 textarea 元素并将其 ID 设置为 TraceConsole，以便在 Internet Explorer 中查看调试器跟踪消息。在 Mozilla Firefox 中，可以使用可用作扩展的工具来查看调试器跟踪消息。Apple Safari 和 Opera 浏览器在其各自的调试控制台中显示跟踪消息。

下表列出了 Sys.Debug 类的方法。

Sys.Debug.assert(condition, message, displayCaller)
检查条件，如果该条件为 false，则显示消息并提示用户中断至启动调试器。
Sys.Debug.clearTrace()
从 TraceConsoletextarea 元素清除所有跟踪消息。
Sys.Debug.traceDump(object, name)
将对象转储到调试器控制台和 TraceConsoletextarea 元素（如果可用）。
Sys.Debug.fail(message)
在调试器的输出窗口中显示消息，然后中断至启动调试器。
Sys.Debug.trace(text)
将文本行追加到调试器控制台和 TraceConsoletextarea 元素中（如果可用）。

下面的示例演示如何调用 Sys.Debug 类的方法：

<!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" runat="server">
    <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" runat="server">
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" />
    <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" runat="server">
    <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" runat="server">
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" />
    <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>

针对调试配置 Internet Explorer

默认情况下，Internet Explorer 会忽略它在 JavaScript 中遇到的问题。可使用以下过程启用调试。

在 Internet Explorer 中启用调试

在**“工具”菜单中单击“Internet 选项”**。
在**“高级”选项卡中，清除“禁用脚本调试(Internet Explorer)”复选框和“禁用脚本调试(其他)”**复选框。
选中**“显示每个脚本错误的通知”**复选框。
若要关闭“友好”错误消息，请清除**“显示友好 HTTP 错误消息”**复选框。

如果已启用“友好”错误消息并且来自服务器的 HTTP 500 错误响应的长度少于 513 个字节，则 Internet Explorer 会将内容屏蔽。Internet Explorer 将显示适用于最终用户（而不是开发人员）的消息来代替错误信息。

将 Visual Studio 调试器附加到 Internet Explorer

若要调试客户端脚本，必须将调试器附加到 Internet Explorer。在 Visual Studio 中，如果启动应用程序以进行调试（通过按 F5 或使用**“调试”菜单中的“启动调试”**命令），则会自动附加调试器。

也可以在应用程序已运行时将 Visual Studio 调试器附加到 Internet Explorer。为此，请在**“调试”菜单上单击“附加到进程...”。在“附加到进程”**对话框中，选择要将调试器附加到的 Internet Explorer 实例 (iexplore.exe)。

说明：
如果已对 Internet Explorer 进行了调试配置，则 Internet Explorer 的相关实例的“类型”列将显示“脚本，x86”[Script, x86]。如果在“类型”列中只看到“x86”，请确保已对 Internet Explorer 进行了调试配置。

如果 Internet Explorer 遇到一个脚本错误并已针对脚本调试进行了配置，但当前未附加到调试器，则浏览器将提示您选择一个调试器。可以继续而不调试，也可以附加一个调试器并单步执行代码。

Internet Explorer 的已知调试问题和解决方法

当调试使用 Internet Explorer 的 ASP.NET AJAX 应用程序时，请注意下列问题和解决方法：

在将 Visual Studio 调试器附加到 Internet Explorer 之后，可以在**“脚本资源管理器”窗口中查看所调试的脚本的列表。（若要显示此窗口，请在“调试”菜单中单击“窗口”，再单击“脚本资源管理器”。）ASP.NET AJAX 客户端库将显示为以“ScriptResource.axd?...”**开始的资源，这是服务器从 ASP.NET AJAX 程序集中动态生成的。Visual Studio 中的已知问题可能会阻止您打开文件。如果 Visual Studio 针对上述情况显示错误消息，或忽略对文件名的单击，则会关闭所有已打开的脚本文件。然后，可以打开页并选择要调试的脚本文件。
在调试器单步执行 ASP.NET 页上的 JavaScript 代码之前，不能在此页中的 script 元素内的 JavaScript 代码中设置断点。若要解决此问题，请在发出调用的函数上设置断点，并单步执行 ASP.NET 网页上的代码。当调试器在页中的一行 JavaScript 代码上停止之后，可以像往常一样设置断点。让调试器识别 ASP.NET 页中的脚本的另一种方法是在调用 Sys.Debug.fail 方法的 ASP.NET 页文件中创建一个方法。调用此方法时，调试器将在对 Sys.Debug.fail 的调用处停止，并允许您在其他位置设置断点。第三种替代方式是将所有自定义代码放置在外部 JavaScript 文件中。
Visual Studio 允许您在常规 JavaScript 函数的第一行中设置断点，但不允许为 ASP.NET AJAX 库中使用的匿名方法在第一行上设置断点。如果匿名方法只包含一行代码，或必须在匿名方法的第一行中设置断点，请插入虚拟代码行。然后，可以在方法的第二行中设置断点。

IIS 7.0 已知问题

当在 Windows Vista 上使用 IIS 7.0 运行支持 AJAX 的 ASP.NET 页时，如果将托管管道模式设置为“集成”时，将不会对 ScriptResourceHandler 类处理的脚本进行缓存。但在将托管管道模式设置为“经典”时，将对这些脚本进行缓存。

有关 IIS 7.0 的托管管道模式的更多信息，请参见 Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode（将 ASP.NET 应用程序升级到 IIS 7.0：IIS 7.0 集成模式与经典模式之间的区别）。

捕获 HTTP 通信

在开发 Web 应用程序时，监视服务器和客户端之间的 HTTP 通信通常会很有用。可以执行此任务的工具为 Fiddler，您可以从 MSDN 网站上的 Fiddler PowerToy 页获取此工具。Fiddler 将作为一个代理运行，可记录所有 HTTP 通信。它支持 Internet Explorer 和其他浏览器。通过使用 Fiddler，可以检查每个请求和响应，包括标题、Cookie 和消息内容。

在 Mozilla Firefox 中进行调试

Mozilla Firefox 不与 Visual Studio 调试器集成。因此，不能使用 Visual Studio 调试器来分步执行在 Firefox 中运行的客户端代码。但是，Firefox 支持一些调试功能，如 JavaScript 控制台。也可以安装 Mozilla 提供的下列可增强调试功能的扩展：

FireBug可用于分步执行客户端脚本并检查 HTML DOM 元素。它还提供脚本控制台、命令行和其他工具。
JavaScript Debugger（JavaScript 调试器）也称为“Venkman”，可提供 JavaScript 调试环境，其中包括源代码浏览器和其他功能。
Web Developer extension（Web Developer 扩展）可用于检查 DOM 和 CSS 样式。

Fiddler 也可与 Firefox 一起使用。但是，必须将 Firefox 配置为通过在本地计算机的端口 8888 上运行的代理来路由 HTTP 请求。有关更多信息，请参见 Fiddler 网站上的“Configuring Clients”（配置客户端）页。

返回页首

类参考

Sys.Debug 类
提供定义断点和处理跟踪输出的方法。

返回页首

请参见

任务

组件库资源本地化概述

概念

ASP.NET AJAX 概述

添加 AJAX 和客户端功能

通过

调试和跟踪 AJAX 应用程序概述

方案

背景

针对调试配置应用程序

将应用程序从调试模式设置为发布模式以便进行部署

在服务器上进行跟踪

调试帮助器类

针对调试配置 Internet Explorer

在 Internet Explorer 中启用调试

将 Visual Studio 调试器附加到 Internet Explorer

Internet Explorer 的已知调试问题和解决方法

IIS 7.0 已知问题

捕获 HTTP 通信

在 Mozilla Firefox 中进行调试

类参考

请参见

任务

概念

其他资源