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

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 영어원문  제안 및 의견 피드백

난이도 : 초급

Sami Salkosuo, 소프트웨어 아키텍트, IBM　

2008 년 7 월 08 일

웹 페이지 로딩은 왜 이렇게 오래 오래 걸릴까요? 웹을 돌아다니다가 HTML을 조사하거나 편집하고 싶었던 적이 없었나요? CSS를 즉시 조정해 볼 수 없을까요? 이 기사에는 개발자들을 위해 다양한 도구를 제공하는 무료 오픈 소스 파이어폭스 확장인 파이어버그(Firebug)에 대해 알아봅니다. 파이어버그를 사용하면, 서비스 중인 페이지의 HTML, CSS, 자바스크립트 코드, 네트워크 트래픽을 모니터링하고, 편집하고 디버깅할 수 있습니다. 이 기사를 통해 파이어버그를 익히면 웹과 Ajax 응용 프로그램을 디버깅하고 조율하는 작업 속도를 향상시킬 수 있을 것입니다.

소개

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

인터넷 익스플로러, 오페라, 사파리를 위한 파이어버그 라이트(Firebug Lite)도 있다.

이 기사를 통해 파이어버그가 제공하는 기능들에 더 친숙해질 수 있길 바란다.

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

위로

시작하기

파이어폭스를 사용하여 파이어버그를 다운로드하자. 페이지 오른쪽에 있는 오렌지색의 Install Firebug를 클릭하면 된다.

파이어폭스에 확장을 설치하고 나서 브라우저를 다시 시작하자. 파이어버그를 사용하려면 다음과 같이 한다.

1. 아무 웹 페이지나 방문한 다음 F12를 눌러 파이어버그를 브라우저 창 안에 열 수 있다.
2. CTRL-F12를 눌러 파이어버그를 다른 창으로 열 수 있다(모니터 두 대를 사용할 때 매우 유용하다).

   이 기사에서는 파이어버그를 같은 창에 열기 위해 첫 번째 방법을 사용한다(그림 1).

설치 직후에는 파이어버그를 사용하지 않도록 설정되어 있다. Enable Firebug를 클릭하면 그림 2와 같은 화면을 볼 수 있다.

이제부터 파이어버그의 기능들에 대해 알아보자.

위로

HTML과 CSS 도구

HTML과 CSS 도구는 HTML 조사 및 편집, CSS 편집, CSS 시각화를 포함한다.

HTML 조사와 편집

HTML에서 눈에 보이는 부분에 해당하는 소스 코드를 찾기 위해 HTML 조사 기능을 사용할 수 있다.

1. 파이어버그 창에서 Inspect를 클릭하자.
2. 커서를 HTML의 아무 곳에나 이동하자. HTML 요소를 둘러싼 파란 사각형과 파이어버그 창의 HTML 소스를 볼 수 있다(그림 3).
   
   그림 3. HTML 점검
   
   
   
3. 선택한 HTML 요소를 클릭하면, 재미있는 일을 해 볼 수 있다. 이렇게 하면 조사할 요소가 ‘고정’된다.
4. 파이어버그 창에서 Edit를 클릭하면 선택한 요소를 편집할 수 있다.

   그림 4는 파이어버그 편집 창과 브라우저 창에서 편집된 텍스트를 보여준다. Ajax에 대한 제목이 "Editing with Firebug"로 바뀌었다.

   
   
   그림 4. HTML 편집
   
   
   

요소를 조사하는 동안, 파이어버그 창에서 내포된 요소들을 볼 수 있다(그림 5).

CSS 편집

웹 페이지를 조사하는 동안 CSS도 편집할 수 있다. 조사 화면이 연관된 CSS 항목들과 상속받은 스타일들을 보여준다(그림 6).

CSS 도구는 CSS 속성 즉시 편집, 속성 무효화, 자동 완성, 이미지 미리보기 등을 할 수 있다(그림 7).

CSS 시각화

CSS 시각화는 HTML을 조사하는 동안 표시된다(그림 3의 파란색 테두리를 기억하라). 파이어버그의 Layout 탭은 채움(padding), 위치(offset), 다른 연관된 크기를 포함한 더 자세한 정보를 표시한다. 그림 8의 Layout 창은 네비게이션 요소의 크기를 보여준다.

그림 9는 파이어버그의 깜찍한 CSS 박스 즉시 편집 기능을 보여준다.

위로

자바스크립트 도구

요즘 웹 개발에는 자바스크립트 도구가 가장 쓸모 있다. 파이어버그는 디버깅, 프로파일링, 로깅, 명령행 콘솔을 제공한다.

디버깅과 프로파일링

파이어버그 자바스크립트 도구는 중단점(breakpoints), 검사 표현식(watch expression), 전형적인 디버거에서 제공하는 다른 도구들을 포함한다. 그림 10은 중단점과 단계별 실행 시의 실제 모습을 보여준다. hostname 변수의 값이 툴팁으로 표시된다는 것을 주목하자.

디버깅 도구는 다음과 같은 유용한 기능들을 포함한다.

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

자바스크립트 프로파일링은 매우 유용하다. 파이어버그의 다른 기능들과 마찬가지로 프로파일링은 사용하기 쉽다. 콘솔 탭에서 Profile을 클릭하면 프로파일러가 시작된다(그림 11).

프로파일링이 시작되면, 사이트 여기 저기를 둘러본 다음, 다시 Profile을 클릭하면 짧은 프로파일링 세션에 대한 보고서를 볼 수 있다(그림 12).

보고서는 함수별로 소비한 시간, 평균 시간 등을 표시한다.

자바스크립트 로깅

파이어버그는 디버깅보다 고전적인 로깅을 선호하는 사람들을 위해 로깅도 제공한다. 로깅은 파이어버그 자바스크립트 API를 사용하는데, 로그를 남기는 가장 간단한 방법은 console.log("logging");이다.

