http://webchobo.com/category/%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4%20%ED%99%95%EC%9E%A5%EA%B8%B0%EB%8A%A5

http://dr-choi.kr/archives/3939
http://www.clearboth.org/firebug_guideline/

Firebug Guidelines

Posted on 2010/06/29

소개

Firebug 는 어느새 웹 개발자에게 가장 필수적인 툴로서 자리를 잡아가고 있다. Firefox의 수 많은 부가기능 중 하나로 시작되었지만 지금은 Firebug를 쓰기 위해 Firefox를 설치하는 모습까지도 쉽게 찾아 볼 수 있을 만큼 Firebug의 유명세는 가히 대단하다. 이 가이드는 그런 Firebug의 설치부터 메뉴 설명, Firebug의 또 다른 확장 기능들에 대한 설명까지 포괄적으로 다루는 가이드로 웹 개발자들에게 도움을 주고자 작성되었다.

Firebug는 Joe Hewitt, Justin Dolske, Rob Campbell에 의해서 개발된 Firefox의 부가 기능으로서 웹 페이지의 HTML, CSS, JavaScript를 디버깅하고, 모니터링 할 수 있는 툴이다.

설치

Firebug 설치는 아래 사이트에서 내려 받아 실행 할 수 있다.

Firefox 부가 기능 웹 사이트

내려받기

Firefox 부가기능은 최신 버전을 자동으로 업데이트 해 주기 때문에 최초 한 번만 설치해 주면 된다.

[지금 설치]를 선택한후 Firefox를 재실행 하면 설치가 완료됩니다.

Firebug 웹 사이트

http://getfirebug.com

개발중인 Firebug 최신 버전(Alpha)은 아래 링크를 통해서 내려 받을 수 있다.

IE, Opera, Safari를 위한 Firebug Lite을 설치할 수 있다.
Get Firebug Lite 를 선택하면 Firebug Lite 페이지로 이동한다.

IE, Opera, Safari 에서 사용할 수 있는 Firebug Lite를 내려 받을 수 있다.

시작

실행

설치가 완료되면 Firefox 하단에 Firebug의 벌레 모양의 아이콘 메뉴를 찾을 수 있습니다. 아이콘을 클릭 하면 Firebug가 웹 페이지 화면을 분할하며 나타납니다. 단축키 F12를 눌러도 마찬가지로 실행되며, Ctrl키와 함께 F12키를 누른 경우 Firebug가 새 창으로 실행됩니다.

한 화면에서 Firefox와 Firebug 세로 분할해서 사용하기

Firebug를 Ctrl + F12로 새 창으로 띄운 경우 윈도우의 화면 배열 기능을 사용하여 조금 더 편하게 사용할 수 있습니다.

Firebug를 끌 경우에는 아이콘을 다시 클릭하거나, F12를 다시 한 번 누르면 됩니다. (새 창인 경우 창닫기 버튼을 클릭합니다.)

항상 새 창으로 Firebug를 실행하고 싶은 경우 Firebug 창 상단 좌측의 아이콘(Firefox 하단 아이콘과 같은 아이콘이지만 조금 더 크다)을 클릭한 후 설정 > 항상 새 창에서 열기를 선택해 준다.

메뉴

Firebug를 최초 설치한 상황이라면 위와 같은 모습을 볼 수 있다.
위 에서부터 Firebug의 정보와 문서, 글자 크기 설정을 다룰 수 있는 아이콘 메뉴가 있고, 우측으로 웹 페이지의 객체를 선택할 수 있는 검사 메뉴, 소스를 직접 수정할 수 있는 편집 메뉴가 위치해 있다. 소스 내 검색을 위한 검색창 우측에 위치해 있으며, 하단에는 Firebug의 콘솔 탭과 HTML, CSS, JavaScript 소스를 볼 수 있는 탭, DOM 정보 탭, 네트워크 감시 탭이 있다. Firebug의 확장 기능을 추가로 설치한 경우 이 위치에 우측으로 차례대로 등록된다.

검사(Inspector) 메뉴 : 웹 페이지 내 원하는 객체를 선택하여, 해당 객체의 HTML, CSS 등을 보여준다.
편집(Edit) 메뉴 : 현재 페이지의 HTML과 CSS를 바로 수정할 수 있다. 실시간으로 브라우저에 반영된다.
콘솔(Console) 탭 : 자바스크립트 에러와 로그 기록을 출력해 주며, 자바스크립트 커맨드 라인을 제공한다.
HTML 탭 : HTML 문서를 DOM 구조로 보여주며, 각 마디를 열어서 자식 마디를 펼칠 수 있다.
CSS 탭 : CSS 소스를 보여주며, 수정할 수 있다. 상단 편집 메뉴 옆에 해당 웹 페이지가 포함한 모든 CSS 문서를 펼침메뉴 방식으로 선택해서 불러낼 수 있도록 한다.

