演练：在 Visual Web Developer 中调试网页

更新：2007 年 11 月

Visual Web Developer 为您提供了一些工具，用于帮助跟踪 ASP.NET 网页中的错误。在本演练中，将使用调试器，它使您可以逐行通过页面代码，并检查变量值。

在本演练中，将创建一个包含简单计算器的网页，此计算器计算一个数字的平方。创建页面后（此页面将包括一个故意的错误），将使用调试器在运行页面时进行检查。

本演练阐释以下任务：

• 设置断点。

• 从文件系统网站的 Web 窗体页中调用调试器。

先决条件

若要完成本演练，您需要：

• Visual Web Developer 与 .NET Framework。

您还应大致了解如何使用 Visual Web Developer。有关 Visual Web Developer 的介绍，请参见演练：在 Visual Web Developer 中创建基本网页。

创建网站和网页

在本演练的第一部分，将创建可以调试的页面。

如果已经在 Visual Web Developer 中创建一个网站（例如，通过使用 演练：在 Visual Web Developer 中创建基本网页 主题），可以使用该网站并跳至本演练稍后部分的“添加控件以进行调试”。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

1. 打开 Visual Web Developer。

2. 在“文件”菜单上单击“新建网站”。

   出现“新建网站”对话框。

3. 在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。

4. 在“位置”框中单击“文件系统”，然后键入要保存网站网页的文件夹的名称。

   例如，键入文件夹名“C:\WebSites”。

5. 在“语言”列表中，单击您想使用的编程语言。

   选择的编程语言将成为网站的默认语言。但可以通过以不同的编程语言创建页面和组件，以便在同一 Web 应用程序中使用多种语言。有关使用不同语言创建组件的信息，请参见 ASP.NET 网站中的共享代码文件夹。

6. 单击“确定”。

   Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

创建页面以进行调试

首先创建一个新页。在本演练中，按照在下面的过程中的说明创建新页面十分重要。

将页面添加到网站

1. 关闭 Default.aspx 页。

2. 在解决方案资源管理器中，右击网站名称（例如“C:\WebSite”），并选择“添加新项”。

3. 在“Visual Studio 已安装的模板”下选择“Web 窗体”。

4. 在“名称”框中键入“DebugPage.aspx”。

5. 从“语言”列表中选择您想使用的编程语言。

6. 请确定清除了“将代码放在单独的文件中”复选框。

   在本演练中，将创建一个单一文件页，将代码和 HTML 放在同一页面中。ASP.NET 页的代码可以位于页面或单独的类文件中。要了解有关在独立文件中保存代码的更多信息，请参见演练：在 Visual Web Developer 中通过代码分离创建基本网页。

7. 单击“添加”。

   Visual Web Developer 即会创建一个新页并将其在源视图中打开。

现在可以将一些控件添加到页面，然后添加代码。代码比较简单，但足以使您能够在稍后添加断点。

添加控件和代码以进行调试

1. 切换到“设计”视图，然后从“工具箱”的“标准”文件夹中，将以下控件拖动到页面并按如下所示设置它们的属性：

   控件	属性
   Label	ID：CaptionLabel Text：（空）
   TextBox	ID：NumberTextBox Text：（空）
   Button	ID：SquareButton Text：平方
   Label	ID：ResultLabel Text：（空）

   说明：
   在本演练中，页面的布局不重要。

2. 双击 Button 控件，为其创建一个 Click 处理程序。

3. 将逻辑添加到 Click 处理程序，以便调用名为 Square 的函数，计算用户所输入数字的平方。该处理程序可能看起来类似于以下示例。

   说明：
   此代码示例有意不包括错误检查。

   Sub SquareButton_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
       Dim number As Integer
       Dim result As Integer
       number = CInt(NumberTextBox.Text)
       result = Square(number)
       ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
   End Sub
   

   protected void SquareButton_Click(object sender, System.EventArgs e)
   {
       int number, result; 
       number = System.Convert.ToInt32(NumberTextBox.Text);
       result = Square(number);
       ResultLabel.Text = NumberTextBox.Text + 
           " squared is " + result.ToString();
   }
   

