收录查询

[转]如何调试在 Visual Basic.NET 或 Visual Basic 2005 的客户端脚本

原文地址:http://support.microsoft.com/default.aspx?kbid=317699

本文分步介绍了如何通过使用 Visual Basic.NET 或 Visual Basic 2005 和 Microsoft 脚本调试器调试 Microsoft ASP.NET 应用程序中的客户端脚本。

Visual Basic.NET 或 Visual Basic 2005 提供了许多新的调试功能，使您能够更轻松地确定和诊断代码中的问题。

要求

以下列表概述了推荐使用的硬件、 软件、 网络的基础结构和所需的 Service Pack：
  • Microsoft Visual Studio.NET 或 Microsoft Visual Studio 2005
  • Microsoft Internet Information Services (IIS) 5.0 或更高版本
  • Microsoft 脚本调试器
本文假定您熟悉下列主题：
  • Web 应用程序
  • ASP.NET
  • Visual Basic.NET 或 Visual Basic 2005

    调试客户端-脚本在 Visual Basic.NET 或 Visual Basic 2005

    在早期版本 Microsoft Active Server Pages (ASP) 中, 应用程序很难进行调试，尤其在客户端脚本代码中出现的错误。 Visual Studio.NET 可以更好地控制在调试客户端脚本通过集成的调试器和该局部变量时窗口。

    创建应用程序

    在本节，您可以创建一个显示和与计算输入的 按钮 控件的三个 HTML 文本框 控件的 ASP.NET Web 应用程序 （在 Visual Studio 2005 中的 ASP.NET Web 站点）。 此示例使用 JavaScript 进行编程 Button 控件。
    1. 客户端 JavaScript 使用调试器，您必须首先启用脚本调试为浏览器。 要这样做，请按下列步骤操作：
      1. 打开 Microsoft Internet Explorer。
      2. 在 工具 菜单上单击 Internet 选项 。
      3. 在 高级 选项卡上找到 浏览 部分，清除 禁用脚本调试 复选框，然后单击 确定 。
      4. 关闭 Internet Explorer。
    2. 在 Visual Basic.NET （在 Visual Studio 2005 中的 ASP.NET Web 站点） 中创建新的 ASP.NET Web 应用程序，请按照下列步骤操作：
      1. 打开 Visual Studio.NET 或 Visual Studio 2005。
      2. 在 文件 菜单上指向 新建 ，然后单击 项目 。

        请注意 在 Visual 的 Studio 2005 中指向 文件 菜单上的 新建 ，然后单击 网站 。
      3. 在， 新建项目 对话框中单击 项目类型 下的 Visual Basic 项目 ，然后单击 模板 下的 ASP.NET Web 应用程序 。

        请注意 在 Visual 的 Studio 2005 中单击 模板 下的 ASP.NET Web 站点 。
      4. 在 名称 文本框中，键入 ScriptDebuggingExample 。
    3. 切换到 HTML 视图，WebForm 1.aspx 的文件。

      请注意 在 Visual 的 Studio 2005 切换到 Default.aspx 文件的 HTML 视图。
    4. 复制并粘贴下面的代码在 <form> 内部标记： 
      <table>
        <tr>
        <td width="100">
        <asp:label id="lblFirstNumber" runat="server" Width="125">
        First Number:
        </asp:label>
        </td>
        <td width="50">
        <input id="txtNumber1" type="text" maxLength="3"
        size="5" name="txtNumber1">
        </td>
        </tr>
        <tr>
        <td width="100">
        <asp:label id="lblSecondNumber" runat="server" Width="125">
        Second Number:
        </asp:label>
        </td>
        <td width="50">
        <input id="txtNumber2" type="text" maxLength="3"
        size="5" name="txtNumber2">
        </td>
        </tr>
        <tr>
        <td width="100">
        <asp:Label id="lblResult" runat="server" Width="125">
        Result:
        </asp:Label>
        </td>
        <td width="50">
        <input id="txtResult" type="text" size="5" maxlength="5"
        NAME="txtResult" readonly>
        </td>
        </tr>
        </table>
        <br>
        <table>
        <tr>
        <td width="150" align="center">
        <input id="btnDivide" onclick="return btnDivide_Clicked()"
        type="submit" value=" Divide " name="btnDivide">
        </td>
        </tr>
        </table>
    1. 此代码将创建两个输入的文本框、 一个计算按钮以及一个显示结果的第三个文本框。
    1. 复制并将以下代码粘贴到您的页 ； 确保要将代码块放置在第一个 <body> 标记之前： 
    2. <SCRIPT language="javascript">
        function btnDivide_Clicked()
        {    var intNumber1 = 0;
        var intNumber2 = 0;
        var intResult = 0;
        intNumber1 = document.all('txtNumber1').value;
        intNumber2 = document.all('txtNumber1').value;
        intResult = intNumber1/intNumber2;
        document.all('txtResult').value = intResult;
        return false;
        }
        </SCRIPT>
    3. 此代码程序按钮，以便单击按钮时发生的以下功能：
    4. 检索输入的值。
    • 计算输入。
    • 显示结果。

    1. 单击 保存 。
    2. 要测试项目，请按照下列步骤操作：
    3. 在 调试 菜单中上, 单击 开始 生成并运行该应用程序。 WebForm 1 在浏览器中打开，并显示两个输入的文本框、 结果文本框和按钮。
    4. 在将 第一个号码 文本框中，键入 16 。
    5. 在 第二个号码 文本框中，键入 2 。
    6. 单击 除 。 请注意 结果 文本框不显示 8 正如您所期望的那样。
    7. 关闭 Internet Explorer。

    调试应用程序

    Microsoft 脚本调试程序可用于调试在 ASP.NET 应用程序中的客户端脚本。 您可以使用"调试器"关键字来调用 Microsoft 脚本调试器以编程方式在脚本代码。
    1. 与第一个代码 btnDivide_Clicked 过程中添加以下代码： 
         debugger
      此关键字指示脚本调试器应在此停止执行和启动调试器。 此关键字允许您跟踪在例程的其余部分变量的值。
    2. 单击 保存 。
    3. 要运行该项目，请按下列步骤操作：
      1. 在 调试 菜单中上, 单击 开始 生成并运行该应用程序。
      2. 当页打开在浏览器类型 16 在 第一个号码 文本框中。
      3. 在 第二个号码 文本框中，键入 2 。
      4. 单击 除 。 请注意执行停止在该调试器关键字和该控制将转到 Visual Studio.NET 或 Visual Studio 2005 集成开发环境 (IDE)。
      5. 关闭 Internet Explorer。
    4. 右键单击下面的代码行： 
         intResult = intNumber1/intNumber2;
      然后单击 插入断点 。
    5. 在 调试 菜单中上, 单击 继续 。
    6. 在 调试 菜单上指向 Windows ，然后单击 局部变量 。 请注意这为 16 设置 intNumber 1 的值按预期方式。 但是，请注意这也设置的值 intNumber 2 为 16，它不对应于您键入的值。 intNumber 2 变量已赋值相同 intNumber 1 的值。
    7. 在 调试 菜单中上, 单击以关闭调试器和浏览器窗口的 停止调试 。 在控制返回到 IDE。

    修改代码

    1. 将代码 
         intNumber2 = document.all('txtNumber1').value;
      使用下面的代码向 intNumber 2 变量分配正确的值： 
         intNumber2 = document.all('txtNumber2').value;
    2. 单击 保存 。
    3. 要再次测试项目，请请按照下列步骤操作：
      1. 在 调试 菜单中上, 单击 开始 生成并运行该应用程序。
      2. 当页打开在浏览器类型 16 在 第一个号码 文本框中。
      3. 在 第二个号码 文本框中，键入 2 。
      4. 单击 除 。 请注意执行将在 btnDivide_Clicked 例程的开头处停止。
      5. 确保局部变量窗口是打开状态。 在 调试 菜单中上, 单击 逐语句 逐句通过代码行的行，直到到达 返回 语句。 请注意 intNumber 1 和 intNumber 2 变量显示正确的值。
      6. 在 调试 菜单中上, 单击 继续 。 控制返回到浏览器，并在 结果 文本框显示正确结果。
    •            g. 关闭 Internet Explorer。

    完整代码列表

    创建应用程序

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind = "WebForm1.aspx.vb"
    Inherits="ScriptDebuggingExample.WebForm1"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>WebForm1</title>
    <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
    <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    <SCRIPT language="javascript">
    function btnDivide_Clicked()
    {  var intNumber1 = 0;
    var intNumber2 = 0;
    var intResult = 0;
    intNumber1 = document.all('txtNumber1').value;
    intNumber2 = document.all('txtNumber1').value;
    intResult = intNumber1/intNumber2;
    document.all('txtResult').value = intResult;
    return false;
    }
    </SCRIPT>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post">
    <table>
    <tr>
    <td width="100">
    <asp:label id="lblFirstNumber" runat="server" Width="125">
    First Number:
    </asp:label>
    </td>
    <td width="50">
    <input id="txtNumber1" type="text" maxLength="3"
    size="5" name="txtNumber1">
    </td>
    </tr>
    <tr>
    <td width="100">
    <asp:label id="lblSecondNumber" runat="server" <BR/>
    Width="125">
    Second Number:
    </asp:label>
    </td>
    <td width="50">
    <input id="txtNumber2" type="text" maxLength="3"
    size="5" name="txtNumber2">
    </td>
    </tr>
    <tr>
    <td width="100">
    <asp:Label id="lblResult" runat="server" Width="125">
    Result:
    </asp:Label>
    </td>
    <td width="50">
    <input id="txtResult" type="text" size="5" maxlength="5"
    NAME="txtResult" readonly>
    </td>
    </tr>
    </table>
    <table>
    <tr>
    <td width="75" align="center">
    <input id="btnDivide" value=" Divide "
    onclick="return btnDivide_Clicked()"
    type="submit" size="50" name="btnDivide">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </HTML>

    调试应用程序

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind = "WebForm1.aspx.vb"
    Inherits="ScriptDebuggingExample.WebForm1"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>WebForm1</title>
    <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
    <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5"
    name="vs_targetSchema">
    <SCRIPT language="javascript">
    function btnDivide_Clicked()
    {  debugger
    var intNumber1 = 0;
    var intNumber2 = 0;
    var intResult = 0;
    intNumber1 = document.all('txtNumber1').value;
    intNumber2 = document.all('txtNumber1').value;
    intResult = intNumber1/intNumber2;
    document.all('txtResult').value = intResult;
    return false;
    }
    </SCRIPT>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post">
    <table>
    <tr>
    <td width="100">
    <asp:label id="lblFirstNumber" runat="server"
    Width="125">
    First Number:
    </asp:label>
    </td>
    <td width="50">
    <input id="txtNumber1" type="text" maxLength="3"
    size="5" name="txtNumber1">
    </td>
    </tr>
    <tr>
    <td width="100">
    <asp:label id="lblSecondNumber" runat="server"
    Width="125">
    Second Number:
    </asp:label>
    </td>
    <td width="50">
    <input id="txtNumber2" type="text" maxLength="3"
    size="5" name="txtNumber2">
    </td>
    </tr>
    <tr>
    <td width="100">
    <asp:Label id="lblResult" runat="server" Width="125">
    Result:
    </asp:Label>
    </td>
    <td width="50">
    <input id="txtResult" type="text" size="5" maxlength="5"
    NAME="txtResult" readonly>
    </td>
    </tr>
    </table>
    <br>
    <table>
    <tr>
    <td width="75" align="center">
    <input id="btnDivide" value=" Divide "
    onclick="return btnDivide_Clicked()"
    type="submit" size="50" name="btnDivide">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </HTML>

    修改代码

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind = "WebForm1.aspx.vb"
    Inherits="ScriptDebuggingExample.WebForm1"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>WebForm1</title>
    <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
    <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5"
    name="vs_targetSchema">
    <SCRIPT language="javascript">
    function btnDivide_Clicked()
    {  debugger
    var intNumber1 = 0;
    var intNumber2 = 0;
    var intResult = 0;
    intNumber1 = document.all('txtNumber1').value;
    intNumber2 = document.all('txtNumber2').value;
    intResult = intNumber1/intNumber2;
    document.all('txtResult').value = intResult;
    return false;
    }
    </SCRIPT>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post">
    <table>
    <tr>
    <td width="100">
    <asp:label id="lblFirstNumber" runat="server"
    Width="125">
    First Number:
    </asp:label>
    </td>
    <td width="50">
    <input id="txtNumber1" type="text" maxLength="3"
    size="5" name="txtNumber1">
    </td>
    </tr>
    <tr>
    <td width="100">
    <asp:label id="lblSecondNumber" runat="server"
    Width="125">
    Second Number:
    </asp:label>
    </td>
    <td width="50">
    <input id="txtNumber2" type="text" maxLength="3"
    size="5" name="txtNumber2">
    </td>
    </tr>
    <tr>
    <td width="100">
    <asp:Label id="lblResult" runat="server" Width="125">
    Result:
    </asp:Label>
    </td>
    <td width="50">
    <input id="txtResult" type="text" size="5" maxlength="5"
    NAME="txtResult" readonly>
    </td>
    </tr>
    </table>
    <br>
    <table>
    <tr>
    <td width="75" align="center">
    <input id="btnDivide" value=" Divide "
    onclick="return btnDivide_Clicked()"
    type="submit" size="50" name="btnDivide">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </HTML>
posted @ 2009-05-06 00:27  ->  阅读(322)  评论(0)    收藏  举报