스크립트(Script) 탭 : 자바스크립트 소스를 보여주며, CSS 탭과 마찬가지로 페이지가 포함한 모든 자바스크립트 파일을 불러올 수 있다. 중단점(Breakpoint) 기능을 이용하여 오류를 찾아낼 수 있다.
DOM 탭 : 현재 페이지 내의 모든 객체와 속성 값을 보여준다. 자바스크립트의 모든 변수와 값을 출력한다.
Net 탭 : 로컬에 저장된 모든 파일들을 보여준다. 한번 캐시된 파일은 다시 나타나지 않는다.

웹 페이지 수정하기

HTML 탭에서 수정하기

Firebug는 현재 페이지를 실시간으로 편집할 수 있는 기능을 제공한다. (이를 on-the-ply라고 한다)

검사 메뉴를 활성화 시킨후 페이지 내에 원하는 노드(요소)를 선택하면, Firebug에 선택된 노드의 HTML이 선택되며, 자식 노드의 경우 자동으로 펼쳐진다. HTML 탭에서 각 노드는 클릭 또는 더블클릭으로 값을 수정할 수 있으며, 이는 페이지에 그대로 반영될 수 있다.

클래스명이 ‘post_text’인 DIV 노드 아래 P 노드 안에 포함된 A 노드의 문자열을 ‘나는 파이어버그가 좋습니다.’로 고치자 페이지에 바로 반영이 되었다.

노드가 선택된 상태에서 편집 메뉴를 활성화 시킨 후 위와 같이 수정할 수도 있다. P 노드에 ‘style=“border: 1px solid red”’ 을 입력하면, 페이지에 1px의 빨간색 보더가 생기는 것을 볼 수 있다.

HTML 탭에는 우측에 스타일시트 정보와 레이아웃 정보, DOM 정보가 추가로 제공된다.

A 노드의 스타일 값이 출력된다. 이미지나 배색 정보는 위와 같이 팝업 정보로 출력해 준다.

위와 같이 스타일의 값을 수정할 수 있다.

새로운 스타일을 추가할 수도 있다.

Firebug는 특정 스타일을 끄거나 켤 수 있는 기능도 제공하고 있다.

‘border: 1px solid silber’ 스타일을 끄자, 페이지내 이미지의 회색 보더가 사라졌다.

레이아웃 탭을 선택하면 선택된 노드의 박스 모델을 볼 수 있다. 또한, 보더, 마진, 패딩 값을 직접 수정할 수도 있습니다. CSS 작업 중 상당 부분이 박스 모델에 대한 마진, 패딩 값 수정인데 이 기능을 이용하면 쉽고 빠르게 적절한 값을 찾아낼 수 있다.

CSS 탭에서 수정하기

HTML 탭에서도 선택된 노드 객체에 대한 스타일시트를 우측 창을 통해서 편집할 수 있었다. CSS 탭은 해당 HTML 문서가 포함하는 CSS 전체를 편집할 수 있도록 해준다.

편집 방법은 HTML 탭을 통해서 작업했던 것과 같다. 각 속성의 값을 클릭하게 되면 위와 같이 편집 모드로 전환되고, 새로운 값을 입력하면 바로 적용된 화면을 볼 수 있게 된다. 엔터를 치면 다음 속성으로 넘어가고, 마지막 속성 이후에 엔터를 치게 되면 새로운 속성을 추가할 수 있다.

FireScope 를 설치하게 되면 속성에 대한 레퍼런스와 코드 샘플을 확인해 볼 수 있다.

Explorer 7, Firefox 3, Safari 3, Opera 9에 대한 브라우저 호환성 정보를 제공하고 있어 별도의 웹 사이트 또는 페이퍼를 확인해 보는 수고를 덜어줄 수 있다.

하지만 Explorer 6 이하를 확인해 보기 위해서는 Sitepoint의 레퍼런스 페이지로 이동해야만 확인할 수 있는 번거로움이 있다.

자바스크립트 디버깅

Firebug 를 이용하면 인터넷 위에 웹 페이지를 자유자재로 편집할 수 있다. HTML의 내용과 CSS의 속성을 얼마든지 수정해서 하드코딩을 통한 시행 착오를 줄여주고, 최적의 방법을 찾게 해 준다. 또한 Firebug는 매우 멋진 자바스크립트 디버깅 툴이기도 하다.

