Http Debugging

1. ieHTTPHeaders

개발자에게 도움을 줄수 있는 프로그램
페이지가 Http프로토콜상에서 로딩될때 쿠키, 캐싱 및 각종 링크 등등의 헤더정보를 출력

제작사 : http://www.blunck.se/
다운로드URL(프리버전) : http://www.blunck.se/iehttpheaders/ieHTTPHeadersSetup.exe

설치를 완료하면 IE의 "메뉴-표시-바" 에 ieHTTPHeaders라는 애드온이 추가
활성화를 시키면 브라우저 하단에 플러그인이 활성화

마우스 오른클릭으로 메뉴 호출
1. Clear
      출력된 로그를 화면에서 삭제
2. Save
      출력된 로그를 파일로 저장
3. Setting
      화면출력에 관한 설정
4. Content-type Filter
      출력할 컨텐츠타입 필터 설정
5. HTTP Status code Filter
      출력할 HTTP 상태코드 데이터필터링을 설정

2. IE웹개발의 필수! IE Developer ToolBar ( 링크는 출처 사이트 )
다운로드URL : MS사이트로 다운로드하러가기
 IE Developer Toolbar가 추가됨. 애드온이 화면밑에 추가된다

밑의 글은 출처가 위의 링크된 블로그 ( http://worldsky.tistory.com )

메뉴부분

1. 맨앞의 커서가 붙은 아이콘을 클릭하면 화면의 모든 링크는 작동하지 않게 되고 HTML출력화면의 모든 곳에 마우스 클릭시 해당 태그의 소스를 보여준다. 한번 더 클릭하거나 화면상에서 마우스 오른클릭을 하는 것으로 링크동작이 활성화된다.
2. 많이 보던 아이콘이다. 화면을 새로 고친다.
3. 세번째 아이콘은 브라우저 캐쉬를 정리한다.
4. 네번째 아이콘은 선택된 태그의 소스와 스타일시트를 팝업창으로 출력해준다.

5. Disable메뉴는 소스에 적용된 스크립트나 스타일시트등의 적용을 무효화한다.
6. View메뉴는 화면상에 각 태그들이 가지고 있는 id, 링크등등의 정보를 직접 보여주거나 팝업창을 통해 보여준다.
7. Outline메뉴는 화면상에 border가 0으로 되어 정확한 영역을 찾을 수 없는 table, image, div등을 위해 영역을 표시해준다.
8. Tools에는 "자"도 들어있다. ^^

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

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

두번째 탭은 속성탭이다.

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

세번째 탭은 적용된 스타일의 리스트를 출력해준다.

3. 뭐니 뭐니 해도 웹디버깅툴은  Firebug 겠지~

4. paros : 참고 paros [세션,쿠키,데이터 조정&조작하기]

5. fiddler : http://www.fiddlertool.com