웹프로그램 연구(IV) ASP 디버그 방법

서버에서 응답하는 ASP소스를 디버그하는 방법이 마땅하지 않기 때문에 단계실행이 안되는 대신 로그를 수집하여 ASP 파일의 거동을 조사한다.

기본: Response.Write(S)로 만족해

가장 간단한 방법은 Response.Write(S)를 이용하는 것이다. ASP소스의 중간 중간에 필요할 때마다 Response.Write(S)를 끼워넣으면 S문자열이 클라이언트 측에 출력되므로 문자열을 확인할 수 있다.

그러나 단순히 문자열 S를 표시한다고 해서 브라우저에 간단히 표시되지만을 않는다. HTML 요소들 사이에 끼어들어간 문자열 S는 요소가 깨어져서 잘 안보이게 되는 경우가 많다. 요소를 생성하려고 ASP를 실행시키고 있으니 당연한 결과가 된다.

응용 I: 메시지박스를 쓰면 되잖아

좀더 표시를 강력하게 하려면 .메시지박스 "alert(S)"를 요소사이에 끼워넣기를 하면 된다. 메시지박스는 강력하기 때문에 어디서든지 문자열을 표시하게 된다.

브라우저 상에서 돌아가는 것은 자바스크립트이니까 실제로는 Response.Write("<script>alert(" & S & "</script>")를 쓰는 것이다. 그러나 alert의 특성상 실행이 중단되고 OK를 응답하기 전까지는 다른 로그를 참조하지 못한다. 만약 10번의 로그가 있다면 10번을 클릭해야 넘어간다.

응용 II: 스타일과 스크립트를 조합

alert의 단점을 보완하여 가장 고도로 고안한 방법이다.
간단히 설명하자면 단순 문자열을 클라이언트에 내보내지 않고 스크립트 문자열을 내보내면서 메시지박스 형태의 요소에 표시할 수 있도록 미리 자바스크립트파일을 작성해두는 것이다.

(alert가 아닌 이런 화면이 브라우저에 나타나게 할 수 있다. Mac 에서 Opera 사용)

CSS정의를 따로 두는 이유는 표시상의 자유도를 높이기 위한 것이다.
 

파일명	확장자	설계
debug.css	*.css	요소의 디자인position:fixed의 영향으로로 화면 중앙에 나타난다.
debug.js	*.js	미리 정의해둔 표시용함수들을 정의한다.
debug.elm	*.elm	메시지박스의 요소들을 정의해서 <!-- #include file="debug.elm" -->에 사용한다. 확장자는 임의로 한다.
debug.src	*.src	ASP의 함수명을 스크립트의 함수명에 일치시켜주면 쓰기 편리하다. <!-- #include file="debug.src" -->에 사용하고 확장자는 임의.

CSS의 정의

파일명: debug.css

*#_MsgBox {display:none; background-color:ButtonFace; border:solid 2px ActiveCaption; position:fixed; top:30%; left:25%; }
*#_MsgBox *#_Titlebar {background:url(smallicon.png) no-repeat; background-color: ActiveCaption; text-indent:2em; font-weight: bold; color:CaptionText; }
#_MsgBox #_message {overflow:auto;width:200px}

Javascript의 함수예

파일명: debug.js

function onShow() {
        var objBox = document.getElementById("MsgBox");
        if (objBox != null) { objBox.style.display = "block"; }
}
function onOK() {
        var objBox = document.getElementById("MsgBox");
        if (objBox != null) { objBox.style.display = "none"; }
}
function showMsg(S) {
        var objTd = document.getElementById("_message");
        if (objTd != null) {
                objTd.appendChild(document.createTextNode(S));
                objTd.appendChild(document.createElement("br"));
                onShow();
        }
}

HTML의 표시요소

파일명: debug.elm

<div style="text-align: center;" id="_MsgBox">
<div id="_Titlebar">HTML 메시지 by Pro</div>
<table style="text-align: left; margin-left: auto; margin-right: auto;" cellpadding="10">
<tbody><tr><td style="vertical-align: top;"><img src="icon.png"></td>
<td> <div id="_message"><br></div></td></tr>
</tbody>
</table>
<input value="Close" onclick="onOK()" type="button"> <br>
<br>
</div>

ASP의 함수예

파일명: debug.src

<%
Function showMsg(S)
        '<script type="text/javascript">showMsg(S)</script>
        Dim strLeft, strRight, strLine

        strLeft = "<script type=" & Chr(34) & "text/javascript" & Chr(34) & ">showMsg("
        strRight= ")</script>"
        strLine = strLeft & Chr(34) & S & Chr(34) & strRight

        Response.Write(strLine)
End Function
%>

방법	장점	단점
Response.Write(S)	가장 간단	요소에 파묻혀서 안보인다.
alert(S)	메시지를 반드시 표시	여러개의 로그를 보기에 불편하다.
CSS+Javascript	Best Idea	하나의 *.asp파일에 몇가지 모듈을 포함시켜야 한다.

객체지향을 추구한다면 한번 모듈을 만들어 두고 여러번 재활용할 수 있도록 하는 것이므로 작은 파일을 여러개 나누는 것이다. 로그 메시지를 표시하는 기능외에도 로그를 지우는 기능, 같은 화면이 아니라 다른 화면에 표시하는 기능을 추가하면 더욱 강력한 로그 출력 모듈이 된다.

기왕 화제가 되었으니 다음 기회에는 객체 지향 모듈 설계에 대해서 메모를 해두자.
소스코드리뷰(IV) 객체지향 모듈 설계