Javascript - Fiddler(웹 디버깅 툴)

 회사에서 일하고 있던 와중에 새로운 프로그램 하나를 배웠습니다. 바로 Fiddler입니다. Fiddler는 바이올린 연주자를 뜻하는 단어인데, Web을 조율하겠다 이런 뜻일까요? 아무튼, 이 Fiddler는 아래에 있는 링크를 통해서 무료로 다운받으실 수 있습니다.

www.telerik.com

 프로그램을 다운받고 설치한 후 실행하면 다음과 같은 화면이 나타납니다.

 Fiddler를 실행하고 나서 웹페이지를 접속하면 Fiddler에서 모든 웹페이지를 채어 온 다음 여러 가지 자료들을 보여줍니다. 아래 화면은 제가 쌍용교육센터에 있을 당시에 만든 웹페이지를 접속해본 화면입니다. 

 먼저 첫 번째는 통계 화면입니다. 웹페이지의 성능을 측정할 수 있는 페이지입니다. 클라이언트가 연결된 후 서버에 요청해서 서버가 응답한 후 클라이언트가 응답하는 과정 안에 있는 모든 단계들의 시간을 측정합니다. 제일 밑에 있는 Overall Elapsed는 전체 걸린 시간인데 화면이 나오기까지 총 0.264초가 걸렸다는 것을 확인할 수 있습니다. 교육 당시에 만든 페이지가 생각보다 효율적이군요.

 두 번째는 Inspectors 화면입니다. 이 화면에서는 해당 웹페이지의 보유하고 있는 다양한 값들을 보여줍니다. Headers에서는 캐쉬와 클라이언트, 쿠키값 등을 보여주고 있습니다.

Webform에서는 주고 받은 변수들이 나타나게 됩니다. 아무래도 암호화 같은 것을 전혀 신경쓰지 않고 만든 웹페이지다 보니 저런 것까지 보이나 싶었습니다. 이 외에도 다양한 값들이 나와있으니 유용하게 사용할 수 있을 것 같습니다. 무엇보다 좋은 점은 자동으로 디버깅을 해주니 크롬 디버깅툴과 달리 Break point를 주어서 값을 확인 안해도 된다는 점이 좋더군요. 이 툴에서도 Break point를 줄 수 있는 것 같긴 한데 아무래도 더 살펴봐야 할 것 같습니다.