Microsoft AJAX Library : 디버깅과 추적
ASP(Active Server Pages) 시절에는 메모장이나 울트라에디트와 같은 텍스트 편집 도구를 이용하여 ASP 코드를 작성하였다. 마땅한 스크립트 디버깅 도구가 없어서… <%Response.Write(…)%>를 군데 군데 넣어 가면서...변수 값을 확인 해 가메…..디버깅을 했던 기억이 난다. 머.. 한 번 잘못 걸리면 거의 날 밤을..새워야 한다..
그러고 보면 Visual Studio는 참으로 개발자들을 편하게 해주는 방향으로 변화하는 것 같다.
인텔리센스 기능이나, 자바스크립트 디버깅 기능이나… 다들 개발자들의 노동집약적인 작업들을 덜어주려는 Visual Studio의 노력의 산물이라 하겠다.
Sys.Debug를 이용해 디버깅 및 추적이 가능하다.
○ Sys.Debug.assert(condition, message, displayCaller)
조건을 검사하여, 조건 값이 false 인 경우, 메시지를 표시하고, 사용자에게 디버거를 시작할 지 묻는다.
○ Sys.Debug.clearTrace()
TraceConsole textare 요소에 있는 모든 추적 메시지를 지운다.
○ Sys.Debug.traceDump(object, name)
디버그 콘솔과 TraceConsole textarea에 객체를 덤프한다.
○ Sys.Debug.fail(message)
디버거의 출력창에 메시지를 출력하고, 디버거를 시작한다.
○ Sys.Debug.trace(text)
디버그 콘솔과 TraceConsole textarea에 텍스트를 추가한다.
"디버거를 시작한다"는 의미는 자바스크립트 디버깅을 시작할지 묻는 디버거 시작 대화상자를 띄워 준다는 의미이다.
"예"를 선택하여 아래와 같이 Visual Studio를 이용하여 자바스크립트를 코드 디버깅해 볼 수 있다.
■ 추적 활성화
클라이언트 상에서 추적 메시지를 보고 싶다면, 아래와 같이 TraceConsole이라는 ID를 가지는 textarea를 만들도록 한다.
<textarea id='TraceConsole' rows="10" cols="50"
title="TraceConsole"></textarea>
아래에 디버깅을 하는 간단한 샘플을 통해 사용법을 파악할 수 있다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Debug.aspx.cs" Inherits="Debug" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
var n;
// Insert code intended to set n to a positive integer.
if (false) n = 3;
// Assert if n is not greater than 0.
Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}
function btnFail_onclick() {
var n;
// Insert code intended to set n to a numeric value.
if (false) n = 3;
// Fail if n is not numeric.
if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}
function btnTrace_onclick() {
v = form1.text1.value;
Sys.Debug.trace("Name set to " + "\"" + v + "\".");
alert("Hello " + v + ".");
}
function btnDump_onclick() {
Sys.Debug.traceDump(form1.text1, "Name textbox");
alert("Hello " + form1.text1.value + ".");
}
function btnClear_onclick() {
Sys.Debug.clearTrace()
alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>Sys.Debug Methods Test Page</h2>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<p><b>Use these buttons to demonstrate the assert() and fail()
methods:</b><br />
<input id="btnAssert" type="button" value="Assert"
style="width: 100px"
onclick="return btnAssert_onclick()" />  
<input id="btnFail" type="button" value="Fail"
style="width: 100px" onclick="return btnFail_onclick()" />
</p><hr />
<b>Use the textbox and buttons below to demonstrate tracing.</b>
<br />
<p>Enter your name here:<br />
<input id="text1" maxlength="50" type="text" />
<br />
<br />
<input id="btnTrace" type="button" value="Trace"
style="width: 100px" onclick="return btnTrace_onclick()" /><br />
<input id="btnDump" type="button" value="TraceDump"
style="width: 100px" onclick="return btnDump_onclick()" /><br />
<input id="btnClear" type="button" value="ClearTrace"
style="width: 100px" onclick="return btnClear_onclick()" /><br />
<br /></p>
View output in the TraceConsole textarea below.
<br />
<textarea id='TraceConsole' rows="10" cols="50"
title="TraceConsole"></textarea>
</form>
</body>
</html>
