지금 다뤄볼 주제는 Firebug라는 파이어폭스 플러그인입니다. Firebug란, 쉽게 말해서 HTML 문서를 하나하나 뜯어볼 수 있는 좋은 도구라고 할 수가 있습니다. 무엇보다도 쉬운 설치/이용이 제일로 강점이죠 :)

물론, 이것을 이용하기 전에 Firefox Web Browser을 먼저 설치해야 한다는 것을 잊지 마세요!

Firebug 플러그인 설치하기

>> 도구 - 부가기능에서 쉽게 설치/삭제가 가능합니다. 검색창에 Firebug를 치면 곧바로 나오게 되어 있습니다.

Firebug 플러그인 열기

>> 도구 - Firebug - Firebug 열기를 이용하면 너무나 쉽게도 Firebug를 이용하실 수가 있습니다.

Firebug 플러그인 사용하기

비록 Firebug 플러그인을 받았다고 해도 사용할 줄 모른다면 전혀 소용없는 셈이 되겠죠. Firebug의 특성에 대해서 하나하나 알아봅시다. 클릭하시면 더 크게 보실 수 있습니다.


모든 기능을 설명한 것은 아니고, 일부 필요하다고 생각되는 것들만 써 봤어요.

이제 직접 실무로 들어가 봅시다.

CSS 스타일 인라인으로 수정하기

여기서는 얄루카님의 이미지 위에 마우스를 올렸을 때 뜨는 돋보기 모양을 가져가 보겠습니다.
먼저 검사(추적) 버튼을 누른 후, 이미지를 선택합니다.



이럴수가! 너무나 쉽게 찾았습니다. 옆의 스타일 탭을 보니 cursor이라고, 곧바로 나오는군요.
이 속성을 복사하여 세르엘님의 블로그에 적용해 보겠습니다. 세르엘님 블로그의 아무 그림이나 검사를 이용하여, 위와 마찬가지로 이미지의 위치를 찾은 후에..

이미지가 상위 <div>태그의 imageblock 클래스에 둘러싸여 있는 것이 보입니다. 여기에 한번 새 프로퍼티로 cursor를 추가해 봅시다.


추가하니 이렇게 되네요 ^^..
이제 다시 세르엘님의 블로그 이미지에 마우스를 올리니 -


우와~ 곧바로 적용되는군요 ^^. 이게 바로 Firebug의 강점입니다. 직접 소스를 수정하고 적용하지 않아도 곧바로 수정사항을 확인해 볼 수가 있다는 것이지요.

Net을 이용한 웹 페이지 로딩속도 측정하기

Firebug는 단순히 웹 페이지의 로딩 속도만을 측정해 주지 않습니다. 각각의 객체에 대해서 로딩 속도를 표시해주기까지 하고, 심지어는 Ajax 호출시 Ajax 호출에 대해서도 로딩 속도와 전송량을 표시해 줍니다.
그야말로 정말 환상적인 툴킷이죠!

다른 잡다한 것들

콘솔/스크립트/Net도 마찬가지입니다. 이렇게 활성화시킬수가 있는데.. 보통 자바스크립트의 Ajax나 DOM을 수정할때 쓰이는 것이므로.. 자세한 것은 Firebug 홈페이지를 참고하시기 바랍니다.





Firebug의 강점 하나 더! 검사로 선택한 개체에 DOM 소스코드의 변화가 생겼을 때, 그 해당 부분을 하이라이트 해줍니다. 물론 이 소스도 인라인 수정이 가능합니다.

튜토리얼 동영상

IE에서의 Firebug?

IE에서는 IE Developer Toolbar라는 디버깅 툴을 제공합니다. 하지만 렌더링 툴 자체가 성능이 썩 좋지는 못한 만큼, IE를 기준으로 개발을 하라는 소리는 못하겠네요 ^^;. 아마 크로스 브라우징을 위한 웹디자인을 할때 유용하게 사용할 수 있을 것 같습니다 :). 이번에 IE8에 포함된 Developer Tool은 꽤나 강력하다는군요. 거의 Firebug 수준인 것 같아서 눈독들이고 있습니다.

＊IE 말고도 Opera에서는 Dragonfly가, Chrome에서도 Developer 포럼이 디버깅 툴로 제공되고 있습니다. 관심 있으신 분은 참조하세요 :)