fiddler2 피들러 설치방법

February 14th, 2015

오늘은 피들러에 대해 알아보고자 합니다.

모바일 디바이스에서 PC 브라우저처럼 css를 확인하고 조작할 수 있는 방법이 있는지 분께서 물어보셔서 알려드렸는데

너무나 좋아하셔서 혹시 모르시는 분이 계실것 같아 공유합니다.

웹 브라우저의 경우 각 브라우저 별 개발자 도구가 잘 갖춰져 있어 서버로부터 넘어온

자바스크립트 및 css, html파일 등을 확인해 바로바로 수정/조작 해 볼 수 있지만

스마트폰에서 css도 조작하거나 깨진 마크업이 왜 그런지 확인해보고 싶지만 엄한 폰에다 대고 우클릭하고 요소검사를 해볼 수 없으니

정말 막막하죠.. 그래도 해결책은 있는 법!

웹이든 모바일이든 네트워크를 통하는 모든 세션들을 검사해볼 수 있는 Fiddler아시나요?

Fiddler가 가진 기능은 정말 엄청나네요 (심지어 https 통신도 잡아낼 수 있습니다!!!)

*Fiddler는 윈도우에서만 사용가능합니다.

*맥이나 기타 OS에서는 프록시(윈도우를 통해 우회)를 통해서 가능하긴 합니다. (아래 프록시 연결에 설명드리겠습니다.)

어찌됬건 이제 모바일 디바이스로 전송되는 세션(html, css, javascript 파일들을 포함한 네트워크를 통하는 모든 데이터)을 Fiddler를 통해 잡아보겠습니다!

1. fiddler 다운로드 http://fiddler2.com/

http://fiddler2.com/docs/default-source/public-downloads/fiddler2setup.exe?sfvrsn=18

위 링크 누르면 바로 다운로드 될거에요.

2. 다운로드한 파일 설치합시다.! 그냥 next 연타 하시면 되겠습니다.

3. Fiddler 실행! 실행하면 아래와 같은 창이 뜹니다.

여기서 왼쪽 부분이 세션 목록으로 네트워크로 전송하거나 받은 모든 세션이고,

오른쪽은 기능 탭으로 특정 세션을 선택하면 그 세션에 대한 상세 내역이 나옵니다.

피들러를 실행한 뒤 인터넷 창을 켜보면 순식간에 어마어마한 세션들이 전송됨을 확인할 수 있습니다.

(트래픽을 멈추고 싶을 때 F12 또는 File> Capture traffic으로 멈출 수 있습니다.)

4. 모바일 디바이스를 위한 프록시 설정

*프록시: 여기서 말하는 프록시는 간단히 말해 검문소로 생각하시면 됩니다. (비유가 적절하지 않을 순 있지만 이해를 위해;;)

스페이스 닷원 건물에 나가거나 들어오려면 입구(검문소)를 지나야 하듯

네트워크를 통하는 모든 녀석이 Fiddler를 통해 나가고 들어온다고 생각 할 수 있습니다

Fiddler Menu창에서 Tools > Fiddler Options 선택

세번째 Connections 탭 선택 후 'Allow remote computers to connect' 체크 활성화시켜주시고,

fiddler listens on port: 부분에 8888 (기본)으로 해주시면 됩니다.

[##_1N|cfile7.uf@2633B84C529460AD35F438.png|width="560" height="375" filename="4.png" filemime="image/jpeg"|_##]

여기까지 윈도우에서 설정하는 것이 끝입니다.

Fiddler를 한번 껏다가 다시 켜 줍니다.(중요)

그 다음은 모바일이나 맥(아이폰 또는 안드로이드)에서 설정해주는 일만 남았습니다.

모바일 디바이스 프록시 설정

iPhone/iPad

1. 설정
2. 네트워크
3. wifi
4. 연결된 네트워크에서 우측 화살표 선택
5. 밑으로 내리면 "http 프록시" 부분이 있는데 기본 '끔' 에서 "수동"으로 변경
6. 서버 부분에 Fiddler를 설치한 PC ip 입력
7. 포트 부분에 8888 입력

안드로이드

1.환경설정
2.Wi-Fi
3.연결된 무선네트워크를 길게 누르고 있으면 뭔가 뜨는데 '네트워크 설정 변경'을 선택

4.최하단 고급옵션표시 체크
5.'프록시 설정'을 '수동' 으로 변경