VisualStudio 2005에서 자바스크립트 디버깅하기
SCRIPT
2008/04/04 15:36
http://blog.naver.com/interinside/140050165215
먼저 간단한 예제화면을 작성합니다.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>제목 없음</title> <script type="text/javascript" language="javascript"> function FillData() { for(i=0;i<100;i++) { document.getElementById("Select1").options.add(new Option(i,i)); } } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="셀렉트박스채우기" onclick="FillData()" /> <br /> <select id="Select1" size="10" style="width:200px;"></select> </div> </form> </body> </html> |
버튼을 클릭하면 Select Box에 아이템을 채우는 간단한 예제입니다.
결과화면은 위와 같습니다.
그럼 이제 디버그를 하기위해 자바스크립트에 잘못된 코드를 넣어보겠습니다.
|
for(i=0;i<100;i++) { document.getElementById("Select1").options.add (new Options(i,i)); } |
일부러 오타를 만들구요 (빨간부분을 넣었습니다)
실행을 해보면
이런 에러가 나는군요
이제 디버깅을 위한 준비를 합니다.
먼저 IE에서 디버깅사용을 활성화 해야합니다 IE 7.0에서 보면
인터넷 옵션의 고급탭에 보면 스크립트 디버깅 사용 안함이란 항목을 모두 체크해제 합니다.
자 그런다음에 IE를 다시 실행해보면 아까와는 다른 화면이 나옵니다.
디버그 할꺼냐고 물어보는군요
예를 선택하면
이런창이 뜹니다. 어떤 디버거를 선택할거냐는데요 이왕이면 현제 열려있는 VisualStudio를
선택하는게 좋겠네요
현재 작업하는 VisualStudio가 열리면서 디버깅모드로 전환됐습니다.
기존 C#디버깅 처럼 F5, F10 등의 키를 이용하여 한단계씩 실행할 수 있으며 조사식도 가능하여 각각 자바스크립트 변수에 어떤값이 있는지 확인이 가능합니다.
조사식을 이용하여 해당객체의 확인도 가능하구요
이로써 기본적인 디버깅은 가능합니다만 먼가 부족합니다. 바로 중단점인데요
코드가 길고 복잡할경우 중단점을 찍고 처음부터 실행해 보고싶을 때도 있습니다.
자바스크립트 디버깅시 일반적인 중단점은 찍을 수가 없구요
Debugger 라는 키워드를 이용해서 처리할수 있습니다.
|
function FillData() { debugger; for(i=0;i<100;i++) { document.getElementById("Select1").options.add(new Options(i,i)); } } |
Debugger 이라는 키워드를 삽입하고 다시 실행해보겠습니다.
debugger라는 키워드가 중단점의 역할을 합니다.
저 부분부터 한 단계씩 실행을 할 수 있습니다.
'.NET > VisualStudio' 카테고리의 다른 글
| Visual Studio 항목에 대해 게시속성을 적용할 수 없습니다 (0) | 2010.03.23 |
|---|---|
| VS2008 XAML 코드 작성시 자동 정렬기능 사용시, 공백 정렬 설정팁 (0) | 2009.12.18 |
| Java 응용 프로그램을 Visual C#으로 변환 (2) | 2009.11.16 |
| TortoiseSVN in Visual Studio 비주얼스튜디오 SVN 연동 팁 (1) | 2009.05.12 |
| TFS 동영상 PDC2008 (0) | 2009.04.10 |
| vs2005 화면색 글 세팅파일 모나코 글꼴 MONACO 환경설정 (0) | 2009.01.05 |
| 프레임워크가 깔려있는 곳 프레임워크 위치 (0) | 2008.12.17 |
| 비주얼스튜디오 설치파일 만들기 배포하기 (0) | 2008.12.02 |