了解 ASP.NET AJAX 调试功能

作者 ：Scott Cate

调试代码的能力是每个开发人员都应具备的技能，无论他们使用的技术如何。 虽然许多开发人员习惯于使用 Visual Studio .NET 或 Web Developer Express 来调试使用 VB.NET 或 C# 代码的 ASP.NET 应用程序，但一些开发人员不知道它对于调试客户端代码（如 JavaScript）也非常有用。 用于调试 .NET 应用程序的相同技术类型也可以应用于已启用 AJAX 的应用程序，更具体地说，ASP.NET AJAX 应用程序。

调试 ASP.NET AJAX 应用程序

Dan Wahlin

调试代码的能力是每个开发人员都应具备的技能，无论他们使用的技术如何。 不言而喻，了解可用的不同调试选项可以节省大量的项目时间，甚至可能有些头疼。 虽然许多开发人员习惯于使用 Visual Studio .NET 或 Web Developer Express 来调试使用 VB.NET 或 C# 代码的 ASP.NET 应用程序，但一些开发人员不知道它对于调试客户端代码（如 JavaScript）也非常有用。 用于调试 .NET 应用程序的相同技术类型也可以应用于已启用 AJAX 的应用程序，更具体地说，ASP.NET AJAX 应用程序。

在本文中，你将了解如何使用 Visual Studio 2008 和其他一些工具来调试 ASP.NET AJAX 应用程序，以快速查找 bug 和其他问题。 此讨论将包括有关启用 Internet Explorer 6 或更高版本进行调试、使用 Visual Studio 2008 和脚本资源管理器单步执行代码以及使用其他免费工具（如 Web 开发帮助程序）的信息。 你还将了解如何使用名为 Firebug 的扩展在 Firefox 中调试 ASP.NET AJAX 应用程序，该扩展使你无需任何其他工具即可直接在浏览器中单步执行 JavaScript 代码。 最后，将介绍 ASP.NET AJAX 库中的类，这些类可帮助执行各种调试任务，例如跟踪和代码断言语句。

在尝试调试在 Internet Explorer 中查看的页面之前，需要执行几个基本步骤才能启用它进行调试。 让我们看一下需要执行的一些基本设置要求才能开始。

配置 Internet Explorer 进行调试

大多数人对在通过 Internet Explorer 查看的网站上遇到的 JavaScript 问题不感兴趣。 事实上，如果普通用户看到错误消息，甚至不知道该怎么做。 因此，默认情况下，调试选项在浏览器中处于关闭状态。 但是，在开发新的 AJAX 应用程序时打开调试并使用它非常简单。

若要启用调试功能，请转到 Internet Explorer 菜单上的“工具 Internet 选项”，然后选择“高级”选项卡。在“浏览”部分中，确保取消选中以下项：

• (Internet Explorer) 禁用脚本调试
• 禁用脚本调试 (其他)

虽然不是必需的，但如果尝试调试应用程序，则可能希望页面中的任何 JavaScript 错误立即可见且明显。 可以通过选中“显示有关每个脚本错误的通知”复选框，强制使用消息框显示所有错误。 虽然这是在开发应用程序时启用的极佳选项，但如果只是浏览其他网站，它很快就会变得烦人，因为遇到 JavaScript 错误的可能性相当大。

图 1 显示了 Internet Explorer 高级对话框在正确配置调试后应查看的内容。

图 1：配置 Internet Explorer 进行调试。 (单击以查看全尺寸图像)

启用调试后，你将在名为“脚本调试器”的“视图”菜单中看到一个新菜单项。 它有两个选项可用，包括打开和中断在下一语句。 选择“打开”时，系统会提示你调试 Visual Studio 2008 中的页面 (请注意，Visual Web Developer Express 也可用于调试) 。 如果 Visual Studio .NET 当前正在运行，可以选择使用该实例或创建新实例。 选择“下一语句时中断”时，系统会提示在执行 JavaScript 代码时调试页面。 如果 JavaScript 代码在页面的 onLoad 事件中执行，则可以刷新页面以触发调试会话。 如果 JavaScript 代码在单击按钮后运行，则调试器将在单击按钮后立即运行。

注意

如果在启用了 User 访问控制 (UAC) 的 Windows Vista 上运行，并且 Visual Studio 2008 设置为以管理员身份运行，则当系统提示你附加时，Visual Studio 将无法附加到进程。 若要解决此问题，请先启动 Visual Studio，然后使用该实例进行调试。

