了解 ASP.NET AJAX 调试功能(六)

最新推荐文章于 2021-08-05 17:13:40 发布
最新推荐文章于 2021-08-05 17:13:40 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： ASP.NET AJAX 文章标签： asp.net ajax 脚本 firebug internet javascript

 

调试 ASP.NET AJAX 应用程序

对于使用任何技术的程序员而言，调试代码都是他们必不可少的一项技能。毫无疑问，了解不同的可用调试方法，可以在一个项目上节约大量时间，甚至一些可能令人头痛的问题。尽管许多程序员习惯使用Visual Studio .NET 或 Web Developer Express 来调试使用VB.NET 或 C# 代码的 ASP.NET 应用程序，还是有些人还是不清楚调试JavaScript 等客户端侧代码是非常有用的。用于调试.NET 应用程序的同类技术也可用于启用了AJAX 的应用程序，更具体地说，是ASP.NET AJAX 应用程序。

本文档将介绍如何使用 Visual Studio 2008 Beta 2和几个其它工具来调试ASP.NET AJAX 应用程序，以便快速定位bug 和其他事件。本文档内容还包括如何启用Internet Explorer 6 或更高版本以进行调试、使用Visual Studio 2008 以及 Script Explorer 遍历代码、以及使用Web Development Helper 等其他免费工具。此外，还将学习如何使用一个名为Firebug 的扩展在 Firefox 中调试 ASP.NET AJAX 应用程序，通过此扩展可以在浏览器中直接遍历JavaScript 代码而无需任何其他工具的辅助。最后将介绍ASP.NET AJAX 库中的类，这些类可协助完成多种调试任务，如跟踪和代码断言语句。

在开始调试 Internet Explorer中查看的页面之前，需要为调试执行一些基本操作。下面就介绍这些一开始就需要执行的一些基本设置要求。

针对调试的Internet Explorer配置

大多数人都不希望用 Internet Explorer浏览网站时出现JavaScript 事件。实际上，普通用户如果看到错误消息甚至都不知道怎么处理。因此，浏览器中的调试选项是默认关闭的。但在开发新的AJAX 应用程序时启用并使用调试功能变得相当容易。

进入 Internet Explorer菜单的 Tools - Internet Options选项并选择Advanced 选项卡即可启用该功能。确认没有勾选 Browsing 部分的如下内容：

  • Disable script debugging (Internet Explorer)
  • Disable script debugging (Other)

如果您准备调试某应用程序，尽管没有要求，您可能还是希望出现的任何JavaScript 错误都立即醒目地显示在页面上。通过勾选中Display a notification about every script error 复选框，便可强制用消息框显示所有错误。这个选项在开发应用程序时非常有用。但如果您正打算细读其他网站时却不时出现JavaScript 错误，它便显得令人不快了。

图1 显示了 Internet Explorer的advanced 对话框中正确配置调试功能后应出现的界面。

图1：针对调试的Internet Explorer配置

启用调试后，您将看到 View 菜单中出现一个新项：Script Debugger。可用选项有两个：Open 和 Break at Next Statement。如果选中 Open，将提示您在 Visual Studio 2008 Beta 2 中调试页面（注意，Visual Web Developer Express 也可用于调试）。如果当前运行的是Visual Studio .NET，您可以选择使用此实例或新建一个实例。如果选中Break at Next Statement，将提示您在执行 JavaScript 代码时进行调试。如果 JavaScript 代码在页面的 onLoad 事件中执行，您可以刷新页面以引发一个调试会话。如果单击一个按钮后运行JavaScript 代码，那么调试器将在单击按钮后立即运行。

注意：如果您运行的是启用了User Access Control (UAC)的Windows Vista，且将Visual Studio 2008设为作为管理员运行，则提示您连接到进程时Visual Studio将连接失败。要解决此问题，应首先启动Visual Studio，然后再使用此实例进行调试。

下一节将介绍如何从 Visual Studio 2008中直接调试ASP.NET AJAX 页面。但如果页面已经打开且您希望对其进行全面检查，使用 Internet Explorer Script Debugger 选项还是非常有用的。

使用 Visual Studio 2008 Beta 2进行调试

