Ajax 디버거 - 파이어버그 (Firebug)
07 22, 2007 10:53
Firebug
파이어폭스는 다양한 플러그인들을 사용할 수 있는게 IE 비해서 장점이라고 할 수 있습니다.
그중에 Ajax 스크립트를 작성할 때 유용하게 사용할 수 있는 디버거 플러그인이 있는데 Firebug 라고 불리우는 놈입니다.
일단 설치를 해볼까요?
파이어폭스의 도구>부가기능을 열어서 아래쪽의 유용한 확장 기능 찾기 를 이용해서
플러그인 검색 페이지를 엽니다.
그러고 나면 열리는 페이지에서 검색란에 firebug 를 입력해서 플러그인을 찾습니다.
눌러서 설치페이지로 이동합니다.
설치하기 버튼 눌러주시고요.
다시 시작하시면 됩니다.
파이어폭스가 재 시작되고 나면 파이어버그를 사용할 수 있습니다. 일단 도구 메뉴에서 그림과 같이 메뉴를 선택해서
파이어버그를 열수도 있고 ...
혹은 브라우저 아래쪽에 보면 그림처럼 녹색동그라미가 생겼을 겁니다. 이걸 더블클릭해서 열 수 도 있습니다.
파이어 버그가 어떤점이 유용한가?
일단 XHR 탭의 Net 탭을 선택하고 나면 페이지 상에서 동작하는 XmlHttpRequest 의
동작을 상세하게 살펴볼 수 있습니다. 한번 동작할 때 마다 로드 시간, 요청 ,응답을
쉽게 확인 할 수 있습니다. 매우 유용하죠.
또 다른 유용한 기능은 중단점이 가능한 스크립트 디버깅 기능입니다.
script 탭을 선택하면 현재 페이지가 포함하는 모든 스크립트를 목록에서 선택할 수 있습니다. 스크립트에서
중단점을 선택하고 변수의 값을 실시간으로 확인할 수도 있습니다.
파이어폭스는 다양한 플러그인들을 사용할 수 있는게 IE 비해서 장점이라고 할 수 있습니다.
그중에 Ajax 스크립트를 작성할 때 유용하게 사용할 수 있는 디버거 플러그인이 있는데 Firebug 라고 불리우는 놈입니다.
일단 설치를 해볼까요?
파이어폭스의 도구>부가기능을 열어서 아래쪽의 유용한 확장 기능 찾기 를 이용해서
플러그인 검색 페이지를 엽니다.
그러고 나면 열리는 페이지에서 검색란에 firebug 를 입력해서 플러그인을 찾습니다.
눌러서 설치페이지로 이동합니다.
설치하기 버튼 눌러주시고요.
다시 시작하시면 됩니다.
파이어폭스가 재 시작되고 나면 파이어버그를 사용할 수 있습니다. 일단 도구 메뉴에서 그림과 같이 메뉴를 선택해서
파이어버그를 열수도 있고 ...
혹은 브라우저 아래쪽에 보면 그림처럼 녹색동그라미가 생겼을 겁니다. 이걸 더블클릭해서 열 수 도 있습니다.
파이어 버그가 어떤점이 유용한가?
일단 XHR 탭의 Net 탭을 선택하고 나면 페이지 상에서 동작하는 XmlHttpRequest 의
동작을 상세하게 살펴볼 수 있습니다. 한번 동작할 때 마다 로드 시간, 요청 ,응답을
쉽게 확인 할 수 있습니다. 매우 유용하죠.
또 다른 유용한 기능은 중단점이 가능한 스크립트 디버깅 기능입니다.
script 탭을 선택하면 현재 페이지가 포함하는 모든 스크립트를 목록에서 선택할 수 있습니다. 스크립트에서
중단점을 선택하고 변수의 값을 실시간으로 확인할 수도 있습니다.
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다