JavaScript脚本调试方法

 JavaScript脚本调试方法

开发ASP.NET控件是ASP.NET编程中底层的技术，控件必须具备丰富的客户端交互功能。可以直接在控件中加入JavaScript标准，也可以把一些比较好的第三方客户端组件集（如 Prototype.js和JQuery等）嵌入到控件中，不管使用哪种方式，都要学会JavaScript调试技术。下面就讲解一下JavaScript的各种调试技术。

首先设置IE，依次选择"Tools"→"Internet Options"→"Advanced"，找到Browsing下的两个禁用脚本调试复选框，取消对其的选择（IE默认将这两项选中，故不能进行脚本调试），如图2-8所示。

图2-8 "Internet Options"（浏览器选项）窗口

经过以上设置，取消IE默认的禁用功能，就可以调试脚本了。

2.4.1 调试页面中的JavaScript脚本（方法一）

从页面DebugControl.aspx中找到预置示例脚本时加入的ClientClickEvent客户端方法。按F9键在alert语句中设置一个断点，会发现在VS 2005中根本不能在页面中设置断点（VS 2008则直接可以设置断点，就没有VS 2005这样麻烦，不过此方法也可以用于VS 2008）。没关系，我们可以在alert语句之前加一句"debugger；"。修改后ClientClickEvent方法代码如下：

/// <summary>
/// 获得本书更多内容,请看:
/// http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
/// </summary> 
<script language="javascript">
        function ClientClickEvent()
        {          
            debugger;  
            alert('我被点击了一下!');
        }
</script>

在浏览器运行DebugControl.aspx页面，并单击页面中的按钮，则程序在运行到"debugger；"语句后会弹出"选择调试器窗口"，如图2-9所示.
可以从上面窗口任意选择一个调试器（以上只有VS调试器，如果安装了其他调试器，则也会在这里列出），选择按钮"是（Y）"，程序即可在断点中断。

图2-9 选择调试器窗口

2.4.2 调试页面中的JavaScript脚本（方法二）

上一节所遇到的VS 2005（VS 2008之前版本）中不能在 *.aspx页面中为客户端脚本设置断点问题，是使用"debugger；"语句进行跟踪调试来解决的。

在页面运行之前是不能够设置断点的，但可以在运行后手动启动调试器，这样就可以设置断点了。

按"Ctrl+F5"组合键（与F5键的区别是不启用跟踪调试环境）运行页面。在浏览器中呈现DebugControl.aspx测试页面后，依次选择浏览器的菜单"查看"→"脚本调试程序"→"打开"命令，如图2-10所示。

图2-10 执行菜单命令

选择命令后即可弹出"选择调试器窗口"窗口（图2-9），供选择调试器，选择"新实例Visual Studio 2005"项并单击"是（Y）"按钮，会弹出一个新的IDE环境。

在弹出的新IDE环境中找到alert语句，并在此语句设置一个断点。然后切换到正打开DebugControl.aspx页面的浏览器，单击"调试客户端脚本"按钮，即可进行调试。

2.4.3 调试非嵌入式JavaScript脚本文件

非嵌入式脚本一般是指当前运行站点某个文件夹下面的JavaScript文件。

首先配置脚本文件环境。新建一个脚本文件Jscript.js，把页面DebugControl.aspx中的ClientClickEvent方法复制到新建文件，并将这个文件引用到页面中，如下所示:

<script src=JScript.js type="text/jscript"></script>

调试JavaScript脚本文件中的脚本比较简单，除了按照2.4.1节提到的用"debugger；"语句的方法，更简单的方法是在要跟踪调试的语句上按F9键设置一个断点，再按F5键运行，程序运行到断点后会自动中断。

2.4.4 调试嵌入式JavaScript脚本资源文件

嵌入式资源文件是指编译到服务端控件源代码DLL中的资源，比如图片、样式文件、客户端脚本文件等，这样的好处是整个控件最终只有一个DLL，易于部署，后面会有章节专门讲解嵌入式资源，这里仅说明其调试方法。

在VS 2008之前的版本，比如VS 2005默认是不可以调试嵌入式资源文件的，不过可以安装能够调试嵌入式资源文件的调试器，这里推荐一个笔者经常使用的调试器 -- -- Office 2003安装程序带的调试器（安装时从附带的扩展工具里找到它），安装好之后即可以通过上面的方法进行调试。比如在嵌入式脚本文件中使用debugger命令设置断点后，程序运行到该语句时会弹出调试器选择窗口，注意要选择Microsoft Script Editor，如图2-11所示。

图2-11 Office 2003中的脚本调试器

对于VS 2008，则不用这么麻烦，调试嵌入式资源文件的方式与调试非嵌入式资源文件完全相同，其余的事情由VS 2008内部处理。

2.4.5 高效率调试的技巧

1．debugger使用技巧

当控件库比较大时，可以在一些关键的代码地方设置一些debugger命令，并设置执行条件，从而避免每次手动输入这些命令串，以及寻找关键的数据点，再设置断点，这些操作都相当费时。另外，如果这些脚本已经作为嵌入资源打包到DLL中，则无法设置断点。下面这种方案可以解决这些问题，直接看一下例子：

/// <summary>
/// 获得本书更多内容,请看:
/// http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
/// </summary> 
var StartDebugger = false;
function Method1()
{
    //... ...
    if(StartDebugger)
    {
        debugger;
    }
    //... ...
}
 
function Method2()
{
    //... ...
    if(StartDebugger)
    {
        debugger;
    }
    //... ...
     if(StartDebugger)
    {
        debugger;
    }
    //... ...
}
function Method3()
{
    //... ...
     if(StartDebugger)
    {
        debugger;
    }
    //... ...
}

假设这是一些控件中的脚本函数，有"//... ..."标记的是省略的代码。在方法外面定义了一个StartDebugger变量，并且设置其为false，这里的StartDebugger变量就是一个普通的JavaScript变量。

经过以上设置，默认情况下由于StartDebugger值为false（初始化值），所以这些Method方法中的"debugger；"语句始终不会执行，这样就可以把组件打包发给使用控件的开发人员了。

假如使用控件的开发人员遇到问题，需要我们协助，这时只需要在他出问题的页面中加入如下代码即可调试：

<form id="form1" runat="server">
    <script language=javascript>
 
        StartDebugger=true;
 
    </script>
</form>

注意要保证"StartDebugger = true"在较晚的事件中执行，否则会报StartDebugger未定义错误。

使用这种方法就不用每次寻找关键断点位置设断点，为自己也为开发人员节省了时间。此方案是笔者的同事们比较喜欢使用的一种方案。

2．在IE地址栏中执行输出脚本

这里主要使用地址栏执行脚本的功能。请看图2-12。StartDebugger是在页面上定义的一个变量，先通过浏览器运行页面后，再直接在地址栏中输入图2-12中的命令，即可得到StartDebugger的值，图2-13是它的执行结果。

图2-12 在浏览器地址栏中运行脚本

 

图2-13 浏览器地址栏中脚本执行结果

这种方法的好处是不用启动调试。如果继续想看页面中所有的东西，可以在浏览器中执行一个错误语句，比如把上面语句改为：

javascript:alert(abc);

由于abc在页面上没有定义，则系统会自动弹出调试器窗口，您可在此窗口选择调试器并开始调试。

引用：http://msdn.microsoft.com/zh-cn/dd567278.aspx