웹 개발자의 필수품, IE Developer Toolbar
게시일: 2005/10/02 | 글쓴이: doa | 18527 번 | 프린트 | 메일


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

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

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



다운로드: 이 확장은 MS 홈페이지에서 다운로드할 수 있으면 필요한 경우 다음 링크에서 직접 다운로드할 수 있다주1.



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

Hide Endpoints
측정한 대상의 시작 점과 끝 점, 픽셀 표시를 숨긴다.


주1: 익명 사용자의 경우 영문판을 사용하기 바란다.

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


Windows Update시 0x8ddd0007 오류 Windows Update 사이트에서 업데이트를 수행하다 보... (5049) 2005-10-02
유용한 Maxthon 플러그인, ViewPage 요즘 필자가 즐겨사용하는 브로우저는 IE기반의 Ma... (8313)2005-10-02

QAOS.com에 게시된지 1년 이상된 자료와 관리자가 공개한 자료는 누구나 제한없이 읽을 수 있습니다.
그러나 QAOS.com의 자료를 퍼가는 것은 금지하고 있습니다.

이 정보가 유용하다고 생각되시면 QAOS.com과 많은 다른 사람들을 위해 퍼가기 보다는 링크로 알려주시기 바랍니다.

세상사는 이야기



RSS 구독 (익명 | 회원 | 강좌 | 포럼)
(C) 1996 ~ 2017 QAOS.com All rights reserved.