모질라 디버깅툴 Venkman 사용하기 - 좀더 상세한 javascript 디버깅

이것은 일반 Application 으로 프로그램을 개발할때와 동일하게 디버깅을 자바스크립트에서 할수 있다.
먼저 Venkman 을 검색해서 설치한다. 그리고 Firefox 를 재시작한다.

도구 > javascript debugger 시작한다.

그러면 프로그램이 새창으로 뜨게 되는데 application 디버깅 툴과 흡사하게 생겼다.

왼쪽 위엔 브라우저에서 로딩한 자바스크립트가 있는 페이지 목록을 나타낸다.

왼쪽 위 페이지를 클릭하게 되면 오른쪽 화면에 Source code  표시된다.

소스 코드에서 왼쪽 바를 보게 되면 - 된것을 볼수 있다. 브레이크 포인트를 클릭해서 설정할수 있는데
오른쪽 클릭해서 설정할수도 있다. 메뉴에 보면 set Breakpoing 와 set Future Breakpoint  가 있는데
set Breakpoint 는 함수 내부에서 실행되는 내용에 사용할수 있으며 set Future Breakpoint 는 함수외부
그러니까 처음 Html 페이지가 로딩될때 자바스크립트에서 쓰이는 변수에 걸수있다. 전역변수인 셈이다.

브레이크포인트 2가지 예를 적용한 그림이다. F 는 future breakpoint 이며 B 는 일반 Breakpoint 를 나타낸다.

화면을 실행하게 되면 그 시점의 내용이 콘솔로 찍히게 된다.

debug 시에 실시간으로 변수에 값을 관찰할수 있는데 왼쪽 중간에 보면 Local Variables 가 그것이다.

Watchs 탭에서는 관찰하기 원하는 변수를 추가해서 실시간으로 디버깅을 할수있다. 그림과 같이
변수를 추가하게 되면 디버깅시에 실시간으로 값들을 확인가능하다.

Profile 기능은 자바스크립트의 코드양이 많아지고 Ajax 처럼 백그라운드에서 실행되는 코드의
병목현상을 볼수 있도록 도움을 주는데 Venkman 메뉴에서 > Profile > Save Profile Data As... 하게 되면
원하는 포멧으로 내용을 저장할수 있다.

이 저장한 내용은 메소드의 총 호출 건수및 소요시간을 확인할수 있으므로 어느곳에서 병목현상이 발생하는지
확인할수 있다.

출처 : http://mainia.tistory.com/232