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

 

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


作者:​​webabcd​



介绍

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



关键

1、配置IE

工具 - Internet选项 - 高级,设置“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(其他)”为未选中状态,设置“显示每个脚本错误的通知”为选中状态。 


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



示例

DebuggingAndTracing.aspx

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_02<%新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DebuggingAndTracing.aspx.cs"

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_04    Inherits="ClientScripting_DebuggingAndTracing" Title="调试和跟踪" %>

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_02    <script type="text/javascript">新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11    function btnAssert_onclick() 

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14    新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        var a = 50;

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        Sys.Debug.assert(a > 60, "a的当前值为:“" + a + "”,而我们需要它大于60");

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        Sys.Debug.assert(a > 60, "a的当前值为:“" + a + "”,而我们需要它大于60", true);

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

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11    function btnFail_onclick() 

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14    新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        var a = 50;

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        if ( a <= 60)

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14        新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11            Sys.Debug.fail("a的当前值为:“" + a + "”,而我们需要它大于60");       

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

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

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11    function btnTrace_onclick() 

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14    新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        var a = 50;

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        if ( a <= 60)

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14        新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11            Sys.Debug.trace("a的当前值为:“" + a + "”,而我们需要它大于60");       

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

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

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11    function btnDump_onclick() 

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14    新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        Sys.Debug.traceDump($get('btnDump'));

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        Sys.Debug.traceDump($get('btnDump'), "Name");

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

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11    function btnClear_onclick() 

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_13新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_14    新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_客户端_03{

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_服务端_11        Sys.Debug.clearTrace()

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

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_源码下载_04    </script>

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

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <input id="btnAssert" type="button" value="Assert测试" onclick="return btnAssert_onclick()" />

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05    </p>

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <input id="btnFail" type="button" value="Fail测试" onclick="return btnFail_onclick()" />

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05    </p>

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <input id="btnTrace" type="button" value="Trace测试" onclick="return btnTrace_onclick()" />

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05    </p>

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <input id="btnDump" type="button" value="TraceDump测试" onclick="return btnDump_onclick()" />

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05    </p>

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <input id="btnClear" type="button" value="ClearTrace测试" onclick="return btnClear_onclick()" />

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05    </p>

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

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <!--id为“TraceConsole”的textarea用于显示Tracing信息-->

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05        <textarea id="TraceConsole" style="width: 500px; height: 100px;"></textarea>

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05    </p>

新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程(调试和跟踪)_ajax_05</asp:Content>

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

运行结果

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