4. 创建用于计算数字平方的函数。在代码中包括一个 bug，使数字自身相加而不是相乘。该代码可能看起来类似于下面的示例。

   Function Square(number As Integer) As Integer
       Square = number + number
   End Function
   

   int Square(int number )
   {    
       int Square;
       Square = number + number;
       return Square;
   }
   

还可以将代码添加到页面中，此代码可根据此页面是否为首次运行来更改标签的文本。

更改 Caption Label 控件

1. 在“设计”视图中，双击设计图面（非控件）以创建一个 Page_Load 事件处理程序。

2. 如果是首次运行页面，将“Caption Label”控件的文本设置为“输入一个数字：”，否则设置为“输入另一个数字：”。此处理程序类似于下面的代码示例。

   Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
       If Page.IsPostBack = False Then
           CaptionLabel.Text = "Enter a number: "
       Else
           CaptionLabel.Text = "Enter another number: "
       End If
   End Sub
   

   if(Page.IsPostBack == false)
   {
       CaptionLabel.Text = "Enter a number: ";
   }
   else {
       CaptionLabel.Text = "Enter another number: " ;
   }
   

测试页面

若要确定页面正在运行，请在其当前状态运行。

运行该页

1. 保存页。

2. 按 Ctrl+F5 运行该页。

3. 输入数字 3，然后按“平方”按钮。

   请注意，结果是不正确的，因为程序中有 bug。正确的结果是 9。

4. 关闭浏览器。

调试页面

在演练的此部分中，将使用调试器在运行代码时逐行检查代码，将断点添加到代码，然后在调试模式中运行此页。

首先在代码中设置断点。断点是代码中的一行，在这里停止执行代码并调用调试器。

设置断点

1. 切换到“源”视图。

2. 右击以下行，选择“断点”，然后选择“插入断点”。

   说明：
   可以按“F9”切换断点。

   If Page.IsPostBack = False Then
   

   if(Page.IsPostBack == false)
   

3. 在 SquareButton_Click 处理程序的以下行中设置另一个断点：

   result = Square(number)
   

   result = Square(number);
   

   说明：
   不能在声明变量的语句上设置断点。

设置了至少一个断点后，就可以运行调试器。

运行调试器

1. 从“调试”菜单中选择“启动调试”（或按 F5），在调试模式中运行页。

   如果以前从未运行调试器，您的应用程序可能未配置为支持调试。默认情况下，出于性能（在调试器中页的运行速度更慢）和安全的原因，调试在应用程序中是关闭的。Visual Web Developer 显示一条消息，告诉您启用调试所必须执行的操作。

   启用调试的开关作为一个设置存储在 Web.config 文件中，此文件维护各种站点特定的配置选项。如果没有 Web.config 文件，Visual Web Developer 将同时创建此文件并进行适当的调试器设置。

   如果存在 Web.config 文件但未启用调试，将会看到一条略有不同的消息，告诉您 Visual Web Developer 将修改 Web.config 文件。

2. 如果看到告诉您尚未启用调试的消息，请单击“确定”以启用调试。

   在 Visual Web Developer 中，设计器更改为调试模式，显示页的代码和一些调试器窗口。

   调试器逐行运行页。当调试器到达带有断点的行时，即会停止并突出显示该行。

   因为断点位于 Page_Load 处理程序，所以此页尚未完成处理。浏览器打开，但尚未显示此页。

3. 在“调试”菜单上，依次单击“窗口”和“监视”，然后单击“监视 1”。

   说明：
   如果使用的是 Visual Web Developer 速成版，则调试器仅提供单个“监视”窗口。

   这会打开一个“监视”窗口，您可以在这里指定要跟踪的值。

4. 在编辑器中右击 Page.IsPostBack 表达式的 IsPostBack 部分，然后单击“添加监视”。

   这会将此表达式添加到“监视”窗口，并在“值”列中显示属性 (false) 的当前值。如果愿意，可以在“监视”窗口的“名称”列中键入变量或属性的名称。

5. 从“调试”菜单中，选择“继续”继续执行，或按 F5。

   “继续”命令让调试器继续运行，直至到达下一个断点为止。Page_Load 事件处理程序完成处理，且页面在浏览器中显示。

