Transcript 자바스크립트 디버깅
서동진(thisisx) HOONS.Net ASP.Net Sysop Microsoft ASP.Net MVP MySpace Sr.developer 디버깅 C# & ASP.NET 디버깅 ASP.NET 디버깅 ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ 데이터 확인하기 – 조사식, 자동 실행 중단하기 - 중단점 & 조건& 실행 위치 조작 데이터 변경하기 – 직접실행, 코드 변경하여 계속, 창에서 변경 프로세스 디버깅 웹페이지 로컬에서 실행하여 디버깅 자바스크립트 직접 실행 자바스크립트 디버깅 DOM & CSS 데이터 확인 전달 데이터 확인 버그(Bug)의 유래 프로그래밍이란? 버그 De + bug 버그라는 말은 1940년대 미국 하버드대에서 대형 컴퓨터인 ‘마크 (Mark)’를 개발한 그레이스 호퍼 라는 사람이 컴퓨터의 오작동을 발견했는데 그 원인이 벌레였다는 데서 비롯 ◦ 인간의 논리를 기계의 논리로 변환하는 과정 ◦ 개발자가 의도하지 않거나 기대하지 못한 논리적 오류 ◦ 버그를 잡는다는 사전적 의미 ◦ 올바르지 않는 기능 동작을 올바르게 바로 잡는 행위 버그 발견 버그 재연 – 가장 중요함 버그 수정 디버깅 확인 데이터를 확인하고, 변경하고 검증하는 방법 중단점 설정 ◦ F9를 통한 편리한 항상 중단 중단점 조건 설정 ◦ 중단점에서 컨텍스트 메뉴를 통한 설정 ◦ 디버그 > 창 > 중단점 ◦ 중단점 창을 통한 중단점의 관리 실행 위치 조작 ◦ 현재 실행 위치를 변경 자동창을 이용한 데이터 확인 지역창을 이용한 데이터 확인 조사식 창을 이용한 데이터 확인 간략한 조사식 대화 상자를 통한 데이터 확인 ◦ 현재 문과 이전 문에서 사용된 변수를 표기 ◦ 디버거 실행 중에 “디버그 > 창 > 자동” ◦ 현재 컨텍스트에 위치한 변수를 표기 ◦ 디버거 실행 중에 “디버그 > 창 > 지역” ◦ 디버거 실행 중, “디버그 > 창 > 조사식 > 조사식1,2,3,4” ◦ 변수 선택 이후 컨텍스트 메뉴를 통한 간략한 조사식 자동 창이나 지역 창에서의 데이터 변경 ◦ 감시 중인 변수의 값을 변경 가능 ◦ const 제외 직접 실행 창 ◦ 안보이는 경우 - 명령창에서 immed 실행 또는 Ctrl + D, I ◦ 직접 실행을 통한 변경 ◦ 직접 실행의 경우 함수도 호출할 수 있음 편집하며 계속하기 기능 ◦ 도구> 옵션 > 디버깅 > 편집하며 계속하기 소스코드를 변경하여 바로 바로 바뀐 코드 적용 가능 지원되는 코드 변경 내역 ◦ 일부 특이코드 변경은 지원되지 않음 ◦ http://msdn.microsoft.com/ko-kr/library/ms164927(VS.80).aspx ◦ IE말고 FF에서 확인하세요 현재 실행 중인 프로세스에 붙어 디버깅 하는 방법 디버그 > 프로세스에 연결 Ctrl + Alt + p 관리 프로그램은 프로그램에 직접 가상 IIS에서 도는 경우 해당 IIS에 직접 실버라이트 등의 경우 Explorer에 직접 웹사이트에 특화된 디버깅 IE만 가능 자바 스크립트 등의 오류를 검출할 때 효과적임 Base tag를 이용하여 동작 IE에 Visual Studio Debugger 걸기 ◦ 도구 > 인터넷 옵션 > 고급 > 스크립트 디버깅 사용안함 브라우저의 주소 창에 Script를 직접 실행 Javascript: ; alert(‘1’); 경고창이 없는 경우 정상적으로 동작하지 않을 수 있음 IE 와 FF 모두 지원 Visual Studio를 이용한 디버깅 ◦ 중단점 삽입 ◦ debugger; 호출 firebug를 이용한 디버깅 IE Developer Toolbar ◦ http://www.microsoft.com/downloads/details.aspx ?familyid=e59c3964-672d-4511-bb3e2d5e1db91038 ◦ DOM 데이터 변경하기 ◦ CSS 적용 내역 확인 ◦ Style 즉시 변경 Firebug ◦ DOM 데이터 변경하기 ◦ CSS 상속 관계 확인 ◦ CSS 수정을 통한 스타일 변경 HttpWatch ◦ ◦ ◦ ◦ http://www.simtec.ltd.uk/ IE를 거치는 데이터 요청 확인 압축 해제 이후 데이터 확인 전송 되는 쿠키 및 헤더 데이터 확인 AnEC Cookie Editor ◦ http://www.linuxuser.at/tools/anec_ff2.html ◦ Firefox를 통하는 쿠키 정보 수정 ◦ Firefox에서 전달 데이터는 firebug로 확인 [email protected] 디버깅(C# 작업 절차) - http://msdn.microsoft.com/kokr/library/ms228278(VS.80).aspx 중단점 개요 - http://msdn.microsoft.com/kokr/library/5557y8b4(VS.80).aspx 지역 창 사용 - http://msdn.microsoft.com/kokr/library/aa290703(VS.71).aspx 자동 창 사용 - http://msdn.microsoft.com/kokr/library/aa290702(VS.71).aspx 간략한 조사식 대화 상자 사용 - http://msdn.microsoft.com/kokr/library/aa290589(VS.71).aspx 조사식 창 사용 - http://msdn.microsoft.com/kokr/library/aa290591(VS.71).aspx 방법: 코드 변경 내용을 명시적으로 적용 http://msdn.microsoft.com/ko-kr/library/7yty6a48(VS.80).aspx 웹응용프로그램 - http://msdn.microsoft.com/kokr/library/zxfz3z3h(VS.80).aspx