Firebug 설치
- 모질라 애드온 사이트에서 내려받을 수 있습니다. (Firebug 웹사이트에서도 받을 수 있습니다.)
- 설치가 완료되면 Firefox 하단에 주황색 벌레 아이콘이 생깁니다. 클릭을 하면 현재 보여지고 있는 웹 페이지의 HTML과 CSS, JavaScript 소스가 보여집니다.
Firebug를 이용해서 CSS 실시간으로 수정하기
Firebug는 인터넷에 개시된 웹 페이지의 CSS를 실시간으로 수정할 수 있죠. 다음은 원문에 포함된 동영상입니다. FIrebug를 이용해서 실시간으로 CSS를 수정하는 모습을 보여주고 있습니다.
그런데 종종 이렇게 수정된 내용이 서버에도 그대로 저장된다고 생각하시는 분들이 계십니다. 그렇지 않구요 개발자가 원본 CSS를 수정해서, 저장한 뒤에 웹 브라우저를 새로고침하는 과정이 복잡하고 반복되다 보면 시간을 많이 소모시키기 때문에 정확한 CSS를 빨리 찾아낼 수 있도록 제공되는 기능이라고 생각하시면 됩니다.
Internet Explorer를 위한 Firebug
Firebug 웹사이트에서는 Internet Explorer 를 위한 버전도 제공하고 있습니다. Firefox 처럼 부가기능으로 설치되는 것이 아니라 자바스크립트를 HTML 문서에 포함시켜 비슷하게 만들어주는 기능을 합니다. 때문에 Firefox와 Opera, Safari에서도 그대로 적용할 수 있습니다. 단지 <head> 안에 다음과 같이 스크립트를 한 줄 추가해 주시면 됩니다.
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>하지만 그다지 사용을 권해 드리고 싶지는 않네요. IE 7 이상부터는 MS에서 제공하고 있는 IE Developer Toolbar가 있고, Opera 역시 Dragon Fly라는 멋진 디버깅 툴을 자체 지원합니다. IE 버전별로 IE Developer Toolbar를 사용할 수 있는 방법은 나라디자인에 올라온 '여러 버전의 IE에서 IE Developer Toolbar 사용하기'를 참고하시면 됩니다. (찬명님께서 며칠 간 사용해보신 후 다소 버그가 발견되고 있어 패치 이전까지는 권장하지 않는 다는 글을 새롭게 올리셨네요.)
IE8 에 새로 들어간 기능은 저 이상 ;)
답글삭제http://b.mytears.org/2008/09/669
@정태영 - 2009/03/02 01:42
답글삭제와 태영군 좋은 글 포스팅 했네~ 고마워~ 그런데 트랙백으로 걸어줄 수는 없나???
음...좋은 글입니다...
답글삭제본문중에 나라디자인에 올라온...중략...이란 글이 있는데...원문을 보시면 아시겠지만...원래의도인 IE Developer Toolbar는 사용가능하나 현재 여러가지의 버그가 있어 이래저래 사용하기가 좀 거시기 한 상태죠...ㅋㅋ
trackback from: 매력적인 Internet Explorer 8 Beta2 의 개발툴
답글삭제Internet Explorer 8 Beta2 에 포함된 개발툴이 소개되었는데, 이거 굉장히 멋지네요. 우선 8 Beta1 에서 소개된 개발툴의 장점들은 다음과 같습니다.
기본으로 포함되어 있으며 사용하기가 쉬움
비쥬...
저거 대게 오래전에 써놨던 글인데... 뭐 쨌든!! 트랙백 날렸는데 안보인다!!
답글삭제