IE Developer Toolbar

MS에서 공식적으로 배포하는 IE Developer Toolbar.

쉽게말해 페이지(태그)의 구조를 트리형태로 볼 수 있고
각 객체(태그)들의 속성을 변환해 보며 페이지의 모양을 확인할 수 있고...

암튼 웹 개발시 뷰와 관련된 코딩을 한다면 상당히 유용한 프로그램.

설치하고 나서 익스플로러의 메뉴에서 보기->탐색 창 중에
IE Developer Toolbar를 선택하면 창 하단에 툴바가 하나 뜬다.

캡춰같은거 없이 간단히 메뉴쪽만 설명을 해 보자면,

아이콘 4개 중
첫번째 : 페이지상의 객체를 클릭으로 선택가능 (토글)
두번째 : refresh.
세번째 : 브라우저 캐시파일 삭제
네번째 : 트리에서 선택된 개체에 대해 개체 태그와 적용된 스타일 내용 출력. 내용이 많으면 좀 걸립니다.


File 메뉴
Undo All : 뭘 undo 한다는지는 모르겠는데 암튼 페이지 리프레쉬됨-_-;

Find 메뉴
Select Element by click : 아이콘 첫번째거
Find Element : Element, class, id, name 으로 객체 검색 가능. 자바스크립트의 getElementById나 getElementsBy...등의 함수와 같다고 생각하면 될듯
Find Next : Find element의 객체가 여러개일경우 다음 객체 find.

Disable 메뉴
Script : 스크립트 disable됨.
Popup Blocker : IE에 팝업차단이 되있을 경우 체크하면 팝업차단이 해제됩니다. 그냥 Ctrl+Alt키 누르면 되는데.. 필요하나?
All CSS : 페이지에 적용된 스타일이 전부 사라집니다. html과 css가 분리된 사이트는 페이지가 엉망으로 보이게 됩니다.

View 메뉴
Class and ID information : 각 객체 위에 class와 id명을 보여줍니다.
Link Paths : a 태그에 연결된 href속성을 페이지에 보여줍니다.
Link Reports : xml파일로 출력해줍니다. 컴퓨터에 xml연결프로그램이 지정되어 있어야 하겠죠?
Tab indexes : Tab Index를 보여줍니다
Access key : access key를 보여줍니다.
Source : 페이지 혹은 객체의 소스를 보여줍니다. 해당 객체에 대해 객체부분 소스와 적용된 스타일을 각기 볼수도 있고 따로 볼수도 있습니다. Original은 서버에서 받아온 파일 자체...
CSS Selector Match : 페이지에 로드된 스타일들과, 그 스타일들이 사용(적용)된 횟수를 보여줍니다.

Outline메뉴 : 각 객체에 대해 외곽선을 표시해 줍니다.
다중체크가 가능하고, 맨 아래 Clear outlines를 선택하면 모든 외곽선이 사라집니다.

Images 메뉴 : 페이지의 이미지들을 모두 숨길수도 있고, View메뉴에서처럼 이미지 위에 경로나 alt텍스트들을 표시해줄수 있습니다. disable images하면 페이지가 새로고침되니 유의하시길.

Cache 메뉴 : 현재 도메인에 대한 캐시 정책, 캐시 삭제, 쿠키 정보들을 봅니다.

Tools메뉴 : 창 사이즈를 정해진 크기로 리사이즈 할 수 있습니다. 레이아웃을 정하고 페이지가 얼마나 잘리는지 확인하는데 사용할 수 있겠죠....
Show ruler는 화면상 길이 및 포인트 측정, Show color picker는 컬러피커..입니다..

Validate메뉴는 현재 소스의 유효성을 체크하는 메뉴입니다...
페이지 링크이므로 인증이 필요한 페이지는 체크가 제대로 안될수도 있습니다....




크게 있는 창이 세개가 있는데
맨 왼쪽은 트리구조로 나타낸 태그들,
가운데는 트리구조에서 선택된 객체의 속성들,
오른쪽은 해당 객체에 적용된 스타일들.
입니다.
하단에 Show Read-Only Properties나 Show Default Style values를 체크하면 읽기전용 속성이나 기본적으로 적용된 스타일들까지 모두 볼수가 있고 속성 추가, 조작도 바로바로 가능하죠.



이 이미지 속성이 어케 되나...
요 태그가 어디로 가나...
공백을 얼마나 줘야 적당할까....

뭐 이런걸 저장-새로고침의 반복 없이도 페이지에 바로바로 적용이 가능하다는게 좋은듯 하더군요.


더불어 스크립트 디버깅이 가능한 Script Debugger도 웹개발자로써 must-have프로그램 원츄.

invalid-file