Using IE Developer Toolbar

[웹지니™]

안녕하세요? 웹지니입니다.

얼마전 IE 7 Beta2 Preview가 발표되었었는데요. 그에 맞추어 IE Developer Toolbar가 릴리즈되었습니다.

IE Developer Toolbar(이하 DevToolBar)는 다음 URL에서 다운로드 하실 수 있습니다.

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

DevToolBar를 설치하면 아래 그림과 같이 IE의 도구 모음에 DevToolBar라는 캡션을 가진 도구 밴드가 나타나게 됩니다.

그림1: IE DevToolBar 밴드가 추가된 모습

이 DevToolBar는 웹 사이트를 개발하는데 필요한 다양한 기능들을 제공합니다. 몇 가지 기능을 살펴볼까요?

View DOM

개인적으로 파이어폭스를 사용하면서 가장 부러워했던 기능 중 하나입니다. DevToolBar의 기능이 파폭보다는 조금 더 편리한 것 같네요. 이 기능은 현재 IE가 표시하고 있는 HTML 문서의 DOM (Document Object Model)을 보여주는 창을 표시합니다. View DOM이라는 버튼을 클릭하면 아래 그림과 같이 IE 하단에 DOM 윈도우가 나타납니다.

그림2: View DOM 윈도우의 모습

그림에서 보는 것과 같이 좌측에 현재 문서의 계층 구조가 나타나며 가운데 패널에서는 좌측에서 클릭한 요소의 특성 값을 보여줍니다. 또한 오른쪽에는 현재 선택한 요소에 적용된 스타일 정보를 보여주기도 하지요. 뿐만아니라 요소를 클릭하면 해당 요소의 위치로 문서가 스크롤되며 선택된 요소에 파란색 테두리를 둘러주어 쉽게 확인이 가능합니다.

Validate

이 메뉴를 클릭하면 현재 페이지에서 사용된 HTML 태그나 CSS 스타일 속성 등의 유효성 검사를 할 수 있도록 구현된 W3C의 웹 페이지를 보여줍니다. W3C 웹 페이지를 통해 개발자가 구현한 웹 페이지의 유효성을 검사하고 보다 표준에 가까운 웹 페이지를 구현하는데 참고할 수 있도록 도와줍니다.

Misc

Misc 메뉴에서는 현재 브라우저의 캐쉬나 쿠키를 보여주거나 삭제하는 기능을 제공합니다. 이 기능을 적절히 이용하면 쿠키가 올바르게 생성되었는지 확인하거나 개발 도중 쿠키를 제거해야 할 필요가 있을 때 매우 유용합니다.

저도 지금 회원 인증 기능을 구현하고 있는데 이 기능이 꽤 쓸만하더군요 ㅎㅎㅎ

Outline

이 메뉴는 문서내의 특정 요소에 테두리를 표시하여 쉽게 눈으로 확인할 수 있도록 도와주는 기능을 제공합니다. 문서내에 배치된 테이블이나 테이블 셀, 이미지, DIV 태그 등을 표시할 수 있으며 아래 그림과 같이 나타납니다.

그림3: bullog.net 페이지에 테이블 셀 아웃라인을 표시한 모습

그림에서 보는 것과 같이 테이블 셀에 주황색 테두리가 나타납니다. 제가 너무 많은 테이블을 사용한 것 같네요...ㅠㅠ

이상으로 IE DevToolBar에 대해 간략하게 살펴보았습니다. 여러모로 유용한 기능이 많이 내장되어 있으니 한 번 사용해 보시면 많은 도움을 얻으실 수 있을 것 같습니다.

좋은 하루 되세요~

written by webgenie

www.bullog.net