6. 在文本框中输入值“2”，然后单击“平方”按钮。

   调试器即会再次显示，而且断点位于 Page_Load 处理程序中的某行。这一次，“监视”窗口将显示 Page.IsPostBack 的值为 true。

7. 再次按 F5 以继续。

   调试器处理 Page_Load 处理程序并进入 SquareButton_Click 处理程序，在设置的第二个断点处停止。

8. 在“调试”菜单中单击“窗口”，然后单击“局部变量”。

   这会打开“局部变量”窗口，其中显示正在执行的当前行的范围内所有变量和对象的值。“局部变量”窗口提供了另一种查看这些值的方法，这个方法的优点在于无需显式设置对元素的监视，而缺点在于窗口包含的信息可能多于您希望立即看到的信息。

   在“局部变量”窗口中，将看到 number 的值为“2”，而 result 的值为“0”。

   说明：
   还可以将鼠标指针悬停在程序的任何变量上以查看其值。

9. 在“局部变量”窗口的“值”列中，右击 number 变量的代码行，然后选择“编辑值”。编辑 number 变量的值，将它更改为“5”。

   将变量 number 的值设置为“2”不利于测试程序，因为无论是将“2”相加还是相乘，结果都是“4”。因此，运行程序时，可以更改此变量的值。

10. 从“调试”菜单中选择“单步执行”以单步执行 Square 函数，或按 F11。

    “单步执行”命令使调试器执行一行后就停止执行。

11. 按 F11 以继续单行执行，直至到达以下代码行为止。

    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
    

        ResultLabel.Text = NumberTextBox.Text + 
            " squared is " + result.ToString();
    

    调试器即会逐行通过代码。调试器执行 Square 函数时，可以使用“局部变量”窗口来检查传递到函数 (number) 的数据，以及函数 (Square) 的返回值。

12. 在“调试”菜单中单击“窗口”，然后单击“即时”。

    “即时”窗口使您可以执行命令。可以使用此窗口来计算表达式（例如，获取某个属性的值）。

13. 在“即时”窗口中键入以下表达式，并按 Enter。

    ? NumberTextBox.Text
    

    问号 (?) 是“即时”窗口中的一个运算符，它计算跟在它后面的表达式。在此示例中，计算页面上 NumberTextBox 控件的 Text 属性。可以使用与在代码中使用的语法相同的语法来计算任何变量、对象属性或将变量和对象属性组合一起的表达式。

14. 在“即时”窗口中键入以下内容并按 Enter：

    NumberTextBox.Text = "5"
    

    除了计算表达式，“即时”窗口还使您可以更改变量或属性

15. 按 F5 以继续运行程序。

    页面出现时，它显示将“5”传递到 Square 函数的结果。另外，文本框中的文本已更改为“5”。

您看到的结果（“10”）是错误的，因为“10”不是“5”的平方。现在可以修复此 bug。

修复 bug 并再次测试

1. 从浏览器切换到 Visual Web Developer。

   说明：
   请勿关闭浏览器窗口。

2. 在 Square 函数中，将“+”运算符更改为“*”运算符。

   因为当前没有运行此代码（页面已经完成处理），所以您正处于编辑模式，可以进行永久性更改。

3. 按 Ctrl+S 保存该页面。

4. 从“调试”菜单中选择“删除所有断点”，这样页面在每次运行时就不会停止。

   说明：
   还可以通过按 Ctrl+Shift+F9 清除断点。

5. 切换到浏览器窗口。

6. 在文本框中输入“5”，然后单击按钮。

   这一次，当您运行页并输入值时，将正确计算此值的平方。先前进行的临时更改（如更改 NumberTextBox 控件的 Text 属性）并未持续，因为这些更改仅在上次运行页面时应用。

7. 关闭浏览器以停止调试器。

后续步骤

调试器包括了帮助您处理代码的其他功能。另外，您可能希望了解有关处理错误条件的技术以及在运行时监视页面的方法。例如，您可能希望研究跟踪。有关详细信息，请参见 演练：在 Visual Web Developer 中使用跟踪以帮助查找网页错误。

请参见

其他资源

使用 Visual Studio 进行调试