Firefox에서 실시간 Debugging이 가능한 Firebug 1.9.1

 Firefox의 Add-on인 firebug를 소개합니다. 실시간으로 CSS 및 html 코드를 수정 할 수 있는 도구입니다. 역시 Chrome에도 있지만 Lite 버전으로 존재하고 있습니다.

Firebug 1.9.1 설치

Firefox의 Add-on에 접근하여 firebug를 검색합니다.

 키워드로 검색된 Firebug 관련 프로그램들이 보입니다. 이 중 Firebug 1.9.1 을 설치합니다. Firefox는 설치 후 restart 해주어야 합니다.

Firebug 사용 법

 Firebug를 사용할 페이지로 접근하고 오른쪽 상단의 딱정벌레(?) 아이콘을 클릭하시면 사용할 수 있습니다.

하단과 같은 화면을 볼 수 있습니다. Firebug 아이콘을 클릭하시면 옵션을 확인 할 수 있으며, 두번째 아이콘은 마우스를 클릭하면 화면상에 Debug 해야할 위치를 쉽게 선택 할 수 있습니다.

마우스 선택 사용방법

 마우스를 클릭하고 아래와 같이 주황색 테두리가 잡히는 부분이 소스코드 상 분리되는 부분입니다. <></> 부분이 잡히게 되니 원하는 부분을 선택하셔서 소스코드 및 css(Style) 부분을 실시간으로 수정해보시면 됩니다.

위의 방법과 거꾸로 소스코드 위에 마우스를 올리게 되면 아래와 같이 소스코드가 주황색 화면이 파란색으로 잡히게 됩니다.

실시간 css 적용 방법

 말그대로 실시간으로 css를 적용해 볼 수 있습니다. 새로운 css도 추가하여 작성가능하니 실시간 Debug를 제대로 활용 할 수 있습니다. 기존에 추가한 CSS를 삭제할 수 도 있습니다.

 수정해야 할 부분의 소스코드가 선택되면 해당 부분에 적용된 css가 Firebug 오른쪽에 보여지게 됩니다. 현제 제가 선택한 부분은 아래 화면에서 Syntax Highlighter 문자열 변환 의 글씨 부분입니다. 적용된 css는 가운데 정렬과, font-size 20 입니다. font-size 20을 수정하여 40이상으로 적용해보겠습니다.

 아래와 같이 40px 이상으로 적용된 모습을 확인 할 수 있습니다. 이 모든게 실시간으로 확인이 가능합니다. 단! 새로고침을 하게 되면 초기화 되니 최적을 찾으셨다면 복사를 해두셔야 합니다!

Net 패널 사용

 net 패널은 현제 페이지에 필요한 구성요소들을 세분하여 볼 수 있습니다. 구성요소의 상태, 용량, 불러오는 곳의 IP, 불러오는 시간등을 확인 할 수 있습니다. Enable는 Firebug 최초에 사용할 경우에만 하시면 됩니다.

아래와 같이 상태, 도메인, 용량, 원격 IP, 불러오는데 걸리는 시간을 확인할 수 있습니다. 115ms 가 걸렸다고 표시 되어집니다.

 한페이지 안에 불러오는 구성요소가 많다면 HTML, CSS, JS, XHR, Image, Flash, Media를 각각 선택하여 확인 가능합니다. 그리고 각 구성요소를 선택하시면 자세한 정보도 확인 할 수 있습니다.

Script 패널 사용

 사용되는 Script가 있을 경우 Debug 해볼 수 있는 패널입니다. Brake Point 를 선택하여 Debug 해 볼 수도 있으니 사용하시면 됩니다.

DOM 패널

 DOM 패널은 홈페이지에 적용 된 화면 전체의 내용을 보여주고 있습니다. 스크롤바가 보여지는지 안보여지는등의 정보도 확인 가능하며, 전체 화면을 사용하는지 등의 정보도 모두 표시됩니다.

Console 패널

 Console 패널을 기본을 사용하신다면 아래와 같이 Error가 파일에 대한 정보를 확인 할 수 있습니다.

Chrome 용 Firebug Lite

 Firefox에만 있지는 않습니다. Chrome에도 Firebug가 존재합니다. 차이점이라면 Lite버전이라는 점 입니다. 그래서 지원되는 부분이 약간 부족합니다. Chrome 웹 스토어에서 다운 받으실 수 있습니다.

  http://bit.thdev.net/IwTcRS

Firebug 사용방법은 동일합니다. 마우스 선택 버튼이 존재하지 않고, Net메뉴가 없습니다. 역시 실시간 CSS 수정이 가능합니다.

마무리

 저는 Firebug를 사용해서 css 코드 부분 수정을 많이 합니다. 아직 많이 다루지 않아서 잘 사용하지는 못하지만 css 편집할 때 주로 사용하고 있습니다.