웹 사이트를 개발하는 과정은 수많은 디버깅의 연속입니다. 특히 HTML, CSS, JavaScript를 개발하는 과정은 다양한 브라우저에서 테스트를 병행해야 하기 때문에 많은 시간과 노력이 필요합니다.

DebugBar 그나마 파이어폭스(Firefox)의 FireBug라는 확장기능을 이용하면 보다 수월하게 웹 개발을 진행할 수 있습니다. 이 멋진 디버깅 도구는 DOM 구조를 분석해서 HTML의 트리 구조를 실시간으로 확인하여 구문 오류를 쉽게 확인할 수 있습니다.

또한 브라우저의 기본 CSS와 제작자의 CSS 속성 관계에서 상속(inherit)과 겹침(cascading) 결과를 정리해주기 때문에 코드를 제작/수정하기 쉽습니다. 마찬가지로 Script 구문 오류도 쉽게 확인할 수 있기에, 많은 사용자들에게 웹 개발을 위한 필수 도구로 사랑받고 있습니다.

그에 비해 국내에서 가장 높은 시장 점유율을 기록중인 인터넷익스플러(Internet Explorer)는 이와 같은 도구를 사용할 수 없었습니다. 물론 Internet Explorer Developer Toolbar라는 도구가 있지만, 기능이 무척 미비해서 실무에 도움이 거의 안되는 실정이었죠.

이제 DebugBar를 이용하면 보다 쉽고 빠르게 웹 개발을 진행할 수 있습니다. Jean-Fabrice Rabaute가 제작한 이 도구는 아직까지 FireBug에 못미치지만, Internet Explorer Developer Toolbar보다 훨씬 유용한 기능을 제공하고 있습니다. 앞으로는 IE의 Firebug로써 역할을 수행할 수 있을 것입니다.

개인은 무료로 다운받아서 사용할 수 있으며, 회사의 경우는 유료이네요. 자세한 내용은 DebugBar 홈페이지를 참고하세요.

기념으로 DebugBar와 Internet Explorer Developer Toolbar를 사용중인 제 IE의 모습을 스크립캡쳐합니다.

DebugBar와 Internet Explorer Developer Toolbar를 사용중인 IE{.thickbox}

아니 벌써~ 한글화를 진행해주신 Junios님께 감사드립니다. ㅎㅎ