'Tools for Developer'에 해당되는 글 2건

  1. 2006.09.09 [Article]Fiddler 2
  2. 2006.09.01 [Article]IE Developer Toolbar 2
Tools for Developer2006. 9. 9. 12:18

우리는 Internet Explorer 등의 웹 브라우저를 통해서 인터넷을 보게 된다. 주소 창에 주소를 입력하거나, 즐겨 찾기에서 선택을 하기도 하고, 또는 링크를 누르는 동작을 통해서 웹 페이지들을 탐색한다. 하지만, 그 내부적으로는 HTTP 프로토콜을 통해서 서버에 Request를 보내고 그에 대한 Response를 받는 복잡한 동작이 이루어지게 된다. 그 Request에는 Cookie나 사용자의 입력값 등의 정보 들이 Header에 들어가게 되고, 이런 정보들은 실제 웹 브라우저에서는 보이지 않는다.


웹 애플리케이션을 개발한다면, 이런 정보들이 제대로 들어가고 있는지를 보는 것은 중요하다. 대부분의 웹 애플리케이션에서 서버 사이드에 있는 로직들은 이런 Header정보를 많이 사용해서 처리하게 되는데, 디버깅 환경이 아니라 실제 운영 환경에서 문제가 생겼을 때 브라우저에서는 Header 정보를 볼 수가 없기 때문에 문제를 해결하기가 쉽지가 않다.


Fiddler는 이 HTTP Request/Response 정보를 볼 수 있게 해주는 아주 유용한 툴이다. http://www.fiddlertool.com/fiddler/ 에서 다운로드받을 수 있다. NetMon 등을 통하면 물론 그 컴퓨터의 모든 네트워크 트래픽을 모니터링 할 수가 있지만, 이 Fiddler는 인터넷 프로토콜만을 모니터링해주기 때문에 웹 개발자들에게 아주 유용하다.


Fiddler의 화면이다. 왼쪽에는 History가, 오른쪽에는 각 세션의 자세한 정보가 나타나게 된다.




각 세션의 Request/Response Header 정보를 자세하게 볼 수 있다.




또 하나의 유용한 기능, 웹 페이지의 Response Time 정보를 알 수가 있다.


'Tools for Developer' 카테고리의 다른 글

[Article]IE Developer Toolbar  (2) 2006.09.01
Posted by kkongchi
Tools for Developer2006. 9. 1. 15:46
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Overview

다음 주소에 가시면, IE Developer Toolbar라는 것을 다운로드받을 수가 있다. 이 툴바는 웹 애플리케이션 개발자/디자이너에게 아주 유용한 많은 기능을 제공한다.

Developer Toolbar 화면





Show Ruler
이 기능은 마우스로 드래그한 부분만큼의 길이를 측정해주는 기능이다. 웹 페이지를 만들다 보면 사실 넓이나 높이를 지정해줘야 하는 경우가 꽤 있는데, 이럴 때 나는 사실 대부분 첨엔 대충 정해놓고 고치면서 맞추는 방식을 사용했다. 하지만, 지금은 이 기능을 사용해서 꽤 자세하게 맞출 수가 있다.

Ruler를 사용하는 화면




Resize
특정 해상도에 맞춰서 IE 창 크기를 자동으로 조절해준다. 디자이너가 여러 해상도에서 어떻게 화면이 나올지를 보는데 좋을 것 같다.

Images
이걸 선택하면 페이지 상의 이미지의 정보들을 화면에서 볼 수 있다. 파일 사이즈, 경로 등의 정보들을 선택해서 볼 수 있고, 통합 리포트도 볼 수가 있다.


Validate
HTML, CSS 등의 표준에 맞는 지를 검증해주는 기능이다. 클릭하면 http://validator.w3.org 사이트로 링크되면서 페이지에서 표준에 맞지 않는 에러등을 리포트해준다. (Visual Studio 2005 등에도 거의 비슷한 기능이 있다)


Outline
가장 잘 쓰고 있는 기능이다. 대부분의 웹 페이지는 Table 이나 Div 등을 써서 페이지의 레이아웃을 잡게 되는데, 이런 용도로 사용된 태그들은 대부분 border 라인을 보이지 않게 한다. (레이아웃만을 잡는 태그니까, 보이지 않게 하는 것이 디자인 상 좋기 때문에) 이 기능을 쓰면 그 숨겨진 경계선들이 다 보이게 된다. 간혹 웹 페이지를 개발하다가 레이아웃이 깨지는 경우가 있는데, 이런 경우에 경계선이 숨겨져 있으면 참 찾기가 힘들다. 그럴 때 아주 유용하다.

Table의 모든 Cell 태그를 outline한 화면




View
HTML 내부에 있는 Class, ID, Link 등의 정보를 화면에 출력해준다.

Disable
화면에서 Cache, 쿠키, 자바스크립트, CSS를 Disable시켰을 때의 효과를 알고 싶다면, 이 기능을 사용하면 된다.

View DOM
이 기능을 선택하면 DOM Explorer라는 것이 브라우저의 하단에 생긴다. 이 DOM Explorer를 통해서 페이지의 HTML구조를 트리 형태로 탐색해 볼 수가 있다. 트리에서 노드를 선택하면, 그 노드에 대한 정보가 옆쪽에 출력이 되고, 브라우저에서도 해당되는 부분이 깜박이면서 표시가 된다. 이 역시 웹 페이지 개발할 때 아주아주 유용하다. 그리고 HTML의 구조를 파악하는데 도움이 되기 때문에, 디자이너가 준 HTML을 개발자가 이해할 때 매우 도움이 될 것 같다.

DOM Explorer 화면

'Tools for Developer' 카테고리의 다른 글

[Article]Fiddler  (2) 2006.09.09
Posted by kkongchi