尽管下一部分将演示如何直接从 Visual Studio 2008 中调试 ASP.NET AJAX 页面，但当页面已打开并且你想要更全面地检查它时，使用 Internet Explorer 脚本调试器选项非常有用。

使用 Visual Studio 2008 进行调试

Visual Studio 2008 提供调试功能，世界各地的开发人员每天都依赖这些功能来调试 .NET 应用程序。 内置调试器允许单步执行代码、查看对象数据、watch特定变量、监视调用堆栈等。 除了调试 VB.NET 或 C# 代码外，调试器还有助于调试 ASP.NET AJAX 应用程序，并使你可以逐行执行 JavaScript 代码。 以下详细信息侧重于可用于调试客户端脚本文件的技术，而不是提供有关使用 Visual Studio 2008 调试应用程序整个过程的论述。

Visual Studio 2008 中的页面调试过程可以通过几种不同的方式启动。 首先，可以使用上一部分中提到的 Internet Explorer 脚本调试器选项。 当页面已加载到浏览器中并且你想要开始调试它时，这很有效。 或者，可以右键单击解决方案资源管理器中的 .aspx 页，然后从菜单中选择“设为起始页”。 如果你习惯于调试 ASP.NET 页面，那么你可能以前也这样做过。 按 F5 后，可以调试页面。 但是，虽然通常可以在 VB.NET 或 C# 代码中任意位置设置断点，但 JavaScript 并非总是如此，接下来将看到。

嵌入式脚本与外部脚本

Visual Studio 2008 调试器处理嵌入的页面与外部 JavaScript 文件不同的 JavaScript。 使用外部脚本文件，可以打开文件并在所选的任何行上设置断点。 可以通过单击代码编辑器窗口左侧的灰色托盘区域来设置断点。 当 JavaScript 直接嵌入到使用 <script> 标记的页面时，无法通过单击灰色托盘区域来设置断点。 尝试在嵌入的脚本行上设置断点将导致一条警告，指出“这不是断点的有效位置”。

可以通过将代码移动到外部.js文件并使用脚本>标记的 <src 属性引用它来解决此问题：

<script type="text/javascript" src="Scripts/YourScript.js"></script>

如果将代码移动到外部文件中不是一个选项，或者需要的工作量超出其价值，该怎么办？ 虽然无法使用编辑器设置断点，但可以直接将调试器语句添加到要开始调试的代码中。 还可以使用 ASP.NET AJAX 库中提供的 Sys.Debug 类强制启动调试。 本文稍后将详细了解 Sys.Debug 类。

清单 1 中显示了使用debugger关键字 (keyword) 的示例。 此示例强制调试器在调用更新函数之前中断。

列表 1. 使用调试器关键字 (keyword) 强制 Visual Studio .NET 调试器中断。

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

命中调试器语句后，系统会提示你使用 Visual Studio .NET 调试页面，并且可以开始单步执行代码。 执行此操作时，在访问页面中使用的 ASP.NET AJAX 库脚本文件时可能会遇到问题，因此让我们看看如何使用 Visual Studio 。NET 的脚本资源管理器。

使用 Visual Studio .NET Windows 进行调试

启动调试会话并开始使用默认 F11 键遍历代码后，可能会遇到见图 2 中显示的错误对话框，除非页面中使用的所有脚本文件都已打开并可供调试。

图 2：没有可用于调试的源代码时显示的错误对话框。 (单击以查看全尺寸图像)

之所以显示此对话框，是因为 Visual Studio .NET 不确定如何获取页面引用的某些脚本的源代码。 虽然这一开始可能相当令人沮丧，但有一个简单的解决方法。 启动调试会话并命中断点后，转到 Visual Studio 2008 菜单上的“调试 Windows 脚本资源管理器”窗口，或使用 Ctrl+Alt+N 热键。

注意

如果看不到列出的“脚本资源管理器”菜单，请转到 Visual Studio .NET 菜单上的 “工具>自定义>命令 ”。 在“类别”部分找到 “调试” 条目，然后单击它以显示所有可用的菜单条目。 在“命令”列表中，向下滚动到“脚本资源管理器”，然后将其向上拖动到前面提到的“调试 Windows”菜单中。 执行此操作将使脚本资源管理器菜单条目在每次运行 Visual Studio .NET 时都可用。

