필자가 사용하는 Netscape 확장이라는 글에서 알 수 있듯이 필자가 사용하는 Firefox 확장중 Web Developer라는 확장이 있다. 이 확장은 테이블이나 DIV와 같은 블럭 태그의 테두리를 표시하고 디버깅을위해 일시적으로 캐쉬를 중지하는 등 웹 사이트를 개발하는 아주 유용한 도구이다.

기능이 조금 떨어지는 IE이지만 이러한 확장이라도 많으면 괜찮은데 사실 IE 확장중 유용한 확장은 그리 많지않다.

오늘 게시판에 소스보기에 관해서...라는 글이 올라왔다. 소스를 볼 수 있는 또 다른 IE 확장을 소개한 글로 알았는데 확인을 해보니 Firefox의 Web Developer 확장처럼 IE에서 브로우저의 기능을 일시적으로 사용/사용 안 함으로 설정하고 각종 태그에 외곽선을 표시하는 Web Developer와 아주 비슷한 확장이었다.





I. 영문판 설치 .MSI 파일로 되어 있으므로 Windows 탐색기로 다운받은 파일을 두번 클릭하면 설치된다. 그러나 수동으로 설치하고 싶은 사람은 다음 절차에따라 수동으로 설치할 수 있다.

1. 압축 플러그인의 설치와 활용을 적용한다.
2. Toltal Commander로 다음 폴더를 차례로 접근한다.

   iedevtoolbar.msi
   	Streams
   		_78D76023C2BE6AF429330BCDEF18E2BE

3. DevToolbarDLL을 임의의 폴더(예: Gain)에 압축 해제한다.
4. 시작/실행/cmd를 입력하고 확인을 클릭한다.
5. 명령행에서 다음 명령을 실행한다.

   ren <압축 해제 폴더>\DevToolbarDLL DevToolbar.dll
   예:
   ren c:\gain\DevToolbarDLL DevToolbar.dll

6. 명령행에서 다음 명령을 실행한다.

   regsvr32 <압축 해제 폴더>\DevToolbar.dll
   예:
   regsvr32 C:\Gain\DevToolbar.dll

II. 한글판 설치 한글판을 사용할 사용 사용자는 한글 판을 다운받아 임의의 폴더에 압축 해제한 후 영문판 설치의 6단계만 실행하면 된다.

III. 웹 개발 도구 사용 웹 개발 도구를 사용하는 방법은 아주 간단하다. 절차는 다음과 같다.

1. 인터넷 탐색기를 기동한다.
2. 인터넷 탐색기의 도구 막대에 마우스 우측 버튼을 클릭하고 도구 모음 잠금의 체크를 지운다.
   
3. 다음 그림처럼 보기/도구 모음/Developer Toolbar를 클릭한다.
   
4. 개발도구의 경계 막대(적색의 원)를 아래로 끌어내려 도구 막대를 다시 정렬한다.
   

IV. 웹 개발 도구의 기능 이 팁을 적용하면 그림과 같은 DevToolBar가 나타난다. 이 도구 막대를 사용하면 Web Developer 만큼 다양한 기능은 아니지만 꽤 다양한 기능을 사용할 수 있다. Developer Toolbar에서 제공하는 기능은 다음과 같다.

		DOM 보기: DOM 보기 버튼을 클릭하거나 보기/탐색창/IE DOM 탐색기를 클릭하면 인터넷 탐색기 하단에 그림과 같은 DOM 탐색기가 나타난다. 이 DOM 탐색기를 이용하면 현재 페이지에대한 문서 구조를 계층적으로 확인할 수 있으며, 각 태그의 속성과 값도 확인할 수 있다.
		사용 안 함: 각종 브로우저의 설정을 사용 안 함으로 설정한다. 설정할 수 있는 항목은 다음과 같다.
		표시: 웹 페이지의 추가적인 속성 정보를 표시한다.
		외곽선: 각종 대그의 외곽선을 표시한다. DIV, TABLE과 같은 블럭 태그외에 임의의 태그의 외곽선을 표시할 수 있다.
		검사: HTML, CSS, 피드등의 문법 형식이 올바른지 검사한다. 로컬 파일도 검사할 수 있으며, 여러개를 동시에 검사할 수도 있다.
		이미지: 웹 페이지에 포함된 이미지의 각종 정보를 표시한다. 아울러 해당 페이지에대한 보고서를 작성할 수도 있다.
		크기 조정: 브로우저의 크기를 조정한다. 사용하는 방법은 다음과 같다. 크기 조정/크기 조정... 메뉴를 클릭한다. 크기 조정 창의 하단에 너비와 높이를 입력하고 추가 버튼을 클릭한다. 상단의 목록에서 원하는 크기를 선택한 후 크기조정 버튼을 클릭한다. 다음 그림은 100x100으로 크기가 조정된 인터넷 탐색기 이다.
		기타: 캐쉬 지우기, 쿠키 지우기, 웹 개발 도구 정보등 부가적인 기능을 제공한다.
		줄자: 웹 페이지에서 사용할 수 있는 융통성 있는 줄자를 제공한다. 부가적으로 자의 색상, 좌표값을 확인할 수 있다. 자의 기능을 사용하기 위해서는 시작 점을 클릭한 후 끝 점까지 마우스를 끌고 가면 화면에 그림과 같은 자가 나타난다. 지원하는 옵션은 다음과 같다. Snap to X/Y Axis 클릭하는 지점의 X 좌표와 Y 좌표를 표시한다. Snap to Element 마우스 커서 아래 태그의 외곽선을 표시한다(그림에서 적색의 사각형). Hide Tick Marks 자의 눈금을 숨긴다. Hide Endpoints 측정한 대상의 시작 점과 끝 점, 픽셀 표시를 숨긴다.

댓글: 이 팁은 skysoft2000님이 제공한 정보, 소스보기에 관해서...를 기초로 작성되었습니다.