全球的开发人员每天都依赖Visual Studio 2008 Beta 2提供的调试功能来测试 .NET 应用程序。通过内置的调试器，您可以遍历代码、查看对象数据、查找特定变量、监控调用堆栈以及进行更多其他操作。除了调试VB.NET 或 C# 代码之外，调试器还可用于调试ASP.NET AJAX 应用程序，以及逐行遍历JavaScript 代码。下面将主要介绍可用于调试客户端侧脚本文件的技术，而不不是探讨使用Visual Studio 2008 调试应用程序的整个流程。

在 Visual Studio 2008中调试页面的过程可以以多种方式开始。首先，您可以使用前一小节提到的Internet Explorer Script Debugger 选项。这一选项比较适用已经载入浏览器且您希望开始调试的页面。您也可以在Solution Explorer 中右键单击一个 .aspx 页面，然后从菜单中选择Set As Start Page。如果您对于调试 ASP.NET 页面已经相当熟悉，之前可能已经执行过这一操作了。按下F5 键便可执行调试。尽管在VB.NET 或 C# 代码中通常可以在任何地方设置断点，但随后您会发现，在JavaScript 中情况则往往有所不同。

嵌入脚本与外部脚本

Visual Studio 2008 调试器处理页面中的嵌入JavaScript 的方式与处理外部JavaScript 文件有所不同。对于后者，您可以打开文件并在任何代码行设置断点。通过单击代码编辑器窗口左面的灰色托盘区域便可设置断点。如果JavaScript 是使用 <script> 标记直接嵌入页面的，将不能通过单击灰色托盘区域插入断点。如果试图在嵌入脚本的代码行插入断点，将出现一条警告消息，内容为"This is not a valid location for a breakpoint"。

解决此问题的方法是将代码移至一个外部 .js 文件，使用<script>标记的src 属性引用它：

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

如果不能将代码移动到外部文件中，或者这一操作的代价太大而不值得，又怎么办？虽然不能使用编辑器插入断点，但是您可以在代码中想要开始调试的位置直接添加调试器语句。您还可以使用ASP.NET AJAX 库中可用的 Sys.Debug 类强制开始调试。本文档稍后将介绍关于Sys.Debug 类的更多信息。

程序列表 1 列出了一个使用debugger关键字的示例。本示例在调用一个更新函数前强制中断调试器。

程序列表1.使用debugger关键字强制中断Visual Studio .NET调试器


  
  
  1. function BuildPerson()
  2. {
  3.      var person =
  4.      {
  5.           FirstName: $get("txtFirstName").value,
  6.           LastName: $get("txtLastName").value,
  7.           Address:
  8.           {
  9.                Street: $get("txtStreet").value,
  10.                City: $get("txtCity").value,
  11.                State: $get("txtState").value
  12.           }
  13.      };
  14.      debugger;
  15.      UpdatePerson(person);
  16. }

一旦触发了调试器语句，将提示使用 Visual Studio .NET调试页面，且可以开始遍历代码。在此过程中，可能会出现访问页面中使用的ASP.NET AJAX 库脚本文件的事件。因此我们先了解一下关于Visual Studio .NET 的Script Explorer 的使用。

使用 Visual Studio .NET 窗口进行调试

一旦开始调试会话且您开始使用默认的 F11 键遍历代码，可能会出现如图2 所示的错误提示对话框，直到页面中使用的所有脚本文件都被打开且可供调试。

图2：没有源代码可用于调试时出现的错误对话框

显示此对话框的原因是 Visual Studio .NET不确定如何获取页面引用的某些脚本的源代码。一开始这可能会让人相当沮丧，但实际上这很容易解决。一旦启动一个调试会话并触发断点后，从Visual Studio 2008 菜单或直接按下 Ctrl+Alt+N 热键进入 Debug - Windows - Script Explorer窗口。

注意：如果没有显示Script Explorer菜单，从Visual Studio .NET菜单进入Tools - Customize – Commands。定位到Categories部分的Debug项并单击此项以显示所有可用的菜单项。在命令列表中向下滚动到Script Explorer，然后将其向上拖动至前面提到的Debug - Windows菜单。这样以后每次运行Visual Studio .NET时，Script Explorer菜单项都将显示为可用。