脚本资源管理器可用于查看页面中使用的所有脚本，并在代码编辑器中打开这些脚本。 打开脚本资源管理器后，双击当前正在调试的 .aspx 页，以在代码编辑器窗口中将其打开。 对脚本资源管理器中显示的所有其他脚本执行相同的操作。 在代码窗口中打开所有脚本后，可以按 F11 (并使用其他调试热键) 单步执行代码。 图 3 显示了脚本资源管理器的示例。 其中列出了当前要调试的当前文件 (Demo.aspx) ，以及 ASP.NET AJAX ScriptManager 动态注入页面的两个自定义脚本和两个脚本。

图 3. 使用脚本资源管理器可以轻松访问页面中使用的脚本。 (单击以查看全尺寸图像)

在单步执行页面中的代码时，还可以使用其他几个窗口来提供有用的信息。 例如，可以使用“局部变量”窗口查看页面中使用的不同变量的值，使用“即时”窗口来评估特定变量或条件并查看输出。 还可以使用“输出”窗口查看使用 Sys.Debug.trace 函数写出的跟踪语句 (本文稍后将介绍) 或 Internet Explorer 的 Debug.writeln 函数。

使用调试器单步执行代码时，可以将鼠标悬停在代码中的变量上，以查看为其分配的值。 但是，将鼠标悬停在给定的 JavaScript 变量上时，脚本调试器偶尔不会显示任何内容。 若要查看值，请突出显示你尝试在代码编辑器窗口中看到的语句或变量，然后将鼠标悬停在它上方。 尽管此方法并非在每种情况下都起作用，但很多时候，你将能够看到值，而无需查看不同的调试窗口（如“局部变量”窗口）。

演示此处讨论的一些功能的视频教程可在 上 http://www.xmlforasp.net查看。

使用 Web 开发帮助程序进行调试

尽管 Visual Studio 2008 (和 Visual Web Developer Express 2008) 是功能非常强大的调试工具，但也可以使用其他更轻量级的选项。 要发布的最新工具之一是 Web 开发帮助程序。 Microsoft 的 Nikhil Kothari (Microsoft) AJAX 架构师的关键 ASP.NET 之一编写了这一出色的工具，该工具可以执行从简单调试到查看 HTTP 请求和响应消息等许多不同的任务。

Web 开发帮助程序可以直接在 Internet Explorer 中使用，方便使用。 首先，从 Internet Explorer 菜单中选择“工具”“Web 开发帮助程序”。 这将在浏览器的底部打开该工具，这是很好的，因为你不必离开浏览器来执行多个任务，如 HTTP 请求和响应消息日志记录。 图 4 显示了 Web 开发帮助程序在操作中的外观。

图 4：Web 开发帮助程序 (单击以查看全尺寸图像)

Web 开发帮助程序不是用于逐行逐行执行代码的工具，与 Visual Studio 2008 一样。 但是，它可用于查看跟踪输出、轻松评估脚本中的变量或浏览 JSON 对象中的数据。 它对于查看传入和传出 ASP.NET AJAX 页面和服务器的数据也非常有用。

在 Internet Explorer 中打开 Web 开发帮助程序后，必须通过从 Web 开发帮助程序菜单中选择“启用脚本调试”来启用脚本调试，如图 4 所示。 这使该工具能够截获在运行页面时发生的错误。 它还允许轻松访问页面中输出的跟踪消息。 若要查看跟踪信息或执行脚本命令以测试页面中的不同功能，请从“Web 开发帮助程序”菜单中选择“脚本显示脚本控制台”。 这提供了对命令窗口和简单即时窗口的访问。

查看跟踪消息和 JSON 对象数据

即时窗口可用于执行脚本命令，甚至加载或保存用于在页面中测试不同函数的脚本。 命令窗口显示正在查看的页面写出的跟踪或调试消息。 列表 2 演示如何使用 Internet Explorer 的 Debug.writeln 函数编写跟踪消息。

列表 2. 使用 Debug 类写出客户端跟踪消息。

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

如果 LastName 属性包含 Doe 的值，则 Web 开发帮助程序将在脚本控制台的命令窗口中显示消息“Person name： Doe”， (假定已在) 启用调试。 Web 开发帮助程序还会将顶级 debugService 对象添加到可用于写出跟踪信息或查看 JSON 对象内容的页面中。 列表 3 显示了使用 debugService 类的跟踪函数的示例。

