新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程（调试和跟踪）

[索引页]
[源码下载]

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程（调试和跟踪）

作者： webabcd


介绍
ASP.NET AJAX既包含有服务端代码，又包含有客户端代码。然而对客户端代码的调试不同于对服务端代码的调试，下面我们就来看一下如何对客户端代码进行调试。


关键
1、配置IE
工具 - Internet选项 - 高级，设置“禁用脚本调试（Internet Explorer）”和“禁用脚本调试（其他）”为未选中状态，设置“显示每个脚本错误的通知”为选中状态。（参考： 在Visual Studio中调试JavaScript）

2、Tracing信息显示在ID为“TraceConsole”的textarea中。


示例
DebuggingAndTracing.aspx

<% @ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DebuggingAndTracing.aspx.cs"
    Inherits="ClientScripting_DebuggingAndTracing" Title="调试和跟踪"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >

     < script  type ="text/javascript" >

    function btnAssert_onclick() 
    {
        var a = 50;
        
        Sys.Debug.assert(a > 60, "a的当前值为：“" + a + "”，而我们需要它大于60");
        Sys.Debug.assert(a > 60, "a的当前值为：“" + a + "”，而我们需要它大于60", true);
    }

    function btnFail_onclick() 
    {
        var a = 50;
        
        if ( a <= 60)
        {
            Sys.Debug.fail("a的当前值为：“" + a + "”，而我们需要它大于60");       
        }
    }

    function btnTrace_onclick() 
    {
        var a = 50;
        
        if ( a <= 60)
        {
            Sys.Debug.trace("a的当前值为：“" + a + "”，而我们需要它大于60");       
        }
    }

    function btnDump_onclick() 
    {
        Sys.Debug.traceDump($get('btnDump'));
        Sys.Debug.traceDump($get('btnDump'), "Name");
    }

    function btnClear_onclick() 
    {
        Sys.Debug.clearTrace()
    }
    
     </ script >

     < p >
         < input  id ="btnAssert"  type ="button"  value ="Assert测试"  onclick ="return btnAssert_onclick()"   />
     </ p >
     < p >
         < input  id ="btnFail"  type ="button"  value ="Fail测试"  onclick ="return btnFail_onclick()"   />
     </ p >
     < p >
         < input  id ="btnTrace"  type ="button"  value ="Trace测试"  onclick ="return btnTrace_onclick()"   />
     </ p >
     < p >
         < input  id ="btnDump"  type ="button"  value ="TraceDump测试"  onclick ="return btnDump_onclick()"   />
     </ p >
     < p >
         < input  id ="btnClear"  type ="button"  value ="ClearTrace测试"  onclick ="return btnClear_onclick()"   />
     </ p >
     < p >
         <!-- id为“TraceConsole”的textarea用于显示Tracing信息 -->
         < textarea  id ="TraceConsole"  style ="width: 500px; height: 100px;" ></ textarea >
     </ p >
</ asp:Content >

运行结果
1、单击“Assert测试”按钮，则弹出确认框
第一个确认框
Assertion Failed: a的当前值为：50，而我们需要它大于60
Break into debugger?
第二个确认框
Assertion Failed: a的当前值为：50，而我们需要它大于60
at  function btnAssert_onclick()
    {
        var a = 50;
       
        Sys.Debug.assert(a > 60, "a的当前值为：“" + a + "”，而我们需要它大于60");
        Sys.Debug.assert(a > 60, "a的当前值为：“" + a + "”，而我们需要它大于60", true);
    }
Break into debugger?

2、单击“Fail测试”按钮
弹出“Visual Studio实时调试器”

3、单击“Trace测试”按钮
a的当前值为：“50”，而我们需要它大于60

4、单击“TraceDump测试”按钮
traceDump {INPUT - btnDump}
Name {INPUT - btnDump}

5、单击“ClearTrace测试”按钮
清空ID为“TraceConsole”的textarea


OK
[源码下载]