Script Explorer 可用于查看一个页面中使用的所有脚本，并在代码编辑器中打开它们。Script Explorer 打开后，双击调试中的 .aspx 页面以便在代码编辑器窗口中将其打开。对Script Explorer 中显示的所有其他脚本执行同样的操作。所有脚本在代码窗口中打开后，可以按下F11（并使用其他调试热键）来遍历代码。图3 为 Script Explorer 示例。图中列出了当前正在调试的文件 (Demo.aspx) 以及两个定制脚本和两个由ASP.NET AJAX ScriptManager 动态注入页面的脚本。

图3. 通过 Script Explorer可以方便访问页面中使用的脚本

还有几个其他的窗口也可用于在遍历页面中的代码时提供有用信息。例如，可以使用Locals 窗口查看不同页面中使用的不同变量的值，使用Immediate 窗口评估特定变量或条件并查看输出。您还可以使用Output窗口查看用 Sys.Debug.trace函数或 Internet Explorer的Debug.writeln 函数编写的跟踪语句（本文档稍后将介绍有关信息）。

使用调试器遍历代码时，可以把鼠标放在代码中的变量上以查看为其指定的值。但有时把鼠标放在给定JavaScript 变量上时，脚本调试器不会显示任何内容。查看值的方法是在代码编辑器窗口中突出显示要查看的语句或变量，然后再将鼠标移到它上面。尽管这种方法不是任何时候都有用，但很多时候还是可以帮助您查看变量值而无需进入Locals 等其他调试窗口查看。

访问 http://www.xmlforasp.net可查看上述一些特性的视频教程。

使用 Web Development Helper进行调试

尽管 Visual Studio 2008（以及 Visual Web Developer Express 2008）已经是非常强大的调试工具了。但同时还有其他一些轻量级的选项可供使用。最新发布的工具之一是Web Development Helper。此工具由 Microsoft 的 Nikhil Kothari（Microsoft 的 ASP.NET AJAX 主要架构师之一）编写，可执行从简单调试到查看HTTP 请求及响应消息等多种任务。访问http://projects.nikhilk.net/Projects/WebDevHelper.aspx即可下载 Web Development Helper。

直接在 Internet Explorer中使用Web Development helper更为方便。从 Internet Explorer 菜单中选择 Tools - Web Development Helper 即可。这将方便地在浏览器的底部部分打开工具，浏览器无需执行HTTP 请求和响应消息记录等多个任务。图4 显示了 Web Development Helper 操作中的状态。

图4：Web Development Helper

Web Development helper 不能像 Visual Studio 2008一样用于逐行遍历代码。但它可用于查看跟踪输出、轻松地评估脚本中的变量或在JSON 对象内部查找数据。它还适用于查看向ASP.NET AJAX 页面和服务器传递的数据和从ASP.NET AJAX 页面和服务器发出的数据。

在 Internet Explorer中打开Web Development Helper后，必须通过从图 4 所示的 Web Development helper菜单中选择 Script - Enable Script Debugging 才能启用脚本调试。这会启用工具以截取页面运行时发生的错误。这也将同时允许访问页面输出的跟踪消息。要查看跟踪信息或执行脚本命令以测试页面中的不同函数，从Web Development Helper 菜单中选择 Script - Show Script Console 即可。这可以访问一个命令窗口和一个简单的即时窗口。

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

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

程序列表2.使用Debug类编写一条客户端侧跟踪消息


  
  
  1. function BuildPerson()
  2. {
  3.      var person =
  4.      {
  5.           FirstName: $get("txtFirstName").value,
  6.           LastName: $get("txtLastName").value,
  7.           Address:
  8.           {
  9.                Street: $get("txtStreet").value,
  10.                City: $get("txtCity").value,
  11.                State: $get("txtState").value
  12.           }
  13.      };
  14.      Debug.writeln("Person name: " + person.LastName);
  15.      UpdatePerson(person);
  16. }

如果 LastName 属性包含一个值 Doe，Web Development Helper将在脚本控制台的命令窗口中显示内容为 Person name:Doe 的消息（假设已经启用了调试）。Web Development Helper 还将向页面中添加顶层debugService 对象，这些页面可用于编写跟踪信息或查看JSON 对象内容。程序列表 3 为使用 debugService 类的跟踪函数的示例。

