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

介绍
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}