아주 간단한 자바스크립트 예제를 보자. 다음 예제는 빈 화면 어느 곳이든 마우스 클릭을 했을 경우에 숨겨진 메세지가 출력된다.

마크업은 다음과 같고:


<body>
  <p>화면을 클릭해 주세요!</p>
  <div id=”exam” class=”off”>웹 뒤에 숨은 web 입니다!</div>
</body>

스타일시트는 다음과 같고:


#exam { border: 1px solid blue; padding: 5px; background-color: #e1e1e1; }
.on { display: block; }
.off { display: none; }

자바스크립트는 다음과 같다:


window.onload = function()
  {
    document.onclick = function(){
    var el = document.getElementById(‘exam’);
    el.setAttribtue(“class”,”on”);
  }
}

IE를 제외한 브라우저에서 실행(웹 페이지 화면을 클릭)해 보자(IE는 객체에 다른 방식으로 이벤트를 걸어야 한다. 관련 내용은 구글에서!). 되는가?

위의 소스를 그대로 작성했다면 안 되는 것이 옳다. 그리고 Firebug를 실행 중이라면 그리고 콘솔 탭에서 스크립트를 활성화(Enable) 시켰다면 Firebug 아이콘이 사라지고 빨간색 글씨로 ‘오류 1개’라는 메세지가 나타난다. 작성된 스크립트에 문제가 있다는 것이다.

문제가 일어난 라인 번호가 나타나고, 해당 이벤트를 선택하면 다음과 같이 소스가 나타난다. 15째 줄 어딘가에 실수가 있었을 것이다.

Firebug 가 친절하게 버그의 위치를 알려 주었기 때문에 이젠 우리가 문제를 고쳐야 한다. 방법은 두가지가 있다. 하나는 문제가 발생한 라인(15째 줄)의 내용을 사람이 직접 눈으로 확인하고 오류를 찾아내서 고치는 것이다. 위 예제라면 어렵지 않게 ‘setAttribtue’ 매소드에 오타가 있음을 찾아낼 수 있다. 하지만 이보다 훨씬 복잡한 스크립트에서라면? 또한 Firebug가 언제나 항상 완벽하게 버그의 위치를 찾아주지는 못한다는 사실을 잊어서는 안된다. 때로는 Firebug가 일러준 라인이 아닌 다른 곳에서 버그의 원인을 찾게 되는 수도 있다는 말이다. 이런 경우 쉽진 않겠지만 라인별로 오류 여부를 체크해야만 한다. 그럼 소스 코드를 한줄씩 주석 처리 해 가면서 확인해 볼 것인가?

Firebug에는 그런 불편함을 줄여주기 위해서 중단점(Breakpoint)를 제공한다.

문제가 발생한 15째 줄 번호를 클릭하면 위와 같이 빨간색 점이 표시된다. 이를 중단점(Breakpoint)라고 부르며, 브라우저는 이 줄의 소스 코드를 실행하지 않는다. 때문에 이 예제에서는 중단점을 찍은 후 에러가 발생하지 않게 된다. 에러가 난 코드 자체의 실행을 막았기 때문이다. 이렇게 하면 원본 소스 코드를 직접 고치지 않고도 문제의 코드 라인을 명확하게 판별해 낼 수 있게 된다. 또한 디버깅을 위해서 원본 소스를 자주 수정과 복귀를 반복하는 경우 오류가 없는 코드까지 수정하는 실수가 생기는데 이런 문제를 최소화 시켜주는데 도움을 준다.

복잡한 소스 코드에서 에러가 발생한 경우. 그리고 Firebug가 명확하게 오류 위치를 찾아내지 못한 경우 예상되는 다수의 라인에 중단점을 찍어 놓고, F8을 누르면 한 라인씩 스크립트를 실행 시켜 주기 때문에 조금 더 빠르고 편하게 오류를 찾아낼 수 있다.

F8을 누르면 수동으로 라인 한 개씩 스크립트를 실행시킬 수 있다. 호출된 함수가 있다면 해당 함수로 들어가거나 빠저 나올 수 있는 기능도 함께 제공된다.

DOM 정보

DOM 탭은 웹 페이지의 모든 DOM 정보를 보여준다. 다음은 DTD 정보를 확인해 본 화면이다. 실제로 DOM 탭에서 보여지는 정보는 매우 많기 때문에 일일이 다 들여다 보기는 어렵다. 필요한 경우 정보를 확인하기 위해서 종종 사용되며, HTML 탭에서 노드를 선택했을 때 해당 노드에 대한 DOM 정보만을 바로 볼 수 있는 탭도 제공되고 있어 전체 DOM 정보를 열어보는 경우는 많지 않을 것이다.

