对于使用任何技术的程序员而言,调试代码都是他们必不可少的一项技能。毫无疑问,了解不同的可用调试方法,可以在一个项目上节约大量时间,甚至一些可能令人头痛的问题。尽管许多程序员习惯使用 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 浏览网站时出现 JavaScript 事件。实际上,普通用户如果看到错误消息甚至都不知道怎么处理。因此,浏览器中的调试选项是默认关闭的。但在开发新的 AJAX 应用程序时启用并使用调试功能变得相当容易。
进入 Internet Explorer 菜单的 Tools - Internet Options 选项并选择 Advanced 选项卡即可启用该功能。确认没有勾选 Browsing 部分的如下内容:
如果您准备调试某应用程序,尽管没有要求,您可能还是希望出现的任何 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 提供的调试功能来测试 .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 调试器
- 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 的 Script Explorer 的使用。
一旦开始调试会话且您开始使用默认的 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 等其他调试窗口查看。
访问 可查看上述一些特性的视频教程。
尽管 Visual Studio 2008(以及 Visual Web Developer Express 2008)已经是非常强大的调试工具了。但同时还有其他一些轻量级的选项可供使用。最新发布的工具之一是 Web Development Helper。此工具由 Microsoft 的 Nikhil Kothari(Microsoft 的 ASP.NET AJAX 主要架构师之一)编写,可执行从简单调试到查看 HTTP 请求及响应消息等多种任务。访问即可下载 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 类编写一条客户端侧跟踪消息
- 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 Development Helper 将在脚本控制台的命令窗口中显示内容为 Person name:Doe 的消息(假设已经启用了调试)。Web Development Helper 还将向页面中添加顶层 debugService 对象,这些页面可用于编写跟踪信息或查看 JSON 对象内容。程序列表 3 为使用 debugService 类的跟踪函数的示例。
程序列表 3. 使用 Web Development Helper 的 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 Development Helper 运行,就可以访问跟踪数据。如果未使用此工具调试页面,对 window.debugService 的调用将返回错误,跟踪语句将被忽略。
debugService 类也允许使用 Web Development Helper 的 inspector 窗口查看 JSON 对象数据。程序列表 4 创建一个包含个人数据的 JSON 对象。一旦创建了该对象,将会调用一个对 debugService 类的 inspect 函数,以便允许以可视的方式检查 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 中显示的 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 是其中一个较好的选择,此工具可从 上免费下载。此处对 Fiddler 不作深入讨论,但如果您需要完整查看消息标头和数据,此工具仍是一个较好的选择。
尽管 Internet Explorer 仍是使用最广泛的浏览器,但 Firefox 等其他浏览器也越来越普及。因此,您可能想要与在 Internet Explorer 中一样,能在 Firefox 中调试 ASP.NET AJAX 页面,以确保您的应用程序正常运行。尽管 Firefox 不能直接绑定到 Visual Studio 2008 进行调试,但它提供了一个名为 Firebug 的扩展用于调试页面。Firebug 可从 免费下载。
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 库包含多种不同的类,可用于简化向网页添加 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 类函数
客户端侧跟踪的使用方法与 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 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 函数
- 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 对象是否为空。
图 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 库脚本的发布版本。如果调试为 true,则载入脚本的调试版本。将 ScriptMode 属性更改为 Release 或 Debug 将强制 ScriptManager 载入相应的脚本,而不考虑 web.config 中的调试属性。程序列表 8 中的示例为使用 ScriptManager 控件载入 ASP.NET AJAX 库中的调试脚本。
程序列表 8. 使用 ScriptManager 载入调试脚本
- "ScriptManager1" runat = "server" ScriptMode = "Debug" > 通过使用ScriptManager的Scripts属性以及ScriptReference组件(如程序列表9所示),您也可以载入您自己的定制脚本的不同版本(调试或发布)。程序列表9.使用ScriptManager载入定制脚本"ScriptManager1" runat = "server" > "> <Scripts>"~ / Scripts / Person.js " ScriptMode="Debug "/> </Scripts>注意:如果您使用 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"ScriptManager1 " runat="server " ScriptMode="Debug ">" > < Scripts > "~/Scripts/Person.js" ScriptMode = "Inherit" / > < /Scripts>通过适当使用 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 类载入脚本的调试或发布版本。快乐编程!结后语
- /
来源: http://lib.csdn.net/article/dotnet/43523