程序列表3.使用Web Development Helper的debugService类编写跟踪消息


  
  
  1. function BuildPerson()
  2. {
  3.      var person =
  4.      {
  5.           FirstName: $get("txtFirstName").value,
  6.           LastName: $get("txtLastName").value,
  7.           Address:
  8.           {
  9.                Street: $get("txtStreet").value,
  10.                City: $get("txtCity").value,
  11.                State: $get("txtState").value
  12.           }
  13.      };
  14.      if (window.debugService)
  15.      {
  16.           window.debugService.trace("Person name: " + person.LastName);
  17.      }
  18.      UpdatePerson(person);
  19. }

debugService 类的一个好特性是即使Internet Explorer中未启用调试，它也能正常运作。这样，就可以轻松做到只要Web Development Helper 运行，就可以访问跟踪数据。如果未使用此工具调试页面，对window.debugService 的调用将返回错误，跟踪语句将被忽略。

debugService 类也允许使用 Web Development Helper的inspector 窗口查看JSON 对象数据。程序列表4 创建一个包含个人数据的JSON 对象。一旦创建了该对象，将会调用一个对debugService 类的 inspect 函数，以便允许以可视的方式检查JSON 对象。

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


  
  
  1. function BuildPerson()
  2. {
  3.      var person =
  4.      {
  5.           FirstName: $get("txtFirstName").value,
  6.           LastName: $get("txtLastName").value,
  7.           Address:
  8.           {
  9.                Street: $get("txtStreet").value,
  10.                City: $get("txtCity").value,
  11.                State: $get("txtState").value
  12.           }
  13.      };
  14.      if (window.debugService)
  15.      {
  16.           window.debugService.inspect("Person Object",person);
  17.      }
  18.      UpdatePerson(person);
  19. }

在页面中或通过即时窗口调用GetPerson() 函数将打开图5 中显示的Object Inspector对话窗口。要动态更改对象中的属性，将其突出显示、更改Value 文本框中的值并单击 Update 链接即可。使用 Object Inspector 可以轻松地查看 JSON 对象数据，并试验为属性应用不同的值。

调试错误

除了允许显示跟踪数据和JSON对象之外，Web Development helper还帮助调试页面中的错误。如果出现错误，将出现提示，询问您是继续下一行代码还是调试脚本（如图6 所示）。Script Error 对话窗口显示了完整的调用堆栈以及行数，以便您能轻松识别事件在脚本中所处的位置。

图5：使用 Object Inspector窗口查看JSON 对象

选中调试选项可以在 Web Development Helper的即时窗口中直接执行脚本语句，以便查看变量值、输出 JSON 对象、以及进行其他操作。如果触发错误的动作再次发生，且您的机器上安装了Visual Studio 2008，将提示您启动一个调试会话，以便逐行遍历代码，如前一小节所述。

图6：Web Development Helper的脚本错误对话框

查看请求和响应消息

调试 ASP.NET AJAX 页面时，常会出现页面与服务器之间发送的请求和响应消息。通过查看消息的内容，可以了解发送的数据是否正确以及消息的规模大小。Web Development Helper 提供了出色的 HTTP 消息记录特性，可以原始文本或较易读的方式轻松查看数据。

要查看 ASP.NET AJAX 请求及响应消息，必须通过选中 Web Development Helper菜单中的HTTP - Enable HTTP Logging 来启用 HTTP 记录器。一旦启用了记录器，就可以通过选择HTTP - Show HTTP Logs，在 HTTP 记录查看器中查看当前页面发出的所有消息。

查看每条请求/响应消息中发送的原始文本无疑是很有用的（这也是Web Development Helper提供的选项），但以更图形化的格式查看消息数据则更为简单。一旦启用了HTTP记录并记录了消息，就可以通过在 HTTP 记录查看器中双击消息来查看消息数据。您将能看到与消息相关联的所有标头，以及实际的消息内容。图7 显示了从 HTTP Log Viewer 窗口中查看的一条请求消息和响应消息。

图7：使用 HTTP Log Viewer查看请求和响应消息数据。

HTTP Log Viewer 自动解析 JSON 对象，并把这些对象自动用树结构视图显示出来，便于轻松快速查看对象的属性数据。如果ASP.NET AJAX页面中使用了 UpdatePanel，查看器将把消息的每个部分分割为数个单独的部分，如图 8 所示。比起查看原始消息数据来，这一强大的特性使得查看和了解消息内容变得更为轻松。

图8：使用 HTTP Log Viewer查看的UpdatePanel 响应消息。