列表 3. 使用 Web 开发帮助程序 debugService 类编写跟踪消息。

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

debugService 类的一个很好的功能是，即使 Internet Explorer 中未启用调试，它也能正常工作，这样就可以在 Web 开发帮助程序运行时始终轻松访问跟踪数据。 当工具未用于调试页面时，跟踪语句将被忽略，因为对 window.debugService 的调用将返回 false。

debugService 类还允许使用 Web 开发帮助程序检查器窗口查看 JSON 对象数据。 列表 4 创建包含人员数据的简单 JSON 对象。 创建对象后，将调用 debugService 类的检查函数，以便直观地检查 JSON 对象。

列表 4. 使用 debugService.inspect 函数查看 JSON 对象数据。

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

在页面中或通过即时窗口调用 GetPerson () 函数将导致“对象检查器”对话框窗口出现，如图 5 所示。 可以通过突出显示属性、更改“值”文本框中显示的值，然后单击“更新”链接来动态更改对象中的属性。 使用对象检查器可以直接查看 JSON 对象数据，并尝试对属性应用不同的值。

调试错误

除了允许显示跟踪数据和 JSON 对象外，Web 开发帮助程序还可以帮助调试页面中的错误。 如果遇到错误，系统会提示你继续执行下一行代码或调试脚本 (请参阅图 6) 。 “脚本错误”对话框窗口显示完整的调用堆栈以及行号，以便轻松识别脚本中的问题所在位置。

图 5：使用“对象检查器”窗口查看 JSON 对象。 (单击以查看全尺寸图像)

选择调试选项可以直接在 Web 开发帮助程序即时窗口中执行脚本语句，以查看变量的值、写出 JSON 对象等。 如果再次执行触发该错误的相同操作，并且 Visual Studio 2008 在计算机上可用，系统将提示你启动调试会话，以便你可以逐行逐行执行，如上一部分所述。

图 6：Web 开发帮助程序“脚本错误”对话框 (单击以查看全尺寸图像)

检查请求和响应消息

调试 ASP.NET AJAX 页面时，查看在页面和服务器之间发送的请求和响应消息通常很有用。 通过查看消息中的内容，可以查看是否传递了正确的数据以及消息的大小。 Web 开发帮助程序提供出色的 HTTP 消息记录器功能，使以原始文本或更易读的格式查看数据变得容易。

若要查看 ASP.NET AJAX 请求和响应消息，必须通过从“Web 开发帮助程序”菜单中选择“HTTP 启用 HTTP 日志记录”来启用 HTTP 记录器。 启用后，可以在 HTTP 日志查看器中查看从当前页发送的所有消息，该查看器可通过选择“HTTP 显示 HTTP 日志”进行访问。

尽管查看每个请求/响应消息中发送的原始文本当然很有用， (和 Web 开发帮助程序) 中的一个选项，但以更图形化的格式查看消息数据通常更容易。 启用 HTTP 日志记录并记录消息后，可以通过双击 HTTP 日志查看器中的消息来查看消息数据。 这样做可让你查看与邮件关联的所有标头以及实际消息内容。 图 7 显示了 HTTP 日志查看器窗口中查看的请求消息和响应消息的示例。

图 7：使用 HTTP 日志查看器查看请求和响应消息数据。 (单击以查看全尺寸图像)

HTTP 日志查看器自动分析 JSON 对象并使用树视图显示它们，以便快速轻松地查看对象的属性数据。 当在 ASP.NET AJAX 页中使用 UpdatePanel 时，查看器会将消息的每个部分分解为单独的部分，如图 8 所示。 与查看原始消息数据相比，这是一项出色的功能，使查看和理解消息中的内容更加容易。

图 8：使用 HTTP 日志查看器查看的 UpdatePanel 响应消息。 (单击以查看全尺寸图像)

除了 Web 开发帮助程序之外，还有其他几个工具可用于查看请求和响应消息。 另一个不错的选择是 Fiddler，可在 免费使用 http://www.fiddlertool.com。 尽管此处不会讨论 Fiddler，但当你需要彻底检查邮件头和数据时，这也是一个不错的选择。

