웹사이트 개발용 디버깅 컨트롤 – iDebugX (Client, Server-Side)

사용환경
————————————————————
OS: Windows 계열
웹브라우저: MS Internet Explorer 거의 모든 버전
스크립트: JavaScript, VBScript 등

오랜만에 자작 프로그램(iDebugX) 올려봅니다.
프로젝트에 JSP로 개발하면서 Server-side와 Client-side의 디버깅 컨트롤을 각각 만들었습니다.
JSP용 서버 사이드는 정리되면 올리도록 하지요..
클라이언트 사이드 컨트롤은 개발언어에 관계없이 사용할 수 있습니다.

뭐하는데 사용하는 넘인가 하면요…
개발시 웹페이지에서 변수값 등을 확인하기 위해서 alert() 함수를 많이 사용할 겁니다.
사용 후 다시 지워야하고, 나중에 버그 발생시 값 확인하려면 또다시 alert()를 사용해야 하는 경우가 많을 겁니다.
iDebugX는 OutputDebugString() API를 호출하므로 alert()처럼 사용자에게 직접적으로 보여주지는 않습니다.
디버그 뷰어를 실행해서만 볼 수 있습니다.

예를 봅시다..(이 예제를 테스트하기 위해서는 iDebug.ocx를 윈도우에 등록해야 됩니다. 방법은 아래 참조)

debug.js (javascript)

<script type=”text/javascript”>
<!–
        // HTML 페이지에 디버그 컨트롤 삽입
        function SetDebugMode()
        {
                var iDebug = “<OBJECT id=idbg classid=’clsid:A7E78F01-4566-4A90-87EC-01EEF2D1344A’><param name=’header’ value=’::’></<param name=’UseDialogBox’ value=false></OBJECT>”;
                document.writeln(iDebug);
        }
 
        SetDebugMode();
 
        // 디버그 컨트롤 설치 여부 검사
        function Installed_iDebugX()
        {
                try
                {
                        return (typeof(document.all(“idbg”))!=”undefined” & document.all(“idbg”).object != null & idbg.installed());
                }
                catch(e)
                {
                }
        }

        // 디버그 메시지 출력
        function OutputDebugString(msg)
        {
                if (Installed_iDebugX())
                        idbg.OutputDebugString(msg);
        }
 
        // 디버그 메시지 대화상자 표시
        function ShowDebugString(msg)
        {
                        if (Installed_iDebugX())
                                idbg.ShowDebugString(msg);
        }
</script>
–>

사용 예제(javascript)

<SCRIPT language=’javascript’ type=’text/javascript’ src=’./debug.js’></SCRIPT>
<SCRIPT language=’javascript’>
        ….
        ….
    OutputDebugString(“변수 user_id:” + user_id);
        ….
        ….
</SCRIPT>
</HTML>

위 예제처럼 하면 디버그 뷰어에 “::변수 user_id:test”라는 문자열이 출력됩니다.(user_id가 test일 경우)