본문 바로가기

카테고리 없음

파이어버그를 이용한 빠른 웹 애플리케이션 디버깅과 튜닝

요즘 웹개발을 하는데 웹개발 할 때 어려운 점이 HTML과 자바스크립트의 디버깅 입니다. HTML의 태그가 꼬이면 꼬인 부분 찾기가 어렵고 자바스크립트에서 에러가 나면 익스플로러에서 뿌리는 디버깅 정보가 부족하여 에러 찾기가 힘이 듭니다.

사람에게 유익한 기사는 모기 물렸을 때 물파스가 바로 옆에 있는 것처럼 가려운 부분을 직접 긁어주는 기사가 특히 유익할 것입니다. 요즘에 IBM developerWorks의 기사를 소개하는데 내용이 좋긴 하지만 다소 어렵게 느껴지기도 합니다. 그런데 지금 소개할 기사는 그야말로 바로 써먹을 수 있는 유익한 기사입니다.

파이어폭스의 확장기능 중 하나인 파이어버그라는 웹 페이지 디버깅과 튜닝 툴입니다. 그럼 파이어버그의 소개와 각종 기능을 살펴볼까요.

파이어버그를 이용한 신속한 웹 애플리케이션 디버깅과 튜닝

파이어버그는 CSS(cascading style sheets), HTML, DOM(document object model), 자바스크립트를 모니터링, 편집, 디버깅할 수 있는 도구를 제공하는 모질라 파이어폭스 브라우저를 위한 오픈 소스 확장이다. 자바스크립트 콘솔, 로깅 API, 유용한 네트워크 감시기도 포함하고 있다. 파이어버그를 사용하면 웹과 Ajax 응용 프로그램을 손쉽게 디버깅하고 조율할 수 있다.
이 기사를 통해 파이어버그가 제공하는 기능들에 더 친숙해질 수 있길 바란다.

    * 서비스 중인 웹 페이지의 HTML, CSS, 자바스크립트를 편집하기
    * 디버깅 및 프로파일링 보고서
    * 실행 시간 측정 결과 기록
    * 웹 페이지 로드 시간을 분석하기 위한 네트워크 감시기
    * 에러 보고

등의 기능을 제공한다.


> 파이어버그의 HTML과 CSS 도구

 아무 페이지에서 파이어버그를 실행시키고, 아무 위치나 클릭하면 해당 위치의 HTML이 표시됩니다. 이거 HTML이 꼬일 때 쓰면 편리하겠습니다.

 CSS는 이미지 미리보기와 스타일 미리보기 기능도 제공합니다. 놀랍습니다.


> 파이어버그의 자바스크립트 도구

보통 자바스크립트는 디버그 할 때 alert 명령어 쓰곤 했는데 파이어버그는 고급 디버깅툴의 기능을 그대로 쓸 수 있습니다.

* 자바스크립트의 특정 행으로 바로 이동하기
* 표현식 감시(어떠한 자바스크립트 표현식도 가능)
* 보기 쉬운 호출 스택
* 조건부 중단점
* 에러 후에 디버깅 시작하기 등..

그 외 네트워크 모니터링 등의 많은 기능을 가지고 있습니다. 정말 최근 웹개발을 하면서 파이어버그를 몰랐던게 가장 아쉬울 정도네요. 지금이라도 써봐야 겠습니다.


특히 파이어버그 쓰면 좋은점이 웹 표준도 지킬 수 있을 것 같습니다. 저도 남의 사이트는 웹표준을 지키라고 하면서 내가 개발해보니 웹 표준 지키기가 쉽지 않더군요. 그런데 파이어버그는 웹표준에 맞게 디버그 정보를 제공할 테니 웹표준 검사할때도 유익하게 쓰일 수 있을 것 같습니다.

당장 내일부터 파이어버그 써봐야겠네요. 웹 개발자 여러분께 강력추천 합니다.


> IBM developerWorks



> 포켓뱅킹 소개 및 책 선물 이벤트

포켓 뱅킹이란, 국내 최초로 인터넷 뱅킹을 개발한 멤버들이 모여서
‘최대한 담을 수 있는 금융 서비스를 하나의 휴대하기 편리한 USB 형태의 장치로 안전하게 담아서 PC등의 각종 매체에 장착하여 제공하는 서비스’입니다. 자세한 소개는


를 읽어주시고, 이번 포켓뱅킹 서비스 오픈 전에 사용자 대상 설문조사를 하고 있습니다. 설문조사는 금방 끝나며, 설문조사 응시할때 15명을 추첨하여 2만원 상당의 고급 책을 경품으로 주는 이벤트도 같이 하고 있습니다. 응모자 목표를 200~250명으로 잡고 있어서 당첨률이 꽤 높기 때문에 여러분들의 많은 참여 바랍니다. ^ ^