使用 Firefox 和 Firebug 进行调试

虽然 Internet Explorer 仍然是使用最广泛的浏览器，但其他浏览器（如 Firefox）已变得相当受欢迎，并且被越来越多的使用。 因此，你需要在 Firefox 和 Internet Explorer 中查看和调试 ASP.NET AJAX 页面，以确保应用程序正常工作。 尽管 Firefox 无法直接连接到 Visual Studio 2008 进行调试，但它有一个名为 Firebug 的扩展，可用于调试页面。 可以转到 免费 http://www.getfirebug.com下载 Firebug。

Firebug 提供功能齐全的调试环境，可用于逐行执行代码、访问页面中使用的所有脚本、查看 DOM 结构、显示 CSS 样式，甚至跟踪页面中发生的事件。 安装后，可以通过从 Firefox 菜单中选择“工具”“Firebug 打开 Firebug”来访问 Firebug。 与 Web 开发帮助程序一样，Firebug 可直接在浏览器中使用，尽管它也可用作独立应用程序。

运行 Firebug 后，无论脚本是否嵌入页面，都可以在 JavaScript 文件的任何行上设置断点。 若要设置断点，请先加载想要在 Firefox 中调试的相应页面。 加载页面后，从 Firebug 的“脚本”下拉列表中选择要调试的脚本。 将显示页面使用的所有脚本。 通过单击断点应进入的行上的 Firebug 灰色托盘区域设置断点，必须像在 Visual Studio 2008 中那样设置断点。

在 Firebug 中设置断点后，可以执行执行需要调试的脚本所需的操作，例如单击按钮或刷新浏览器以触发 onLoad 事件。 将在包含断点的行上自动停止执行。 图 9 显示了在 Firebug 中触发的断点示例。

图 9：处理 Firebug 中的断点。 (单击以查看全尺寸图像)

命中断点后，可以使用箭头按钮单步执行、单步执行或退出代码。 单步执行代码时，脚本变量将显示在调试器的右侧部分，使你能够查看值并向下钻取到对象。 Firebug 还包括调用堆栈下拉列表，用于查看导致当前正在调试的行的脚本执行步骤。

Firebug 还包括一个控制台窗口，可用于测试不同的脚本语句、评估变量和查看跟踪输出。 可以通过单击 Firebug 窗口顶部的“控制台”选项卡来访问它。 还可以通过单击“检查”选项卡来“检查”正在调试的页面以查看其 DOM 结构和内容。将鼠标悬停在检查器窗口中显示的不同 DOM 元素上时，页面的相应部分将突出显示，以便轻松查看该元素在页面中的使用位置。 与给定元素关联的属性值可以“实时”更改，以尝试应用不同的宽度、样式等。到元素。 这是一个很好的功能，无需在源代码编辑器和 Firefox 浏览器之间不断切换，以查看简单更改对页面的影响。

图 10 显示了使用 DOM 检查器在页面中查找名为 txtCountry 的文本框的示例。 Firebug 检查器还可用于查看页面中使用的 CSS 样式以及发生的事件，例如跟踪鼠标移动、按钮单击等。

图 10：使用 Firebug 的 DOM 检查器。 (单击以查看全尺寸图像)

Firebug 提供了一种轻量级的方式来直接在 Firefox 中快速调试页面，以及用于检查页面中不同元素的出色工具。

ASP.NET AJAX 中的调试支持

ASP.NET AJAX 库包含许多不同的类，可用于简化将 AJAX 功能添加到网页的过程。 可以使用这些类在页面中查找元素并对其进行操作、添加新控件、调用 Web 服务甚至处理事件。 ASP.NET AJAX 库还包含可用于增强调试页面过程的类。 本部分将介绍 Sys.Debug 类，并了解如何在应用程序中使用它。

使用 Sys.Debug 类

Sys.Debug 类 (位于 Sys 命名空间) 的 JavaScript 类可用于执行多个不同的功能，包括编写跟踪输出、执行代码断言和强制代码失败以便可以调试它。 (C：\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary 处安装的 ASP.NET AJAX 库的调试文件中广泛使用它 \System.Web.Extensions\1.0.61025.0 默认) 执行条件测试， (称为断言) ，以确保参数正确传递给函数、对象包含预期数据和编写跟踪语句。

Sys.Debug 类公开了多个可用于处理跟踪、代码断言或失败的不同函数，如表 1 所示。