除 Web Development Helper之外，还有几个工具可用于查看请求和响应消息。 Fiddler 是其中一个较好的选择，此工具可从 http://www.fiddlertool.com 上免费下载。此处对Fiddler 不作深入讨论，但如果您需要完整查看消息标头和数据，此工具仍是一个较好的选择。

用 Firefox 和 Firebug 进行调试

尽管 Internet Explorer仍是使用最广泛的浏览器，但 Firefox 等其他浏览器也越来越普及。因此，您可能想要与在 Internet Explorer中一样，能在 Firefox 中调试 ASP.NET AJAX 页面，以确保您的应用程序正常运行。尽管Firefox 不能直接绑定到 Visual Studio 2008 进行调试，但它提供了一个名为Firebug 的扩展用于调试页面。Firebug 可从 http://www.getfirebug.com免费下载。

Firebug提供了一个全功能的调试环境，可用于逐行遍历代码、访问一个页面中使用的所有脚本、查看 DOM 结构、显示CSS 样式、甚至跟踪页面中发生的事件等。一旦安装了Firebug，就可从 Firefox 菜单项中选择 Tools - Firebug - Open Firebug 将其打开。与 Web Development Helper 一样，Firebug 是直接在浏览器中使用的。但它同时还可以作为一个独立的应用程序运行。

运行了 Firebug 后，就可以在 JavaScript 文件的任何行中设置断点，无论脚本是否嵌入页面都不受影响。要设置断点，首先载入要在Firefox 中调试的页面。然后，从Firebug 的 Scripts 下拉列表中选择要调试的脚本。此列表将显示页面使用的所有脚本。在Firebug 的灰色托盘区域中，单击要设置断点的行即可，与在Visual Studio 2008 中的操作一样。

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

图9：处理 Firebug 中的断点。

触发断点后，您可以使用箭头按钮单步执行、单步跳过或直接跳出代码。遍历代码时，调试器的右面部分将显示脚本变量，以便您查看值和深入查找对象。Firebug 还包括一个 Call Stack 下拉列表，用于查看脚本的执行步骤，一直到当前调试的代码行。

Firebug还包括一个控制台窗口，可用于测试不同的脚本语句、评估变量和查看跟踪输出。单击窗口顶部的Console 选项卡即可打开控制台窗口。通过单击Inspect 选项卡，还可“检查”当前调试的页面，以便查看其DOM 结构和内容。如果您将鼠标移动到inspector 窗口中的其他 DOM 元素上，页面的相应位置将被突出显示，便于您查看该元素在页面中的位置。与给定元素相关联的属性值可以更改为“live”，以便尝试为此元素应用不同的宽度、样式等。这个特性的好处在于，无需在源代码编辑器和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 类）可用于执行多种不同的功能，包括编写跟踪输出、执行代码断言以及强制代码失败以便进行调试等。Sys.Debug 类在 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 类显示了几个不同函数，可用于处理跟踪、代码断言或失败，如表1 所示。

表1. Sys.Debug类函数

函数名称

说明

assert(condition,
 message,
 displayCaller)

假定条件参数为真。如果经测试条件不为真，将使用一个消息框显示消息的参数值。如果displayCaller 参数为真，方法也将显示关于调用者的信息。

clearTrace()

从跟踪操作中擦除语句。

fail(message)

使程序终止执行并插入调试器。消息参数可用于提供失败原因。

trace(message)

Writes the message parameter to the trace output.

traceDump(object,
 name)

以可读方式输出对象的数据。命名控件可用于提供跟踪转储的标签。被转储对象中的所有子对象都被默认写出。

客户端侧跟踪的使用方法与ASP.NET 中可用的跟踪功能非常相似。通过它可以轻松查看不同消息而无需中断应用程序流程。程序列表5 显示了一个使用 Sys.Debug.trace 函数写入跟踪记录的示例。此函数只携带应作为参数写出的消息。

程序列表5.使用Sys.Debug.trace函数


  
  
  1. function BuildPerson()
  2. {
  3.      var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, 
  4.                    $get("txtState").value, $get("txtZip").value);
  5.      var person = new XmlForAsp.Person(null, $get("txtFirstName").value, 
  6.                   $get("txtLastName").value, address);
  7.      Sys.Debug.trace("Person's name: " + person.get_firstName() + " " 
  8.                      + person.get_lastName());
  9.      UpdatePerson(person);
  10. }

