이번에 소개할 툴은 웹개발자들이 사용하면 좋을만한 프로그램이다.
이 프로그램은 IE애드온(플러그인)으로 동작하며 다운로드는 MS사이트에서 가능하다.

보통 WEB개발을 하다보면 출력결과물을 소스보기를 통하여 찾고자 하는 부분을 텍스트검색하거나 하면서 결과를 확인한다. 이 애드온은 그런 귀찮은 작업들을 모두 브러우저(IE)상에서 가능하게 해주며 브라우저에 출력된 결과물을 원클릭함으로서 해당부분의 HTML태그,속성,적용된 스타일등을 모두 한눈에 확인가능하게 해준다.
또한 전체소스의 구조를 트리형태로 분리출력해주며 보이지않는 테이블영역,이미지영역,DIV태그영역등의 영역을 볼수도 있게 해준다. 그밖에도 여러가지 기능들이 있으니 유용하게 사용해보자.

먼저 다운로드를 받자.
다운로드URL : MS사이트로 다운로드하러가기

설치과정은 특별히 신경쓸것 없이 NEXT로 끝난다.

설치가 완료되면 사용되고 있는 브라우저를 모두 닫고 다시 켜거나 혹은 새로운 브라우저를 실행시키는 것으로도 적용이 가능하다.
IE7에서도 잘 돌아간다.

새로운 브라우저를 실행시키고 메뉴의 표시->툴바에 보면 IE Developer Toolbar가 추가되어 있을 것이다.
필자의 OS는 일본어라 출력이 틀린 것을 양해하기 바란다.

IE Developer Toolbar에 체크를 하게 되면 아래 이미지와 같은 애드온이 화면밑에 추가된다.
먼저 메뉴부분을 살펴보자.
1. 맨앞의 커서가 붙은 아이콘을 클릭하면 화면의 모든 링크는 작동하지 않게 되고 HTML출력화면의 모든 곳에 마우스 클릭시 해당 태그의 소스를 보여준다. 한번 더 클릭하거나 화면상에서 마우스 오른클릭을 하는 것으로 링크동작이 활성화된다.
2. 많이 보던 아이콘이다. 화면을 새로 고친다.
3. 세번째 아이콘은 브라우저 캐쉬를 정리한다.
4. 네번째 아이콘은 선택된 태그의 소스와 스타일시트를 팝업창으로 출력해준다.
5. Disable메뉴는 소스에 적용된 스크립트나 스타일시트등의 적용을 무효화한다.
6. View메뉴는 화면상에 각 태그들이 가지고 있는 id, 링크등등의 정보를 직접 보여주거나 팝업창을 통해 보여준다.
7. Outline메뉴는 화면상에 border가 0으로 되어 정확한 영역을 찾을 수 없는 table, image, div등을 위해 영역을 표시해준다.
8. Tools에는 "자"도 들어있다. ^^

메뉴하단으로 세가지 탭이 보인다. 첫번째 탭은 전체소스를 트리형태로 정리해서 보여준다.

출력된 화면의 영역(실제이미지부분 등)을 클릭해서 속성을 볼수도 있지만 소스트리를 클릭해서 해당태그의 속성을 볼수도 있다.

두번째 탭은 속성탭이다.
해당태그의 속성을 보여준다. 뿐만 아니라 +아이콘을 통해 속성을 추가해서 적용해보거나 삭제해서 적용해볼수도 있다. 예를 들어 화면상의 이미지를 클릭하고 속성탭에서 src속성을 삭제해버리면 화면에서 이미지는 바로 사라진다.

세번째 탭은 적용된 스타일의 리스트를 출력해준다.
모든 기능을 설명하진 못했지만 이정도면 웹개발에 충분히 기여할수 있는 프로그램이라는 것이 확인되었다.

이제 즐겁게 개발을 시작해보자. ^^;

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

1. 관련태그 :
2. addon, Developer Toolbar, IE, plugin, 소스보기, 애드온, 웹개발, 유틸, 플러그인

댓글보기 (0) 트랙백보기 (0)