오늘은 웹 디버깅 툴을 알려드리겠습니다. 웹쪽 일을 하시는 분들은 대부분 이 피들러(Fiddler)를 다 알고 계실꺼라 생각이 듭니다. 요즘은 웹 브라우저에서도 디버깅 기능이 추가되어서 개발자 분들이 유용하게 사용을 하고 있습니다. 인터넷익스플로워(IE, Internet Explorer), 크롬(Chrome), 사파리(Safari)에도 디버깅 툴이 내장되어 있습니다.

 많은 웹 디버깅 툴 중에서도 이 피들러는(Fiddler)는 설치 용량도 적으며 업데이트도 잘되고 있는 툴입니다. 클라이언트(컴퓨터)에서 서버로 요청한 내역과 결과의 모든 데이터를 확인할 수 있습니다. 아래는 웹 사이트에 소개되어 있는 주요 기능입니다(항목을 클릭하면 세부 내역을 확인 할 수 있습니다).

- 주요특징

HTTP/HTTPS Traffic Recording

Web Session Manipulation

Web Debugging

Security Testing

Performance Testing

Customizing Fiddler

 아래는 피들러(Fiddler) 다운로드 웹사이트에서 간단하게 소개하는 동영상입니다(중저음의 목소리로 영어로 설명을 해주네요 ^^;).

 Fiddler를 다음 사전에서 확인을 해봤더니 바이올리니스트, 사기꾼, 피들 주자라고 나옵니다. 왜 Fiddler로 이름을 정했는지는 각자의 판단에 맡기겠습니다(저는 잘 이해가 안가서요 ㅎㅎ).

1. 피들러(Fiddler) 설치

 예전에는 fiddler2.com로 연결해서 설치 프로그램을 다운 받았습니다. 최근에 웹사이트가 개편이 되었는지 많이 바뀐거 같습니다. 주소도 http://www.telerik.com/fiddler로 변경이 되었습니다.

클릭 : http://www.telerik.com/fiddler

 위 주소로 접속하셔서 오른쪽에 Free Download로 들어 갑니다. "Built for .NET 4", "Built for .NET 2"의 다운로드가 2가지 존재합니다. 본인의 컴퓨터에 .Net Framework 4.x 이 설치되어 있으면 "Download Fiddler4"를 클릭, .Net Framework 2.x가 설치되어 있으면 "Download Fiddler2"를 클릭하여 설치하시면 됩니다.

 윈도우7 이상이 설치되어 있으시면 .Net Framework 4.x이 설치가 되어 있으실 껍니다. 확인이 힘드시면 "%systemroot%\Microsoft.NET\Framework" 폴더에서 철치된 버전을 확일 할 수 있습니다(%systemroot%는 윈도우 폴더).

 다운로드를 하셔서 설치를 진행하시면 됩니다.

2. 피들러(Fiddler) 실행

 설치된 바로가기로 실행을 하시면 아래와 같은 실행 화면이 나타납니다.

 전체적으로 화면을 살펴보면 상단에 메뉴와 툴바가 자리 잡고 있습니다. 그리고 화면 왼쪽에는 서버로 요청한 내역과 결과 리스트가 나타나고 오른쪽에는 왼쪽에서 선택한 하나의 요청에 대한 상세 내역이 나타납니다.

 웹 브라우저나 웹을 사용하는 프로그램에서 요청하고 있는 내역이 있으면 왼쪽 리스트에 계속적으로 나타나게 됩니다.  File 메뉴에서 "Capture Traffic"을 끄시면 더 이상 트래픽을 캡쳐하지 않습니다. 단축키는 "F12"입니다.

 너무 많은 트래픽이 리스트에 나타나면 원하는 요청을 찾기가 어렵기 때문에 본인이 원하는 트래픽이 나타나도록 "F12"키를 즉시 눌러 중지하거나 시작 할 수 있습니다.

 캡쳐된 트래픽 중에 하나를 선택해서 내역을 살펴 보겠습니다. Statistics(통계) 텝은 선택된 트래픽의 보낸 크기와 수신된 크기, 요청시간에 대한 상세한 정보를 확할 수 있습니다(왼쪽에 붉은색으로 표시된 트래픽은 요청에 대한 응답이 실패할 경우에 붉은색으로 표시가 됩니다).

 이번에는 Inspectors(검사자?) 텝에서는 상위에는 요청에 대한 내용, 아래쪽에는 처리결과에 대한 내역이 나타납니다. Inspectors 텝 하위에 많이 항목이 있지만 그중에 WebForms, TextView를 살펴 보겠습니다.

 WebForms를 살펴 보면 요청정보에 대해서 상세하게 나타납니다. 만약 로그인하는 트래픽을 캡쳐하면 로그인정보가 그대로 보이게 됩니다. 하단의 TextView는 요청결과에 대한 HTML내역이 나타납니다.

 컴퓨터에서 발생하는 모든 트래픽을 캡쳐하기 때문에 본인이 필요한 트래픽을 찾기가 어려울때가 있습니다. 그때는 화면 상단에 "Keep: All Sessions"을 마우스로 클릭하고 트래픽을 캡쳐할 프로그램으로 드래그하여 이동하면 선택된 프로그램(프로그램 안의 컨트롤까지 지정가능)만 캡쳐할 수 있습니다. "Keep: All Sessions"에서 "프로그램명:포트"으로 변경이 되어 캡쳐되고 있는 프로그램과 포트를 확인 할 수 있습니다.

 피들러(Fiddler)를 이용하여 웹 사이트의 성능을 확인하고 개선, 요청 정보, 요청 결과 등을 확인할 수 있어서 매우 유용합니다. 일반 응용프로그램도 요즘은 웹 프로토콜(http, https, ftp ...)을 통해서 이루어지는 경우가 많습니다. 피들러를 켜놓고 가만히 있으면 웹 브라우저를 사용하지 않아도 웹 프로토콜을 이용하는 프로그램을 볼 수 있습니다.