如果您执行程序列表 5 中的代码，页面中将不会出现任何跟踪输出。显示它的唯一方法是使用Visual Studio .NET、Web Development Helper 或Firebug 中可用的控制台窗口。如果您想在页面中查看跟踪输出，需要添加一个TextArea 标记并使其 id 为 TraceConsole，如下所示：

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

页面中所有Sys.Debug.trace语句都将被写入TraceConsole TextArea。

如果您想查看 JSON 对象中包含的数据，可以使用 Sys.Debug 类的 traceDump 函数。此函数携带两个参数，包括应转储到跟踪控制台的对象，以及一个可用于在跟踪输出中识别对象的名称。程序列表6 列出了使用 traceDump 函数的示例。

程序列表6.使用Sys.Debug.traceDump函数


  
  
  1. function UpdatePerson(person)
  2. {
  3.      //Dump contents of the person object to the trace output
  4.      Sys.Debug.traceDump(person,"Person Data");
  5.  
  6.      alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
  7. }

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

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

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

图11：Sys.Debug.traceDump函数的输出。

程序列表7.使用debug.assert函数


  
  
  1. function UpdatePerson(person)
  2. {
  3.      //Check if address is null
  4.      Sys.Debug.assert(person.get_address() == null,"Address is null!",true);
  5.  
  6.      alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
  7. }

传递的三个参数包括要评估的条件、如果断言返回 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 库脚本的发布版本。如果调试为true，则载入脚本的调试版本。将ScriptMode 属性更改为 Release 或 Debug 将强制 ScriptManager 载入相应的脚本，而不考虑web.config 中的调试属性。程序列表8 中的示例为使用ScriptManager 控件载入 ASP.NET AJAX 库中的调试脚本。

程序列表8.使用ScriptManager载入调试脚本


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

通过使用 ScriptManager 的Scripts 属性以及ScriptReference组件（如程序列表9 所示），您也可以载入您自己的定制脚本的不同版本（调试或发布）。

程序列表9.使用ScriptManager载入定制脚本


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

注意：如果您使用 ScriptReference组件载入定制脚本，则必须在脚本完成载入时通过在脚本底部添加如下代码来提示 ScriptManager：

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

程序列表 9 中的代码指示ScriptManager 查找Person 脚本的调试版本，这样ScriptManager 就会自动查找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


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

通过适当使用 ScriptMode 属性，可以更轻松地调试应用程序和简化整个流程。当出于调试目的而格式化调试脚本时，代码格式也被移除，因此ASP.NET AJAX 库的发布脚本变得很难遍历且可读性差。

小结

Microsoft的 ASP.NET AJAX 技术为建立启用了 AJAX、能增强终端用户整体体验的应用程序提供了一个坚实的基础。不过，与其他编程技术一样，bug 和其他应用程序事件都是不可避免的。了解可用的不同调试选项可以节省大量时间，最终生成更稳定的产品。

本文档中学习了调试 ASP.NET AJAX 页面的几种不同的方法，包括在Internet Explorer中使用with Visual Studio 2008、Web Development Helper和Firebug 等。这些工具可简化整个调试过程，因为您可以访问变量数据、逐行遍历代码以及查看跟踪语句。除上述讨论的不同调试工具外，还了解了如何在应用程序中使用ASP.NET AJAX 库的 Sys.Debug 类，以及如何使用 ScriptManager 类载入脚本的调试或发布版本。

快乐编程！

 

 

结后语

Asp.net Ajax 系列教程转自微软MSDN


 