콘솔 API는 다른 함수들도 포함한다(Listing 1).

                
console.time("test timer");
console.log("Hello from ",document.title);
console.info("This is info");
console.warn("This is warning");
console.error("This is error");
console.timeEnd("test timer");
      

console.time과 console.timeEnd를 사용하여 실행 시간을 측정할 수 있다. console.profile()과 console.profileEnd()를 사용하면 Listing 1과 같은 상세 보고서를 출력할 수 있고, 실행 시간도 측정할 수 있다(그림 13). 자바스크립트 콘솔 로깅 테스트 함수를 웹 서버가 제공하는 페이지에 추가해 두었다.

그림 13은 결과를 보여준다. 자바스크립트 콘솔 로깅 테스트 함수가 웹 서버가 제공하는 페이지에 더해졌다.

콘솔 API는 스택 추적, 객체 감시, 문자열 형식화 등 다른 유용한 기능도 제공한다.

자바스크립트 명령행

파이어버그에서 가장 강력한 기능 중 하나가 자바스크립트 명령행이다. 다른 명령행처럼 사용할 수 있는데; 원하는 자바스크립트를 마치 페이지의 일부인 것처럼 실행할 수 있다. 명령행을 사용하면 DOM을 조사하거나, 속성을 얻는 등의 작업을 수행할 수 있다. 리턴 값이 있다면 콘솔에 출력된다.

명령행에서 탭(Tab) 키를 눌러 자동완성 기능을 사용할 수 있고, 한 줄짜리 편집기 대신 풀텍스트 편집기를 사용해 함수 전체를 작성할 수도 있다. 간단한 콘솔 세션이 그림 14에 나와 있다. 웹 페이지 좌상단의 로고를 주목하자. 여기서도 즉시 편집이 가능하다.

콘솔과 마찬가지로, 명령행도 API를 갖고 있는데, 파이어버그가 제공하는 특별한 함수들을 포함하고 있다. 예를 들어 $(id)는 주어진 id를 가진 요소를 리턴한다.

위로

네트워크 모니터링

파이어버그 네트워크 모니터를 사용하면 웹 페이지를 로딩하는 데 얼마나 많은 시간을 소비했는지 모니터링할 수 있다. Net 탭에서 파일이 로딩되기 시작한 시각과 끝난 시각을 다른 파일에 대해 상대적으로 표시하는 막대를 볼 수 있다. 네트워크 모니터는 파일별 트래픽을 구분해주므로 이미지, 자바스크립트, HTML 등을 로딩하는 데 소비한 시간을 확인할 수 있다. 또한 브라우저 캐시에서 로딩된 자원도 확인할 수 있다.

파이어버그는 Ajax 개발에 편리하도록 모든 XHMLHttpReuqest를 Net 탭과 Console 탭에 전부 보여준다.

그림 15는 네트워크 모니터를 사용하여 HTTP 요청과 응답 헤더를 조사하는 화면을 보여준다. HTTP 헤더를 보려면 각 요청의 왼쪽에 있는 화살표를 클릭해 확장하면 된다. 총 요청 횟수, 걸린 시간, 내용 크기가 파이어버그 창 맨 아래 표시된다.

위로

기타 기능

developerWorks Ajax 리소스 센터 Ajax 리소스 센터에서 Ajax 프로그래밍 모델과 기사, 튜토리얼, 토론 게시판, 블로그, 위키, 행사, 새소식 등을 포함한 정보를 한 자리에서 볼 수 있다. 무슨 일이 생기면 여기에서 다룬다.

이 외에도 파이어버그는 다음 기능들을 포함하고 있다.

에러 보고

에러가 발생하면 파이어버그는 다음과 같은 유용한 정보를 표시한다.

• 상태 표시줄 알리미
• 줄 번호, 파일, 스택 추적
• 디버거 통합
• 검색과 필터

또한 파이어버그는 현재 보고 있는 페이지와 연관된 에러만 표시한다.

DOM

문서 객체 모델(DOM: Document Object Model)은 웹 페이지 내의 객체와 함수의 계층이다. 파이어버그 DOM은 모든 표준 및 커스텀 객체들을 포함하며, DOM 탐색기는 이 두 가지를 구분해 표시한다. 또한 자바스크립트 코드 네비게이션, 자동 완성, 즉시 편집도 제공한다.

커스터마이징

블랙리스트와 화이트리스트를 사용하여 파이어버그를 커스터마이징할 수 있고, 개인 취향에 맞춰 글꼴 크기도 바꿀 수 있다.

위로

요약

파이어버그는 웹 개발자의 필수품이다. 테스팅과 디버깅이 더욱 쉬워질 것이다. 또한 파이어버그는 CSS 스타일과 웹 페이지의 룩앤필을 조정하는 데도 최고의 도구다.

참고자료

• 인터넷 익스플로러, 오페라, 사파리를 위해 파이어버그 라이트(Firebug Lite)를 참고하자.
  
  
• 기술 서점에서 이 주제 또는 다른 기술 주제에 대한 책들을 찾아보자.
  
  

• 모질라의 웹 브라우저인 파이어폭스(Firefox)를 다운로드하자.
  
  
• 행복한 웹 개발을 원한다면 파이어폭스용 파이어버그를 다운로드하자.

• developerWorks 블로그를 구독하고 developerWorks 커뮤니티에 참여해 보자.
  
  

필자소개

		Sami Salkosuo는 1999년부터 IBM에서 일하고 있다. 그는 썬 인증 자바 프로그래머이며, IBM 인증 WebShpere Message Broker 솔루션 개발자이며, IBM 인증 WebShpere MQ 솔루션 개발자다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us

위로