Network 정보

Net 탭은 서버와 브라우저(Client) 간의 대화를 엿볼 수 있도록 도와준다.

다음에 접속한 후 Firebug의 Net 탭을 활성화 시켰을 때 화면이다. 브라우저가 서버로부터 어떤 파일을 받고, 브라우저는 서버에 어떤 메세지들을 돌려 주었는지에 대한 정보를 살펴 볼 수 있다. 더불어 각 요청에 따른 속도도 함께 나오기 때문에 웹 사이트를 최적화 시켜야할 상황에서 트래픽을 많이 차지하는 부분을 찾아낼 수 있다.

다음 메인 페이지를 최초 로딩했을 때 로컬PC에 저장되는 이미지들이다. 개별 이미지에 대한 용량과 속도가 상세히 나타나 있다.

확장기능

Firebug에는 또한 다양한 확장기능이 추가될 수 있다. 현재까지 알려진 것만 해도 10여개에 달하는데 주로 사용되는 것들은 다음과 같다.

Slow
Firecookie
FirePHP – PHP개발자들을 위한 확장기능으로 추천된다.
RainbowForFirebug – 자바스크립트 하이라이팅 기능으로 반드시 필요해 보이지는 않는다.
Jiffy – 자바스크립트의 속도를 체크해 준다. Ajax 개발자에게 추천된다.
PixelPerfect – 웹디자이너가 작업한 원본 이미지를 개발된 화면과 겹쳐 보일 수 있게 해 준다. 단 1px의 오차도 용납하지 못하는 개발자와 디자이너에게 추천된다.

사실 이 모든 확장 기능을 모두 설치해서 사용할 필요는 없다. Firebug가 가지고 있는 기본 기능만으로도 이미 충분하기 때문이다. 하지만 이 중에서도 앞서 팁으로 소개되었던 FireScope나 Net 탭의 기능을 보다 확장하여 사이트 성능 측정 도구로 활용 가능한 YSlow, 쿠키 정보를 체크할 수 있는 Firecookie 정도는 추천할 만하다.

Firecookie

Firecookie는 웹 사이트에서 사용중인 쿠키를 모두 보여준다.

YSlow

YSlow 는 HTTP 요청수, CDN의 사용, CSS/JS 압축 등 총 13가지 지표(High Performance Web Sites 참조)를 가지고 웹 페이지를 평가하여 그 결과를 보여주고, 초기 로딩과 일반 로딩에서의 용량과 속도 차이를 그래프로 보여준다. 단, 현재 보여지고 있는 웹 페이지 1개만을 대상으로 하기 때문에 전체 사이트에 대한 평가가 아님을 알아야 하며, 이 같은 평가툴을 맹신하지는 말아야 할 것이다. YSlow는 Yahoo!에서 제작하여 배포한 것으로 평가 항목이나 기준이 모든 경우에 형평성을 갖춘다고 보기는 어렵기 때문이다. 어느 정도 참고로써 활용하면 좋다.

Firebug는 완벽한가?

간단히(?) Firebug에 대한 기능과 주로 사용되는 확장 기능들을 살펴 봤다. 많은 개발자들이 단지 Firebug라는 디버깅 툴을 사용하기 위해서 Firefox를 설치하는 것만을 보더라도 Firebug가 얼마나 멋진 툴인지 알 수 있다. 최근 IE8에도 강력한 디버깅 툴을 기본으로 탑재하였는데 Firebug를 상당히 의식한 결과라고 볼 수 있다. 하지만 이런 Firebug에도 단점은 있다.

Gmail, SpringNote 등 Ajax 기술로 만들어진 사이트에서 사이트 성능을 떨어뜨릴 수 있다. Firebug를 잠시 꺼둘 필요가 있다.
웹 페이지 로딩을 완료할 수 없는 경우가 생긴다. 역시 Firebug를 항상 활성화시켜 둔 경우이다. 해당 웹 페이지의 스크립트 오류가 존재할 경우 Firebug는 당연히(!) 오류 메시지를 표시해 주면서 로딩을 막는 경우가 발생한다. 디버깅이 목적인 아닌 경우 편안한 웹 서핑을 방해하게 된다.
Firefox를 제외한 브라우저에서는 사용할 수가 없다. Internet Explorer, Safari, Opera 브라우저를 위한 Firebug Lite 버전이 존재하나 Firefox용 Firebug에 비해 기능이 많이 떨어지며, 성능도 낮다.