lelele1990
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp.net+jquery+ajax所有调用例子
05-26
asp.net ajax调用aspx、ajax调用ashx处理类方法、ajax调用webservice方法，返回多种数据类型等xml、html等。
详解JQuery Ajax 在asp.net中使用总结
10-20
主要介绍了详解JQuery Ajax 在asp.net中使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
调试ASP.NET Ajax应用程序的方法
凤凰涅磐，做不老的程序员
04-12 134
1，官方文档http://ajax.asp.net/docs/overview/ASPNETAJAXDebuggingAndTracingOverview.aspx2，远程调试将Visual Studio的调试器Attach到远程机器上的IIS进程上远程调试3，修改ScriptManager的SupportsPartialRendering属性为false。 4，查看Windows事件。 ...
ajax如何调试
923723914
08-22 565
经常使用ajax，可很多时候，由于使用的是别人封装过得控件，例如使用jquery-easyui，里边很多调用都是使用ajax，经常出现没有数据的情况。但由于封装的控件已经把调用ajax的异常吞掉了，有时也是懒得写，所以出现没有数据的情况，没办法确定是真的没有数据还是读取数据出错，导致没有数据，抑或是根本就没有发出ajax请求？ 其实不管谷歌浏览器，IE浏览器，还是火狐的firebug，都...
ASP.NET ajax源码
06-28
在这个"ASP.NET AJAX源码"的压缩包中，可能包含了实现这一功能的代码示例和项目解决方案。 首先，`AJAX.sln`文件是一个Visual Studio解决方案文件，用于管理和组织多个相关的项目。打开这个文件，你可以看到整个...
如何为ASP.NET AJAX创建HTML编辑器
04-11
1. **ASP.NET AJAX**：ASP.NET AJAX是微软提供的一套用于构建异步Web应用程序的框架，它扩展了ASP.NET的功能，允许开发者创建具有部分页面更新、拖放功能和丰富的用户体验的Web应用。 2. **HTML编辑器**：HTML编辑...
ASP.NET Ajax无刷新分页、删除、评论操作示例集
03-16
ASP.NET AJAX技术是一种用于构建富...通过这个示例集，开发者不仅可以学习到如何在ASP.NET环境中实现AJAX功能，还能了解到如何将这些技术应用于实际的分页、删除和评论等常见Web应用功能中，从而提升他们的开发技能。
AJAX例子 结合ASP.NET
01-05
例如，ASP.NET AJAX Control Toolkit提供了一系列预构建的控件和扩展，简化了AJAX功能的实现。 4. **创建AJAX请求** 使用JavaScript，我们可以创建XMLHttpRequest对象，然后设置其`open`方法来定义请求类型（GET或...
ASP.NET AJAX核心控件示例
01-10
ASP.NET AJAX（Asynchronous JavaScript and XML）是一种微软提供的技术，用于构建富交互式的Web应用程序，它结合了服务器端的ASP.NET技术和客户端的JavaScript，通过异步处理方式提升了用户体验。在这个"ASP.NET ...
在vb.net （asp.net）中后台引用ajax函数的方法
04-03
图文并茂介绍，在vb.net （asp.net）中后台引用ajax函数的方法，测试平台：vs2010(VB.NET)，数据库－sql server2000。
VS调试Ajax
CHJ_20160630的博客
03-01 173
VS调试Ajax: 1.ashx在后台处理程序中设定断点 2.触发AJAX 3.F12打开浏览器调试，搜索找到ajax调用的JS，设置断点，在浏览器中单步调试，会自动进入后台处理程序，然后就可以调试后台代码了 转载于:https://www.cnblogs.com/yuhuameng/p/5230192.html...
Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）
maomiaomiao的专栏
01-15 5780
以前写过一个程序，发现用断点调试的时候，一步步的运行，程序是可以的，但是去了断点程序就出现了问题。  $(document).ready(function(){       var arra=new Array();       $.post("/getdata",null,function(data){           for(var i=0;i        
web开发中如何调试ajax（图解全过程）
qinyangzhao的专栏
08-16 2886
在web开发过程中，一般都会用junit的TestCase ，TestSuite对java类进行调试。但，很少有人会利用其它测试工具对html或css，js进行调试。再说，很难找到一款比较具全，操作简易的工具。个人认为aptana是一件比较好使的工具。同时也希望看到此篇幅的你。能畅谈以下自己在开发及测试环节中的见解。同时也给需要帮助的人指明方向。下面于实例的形式跟大家分享一下成果吧。 1.导入欲...
asp.net ajax 无法使用,使用asp.net的jQuery ajax无法正常工作
weixin_39890289的博客
08-05 265
我将拔出所有剩余的头发，因此，如果您知道可能是什么问题，请帮助我。谢谢。我所有的谷歌搜索和搜索都没有得到回报。我正在尝试使用jquery进行ajax调用，但始终收到语法错误/解析错误消息。我尝试了许多不同的方法，但是当我将dataType设置为json时，它们都会导致错误。这是我所拥有的：$.ajax({type: "POST",url: "UserList.aspx/GetTestJson",d...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值