表 1. Sys.Debug 类函数。

函数名	说明
断言 (条件、消息、displayCaller)	断言条件参数为 true。 如果测试的条件为 false，将使用消息框显示消息参数值。 如果 displayCaller 参数为 true，该方法还会显示有关调用方的信息。
clearTrace ()	清除跟踪操作的语句输出。
失败 (消息)	导致程序停止执行并中断调试器。 message 参数可用于提供失败的原因。
跟踪 (消息)	将消息参数写入跟踪输出。
traceDump (对象，名称)	以可读格式输出对象的数据。 name 参数可用于为跟踪转储提供标签。 默认情况下，将写出要转储的对象中的任何子对象。

客户端跟踪的使用方式与 ASP.NET 中可用的跟踪功能大致相同。 它允许在不中断应用程序流的情况下轻松查看不同的消息。 列表 5 显示了使用 Sys.Debug.trace 函数写入跟踪日志的示例。 此函数只接受应作为参数写出的消息。

列表 5. 使用 Sys.Debug.trace 函数。

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

如果执行清单 5 中显示的代码，则不会在页面中看到任何跟踪输出。 查看它的唯一方法是使用 Visual Studio .NET、Web 开发帮助程序或 Firebug 中提供的控制台窗口。 如果确实想要在页面中查看跟踪输出，则需要添加 TextArea 标记，并为其指定 TraceConsole 的 ID，如下所示：

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

页面中的任何 Sys.Debug.trace 语句都将写入 TraceConsole TextArea。

如果想要查看 JSON 对象中包含的数据，可以使用 Sys.Debug 类的 traceDump 函数。 此函数采用两个参数，包括应转储到跟踪控制台的对象和可用于标识跟踪输出中的对象的名称。 列表 6 显示了使用 traceDump 函数的示例。

列表 6. 使用 Sys.Debug.traceDump 函数。

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

图 11 显示了调用 Sys.Debug.traceDump 函数的输出。 请注意，除了写出 Person 对象的数据外，它还会写出 Address 子对象的数据。

除了跟踪之外，Sys.Debug 类还可用于执行代码断言。 断言用于测试应用程序运行时是否满足特定条件。 ASP.NET AJAX 库脚本的调试版本包含多个断言语句，用于测试各种条件。

列表 7 显示了使用 Sys.Debug.assert 函数测试条件的示例。 代码在更新 Person 对象之前测试 Address 对象是否为 null。

图 11：Sys.Debug.traceDump 函数的输出。 (单击以查看全尺寸图像)

列表 7. 使用 debug.assert 函数。

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

传递三个参数，包括要计算的条件、断言返回 false 时要显示的消息以及是否应显示有关调用方的信息。 在断言失败的情况下，如果第三个参数为 true，将显示消息以及调用方信息。 图 12 显示了在清单 7 中显示的断言失败时出现的失败对话框示例。

要涵盖的最后一个函数是 Sys.Debug.fail。 如果要强制代码在脚本中的特定行上失败，可以添加 Sys.Debug.fail 调用，而不是通常在 JavaScript 应用程序中使用的调试器语句。 Sys.Debug.fail 函数接受表示失败原因的单个字符串参数，如下所示：

Sys.Debug.fail("My forced failure of script.");

图 12：Sys.Debug.assert 失败消息。 (单击以查看全尺寸图像)

执行脚本时遇到 Sys.Debug.fail 语句时，消息参数的值将显示在调试应用程序的控制台（如 Visual Studio 2008）中，并提示你调试该应用程序。 这非常有用的一种情况是，不能在内联脚本上使用 Visual Studio 2008 设置断点，但希望代码在特定行上停止，以便检查变量的值。

了解 ScriptManager 控件的 ScriptMode 属性

ASP.NET AJAX 库包括默认安装在 C：\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 中的调试和发布脚本版本。 调试脚本格式良好，易于阅读，并且多个 Sys.Debug.assert 调用分散在整个脚本中，而发布脚本则去除空格，并谨慎使用 Sys.Debug 类来最大程度地减小其整体大小。

添加到 ASP.NET AJAX 页的 ScriptManager 控件在 web.config 中读取编译元素的调试属性，以确定要加载的库脚本版本。 但是，可以通过更改 ScriptMode 属性来控制是 (库脚本还是你自己的自定义脚本) 加载调试或发布脚本。 ScriptMode 接受 ScriptMode 枚举，其成员包括 Auto、Debug、Release 和 Inherit。

