java, c# , linux, program devloper :: Client Side Debugging

원본출처 -- http://zmeun.tistory.com/category/ASP.NET

이젠 하자! Client Side Debugging

Visual Studio.Net은 이미 개발환경에 정말 많은 편리함을 제공해 주고 있다. 이러한 편리한 Tool로 인해서, 개발자는 로직 구현에 많이 집중할 수 있게 되었고, 개발시간 또한 많이 줄어든 건 사실이다.(하지만 이러한 Tool의 버그로 인해 지대 삽질을 경험하지 않은 개발자 또한 별로 없을 것이다. -_-;) 이 중에, 일상생활에서 가장 톡톡히 덕을 보고 있는 것이, 디버깅 관련 기능인데, Visual Studio.Net 2005가 출시되면서부터 추가된 Visualizer기능으로 인해, 개발자는 더 편하게 중단점이 적용된 부분의 값들을 확인 할 수 있다. 그런데 이런 디버깅은 단지 Server Side 코드에서만 적용해서 사용해 왔다. 왜냐… 그렇게 알고 있었으니까…(본인만 그런가? -_-;) 그런데 우리가 몰랐던 것이, Visual Studio.Net 2005에서는 Client Side Debugging을 할 수 있는 기능을 제공 하고 있었다. 오후~ 이런… 이제부터 이 Client Script Debugging을 어떻게 사용하는지 알아보자.

Setting Client Script Debugging

먼저 다 알고 있겠지만, Client Side Script라는 것은 aspx파일 또는 html, js파일에 포함되는 VBScript, J# Script, JavaScript를 이야기하며, 이러한 코드들은 Internet Explorer와 같은 Client Application에서 Load되게 된다. 이렇게 때문에, 우리가 먼저 확인해 봐야 할 것은 바로 Internet Explorer가 Client Script Debugging을 처리 할 수 있는지 없는지를 확인해야 한다. 이것은 Internet Explorer의 도구메뉴에서 인터넷옵션 > 고급 탭에서 확인을 할 수 있는데, 그 부분은 아래와 같다.

Internet Option

[그림 1]

위 그림에서 보면 붉은 선으로 Box가 쳐진 옵션이 두 개 있는데, 이 부분이 모두 UnChecked되어 있어야 한다. 이 부분에 대한 것은 옵션 설명으로도 충분히 알 수 있을 것이다.

이것으로 Client Script Debugging을 할 수 있는 설정은 끝났다. (으흐~ 정말 간단하다.) 그럼 이제 예제 코드를 가지고 실제 Visual Studio.Net 2005에서 어떻게 Client Side Script를 디버깅 하는지 알아보자.

function btnPopup_Click()

{

var name;

var helloStr;

name = document.getElementById("txtName");

if(name.value.length == 0)

{

alert("Please Write your name...");

name.focus();

return;

}

helloStr = "Hello! '"+name.value+"' ~ Nice to meet you...";

alert(helloStr);

}

</script>

</head>

<body>

<div>

<asp:Label ID="lblid" runat="server" Text="Write your name : " Font-Names="Verdana"></asp:Label> <input type="text" id="txtName"/>

<br />

<button id="btnPopup" onclick="btnPopup_Click();">Click!</button>

</div>

</form>

</body>

</html>

[코드 1]

위 코드는 예제 코드로, TextBox에 이름을 입력 받고, Button을 클릭하면 JavaScript 함수가 호출되면서, 입력 받은 값을 가지고 alert창을 띄우는 코드다.

이렇게 코드를 구현하고 이제 실행을 해보자. 그럼 아래와 같은 결과가 나타나게 된다.

[그림 2]

[그림 3]

이제 보나마나 한 결과까지 봤으니, Client Script Debugging에 대해서 알아보자. 이런 스크립트 코드를 디버깅 하기 위해서는 먼저 디버깅하고자 하는 function에 코드를 추가해야 하는데, 이 코드는 바로 “debugger”라는 코드이다.

그럼 위 코드 중 디버깅 하고자 하는 btnPopup_Click() function의 코드는 아래와 같이 된다.