ScriptMode 默认为 Auto 值，这意味着 ScriptManager 将在 web.config 中检查调试属性。当调试为 false 时，ScriptManager 将加载 ASP.NET AJAX 库脚本的发布版本。 当 debug 为 true 时，将加载脚本的调试版本。 将 ScriptMode 属性更改为 Release 或 Debug 将强制 ScriptManager 加载相应的脚本，而不管调试属性在web.config中具有什么值。列表 8 显示了使用 ScriptManager 控件从 ASP.NET AJAX 库加载调试脚本的示例。

列表 8. 使用 ScriptManager 加载调试脚本.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

还可以使用 ScriptManager 的 Scripts 属性以及 ScriptReference 组件加载不同的版本， (调试或发布自己的自定义脚本) ，如清单 9 所示。

列表 9. 使用 ScriptManager 加载自定义脚本。

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

注意

如果要使用 ScriptReference 组件加载自定义脚本，则必须在脚本完成加载时通知 ScriptManager，方法是在脚本底部添加以下代码：

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

清单 9 中显示的代码告知 ScriptManager 查找 Person 脚本的调试版本，以便它会自动查找Person.debug.js而不是Person.js。 如果未找到Person.debug.js文件，将引发错误。

如果希望根据 ScriptManager 控件上设置的 ScriptMode 属性的值加载自定义脚本的调试或发布版本，可以将 ScriptReference 控件的 ScriptMode 属性设置为 Inherit。 这将导致基于 ScriptManager 的 ScriptMode 属性加载正确版本的自定义脚本，如清单 10 所示。 由于 ScriptManager 控件的 ScriptMode 属性设置为 Debug，因此将在页面中加载和使用Person.debug.js脚本。

列表 10. 从 ScriptManager 继承用于自定义脚本的 ScriptMode。

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

通过适当地使用 ScriptMode 属性，可以更轻松地调试应用程序并简化整个过程。 ASP.NET AJAX 库的发布脚本很难单步执行和阅读，因为代码格式已被删除，而调试脚本是专门为调试目的设置格式的。

结束语

Microsoft ASP.NET AJAX 技术为构建支持 AJAX 的应用程序提供了坚实的基础，这些应用程序可以增强最终用户的整体体验。 但是，与任何编程技术一样，肯定会出现 bug 和其他应用程序问题。 了解可用的不同调试选项可以节省大量时间，并生成更稳定的产品。

本文介绍了几种用于调试 ASP.NET AJAX 页面的不同技术，包括带有 Visual Studio 2008 的 Internet Explorer、Web 开发帮助器和 Firebug。 这些工具可以简化整个调试过程，因为可以访问变量数据、逐行演练代码以及查看跟踪语句。 除了讨论的不同调试工具，你还了解了如何在应用程序中使用 ASP.NET AJAX 库的 Sys.Debug 类，以及如何使用 ScriptManager 类加载脚本的调试或发布版本。

个人简介

Dan Wahlin (Microsoft 最有价值专家 ASP.NET 和 XML Web Services) 是接口技术培训 (www.interfacett.com) 的 .NET 开发讲师 和 体系结构顾问。 Dan 创立了 xml for ASP.NET Developers 网站 (www.XMLforASP.NET) ， 是 INETA 发言人局的一部分， 并在几次会议中发言。 Dan 共同创作了 Professional Windows DNA (Wrox) ，ASP.NET：Tips， Tutorials and Code (Sams) ，ASP.NET 1.1 Insider Solutions，Professional ASP.NET 2.0 AJAX (Wrox) ，ASP.NET 2.0 MVP Hacks，并为 ASP.NET Developers (Sams) 创作 XML。 当他不写代码、文章或书籍时，丹喜欢写和录制音乐，和他的妻子和孩子一起打高尔夫球和打篮球。

Scott Cate 自 1997 年以来一直从事 Microsoft Web 技术工作，是 myKB.com (www.myKB.com) 的总裁，专门编写基于 ASP.NET 的应用程序，专注于知识库软件解决方案。 可以通过电子邮件 scott.cate@myKB.com 联系 Scott，也可以通过他的博客 在 ScottCate.com

上一篇